【学习教材】
阮一峰Flex布局教程(语法篇、实例篇)
语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实例篇:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
【Flex属性速查】
1.定义:
容器:display:flex;
行内元素:display:inline-flex;
webkit内核浏览器:display:-webkit-flex;
2.容器属性:
1)flex-direction: row | column | row-reverse | column-reverse
2)flex-wrap: nowrap | wrap | wrap-reverse
3)flex-flow: <flex-direction> || <flex-wrap> //默认为row nowrap
4)justify-content: flex-start | flex-end | center | space-between | space-around;
5)align-items: flex-start | flex-end | center | baseline | stretch;
6)align-content: flex-start | flex-end | center | space-between | space-around | stretch
- 项目属性:
1)order: <integer>
2)flex-grow: <number>
3)flex-shrink: <number>
4)flex-basis: <length> | auto
5)flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
6)align-self: auto | flex-start | flex-end | center | baseline | stretch;
网友评论