- 基本概念
任何一个容器都可以指定为flex（弹性布局）
行级元素：display：inline-flex
webkit内核浏览器：display：-webkit-flex
设置为flex布局后，子元素的float、clear、vertical-align属性失效
容器默认为两根主轴：水平的主轴和垂直的交叉轴 - 容器的六大属性
a. flex-direction 决定主轴的方向 默认为row
flex-direction：row/row-reverse/column/column-reverse
row:主轴为水平方向，起点在左边
row-reverse:主轴为水平方向，起点在右边
column:主轴为垂直方向，起点在上边
column:主轴为垂直方向，起点在下边
b. flex-wrap 当一条主轴上排列不下时，如何换行 默认为nowrap
flex-wrap:nowrap/wrap/wrap-reverse
nowrap:不换行
wrap:换行，第一行显示在上面
wrap-reverse：换行，第二行显示在上面
c. flex-flow flex-direction和flex-wrap的简写形式，默认为row nowrap
flex-flow：flex-direction || flex-wrap
d. justify-content 项目在主轴上的方向
justify-content:flex-start/flex-end/center/space-between/space-around
flex-start:左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔相等
space-around:每个项目两侧的间隔都相等，所以项目之间的间隔比项目与边框的间隔大一倍
e. align-items 项目在交叉轴上如何对齐 默认值为stretch
align-items:flex-start/flex-end/center/baseline/stretch
flex-start:交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch：项目未设置高度或高度为auto时，将占满整个容器的高度
f.align-center
f. align-content 多根轴线的对齐方式，一根轴线时不起作用 ，默认为stretch
align-content:flex-start/flex-end/center/space-between/space-around/stretch
flex-start:与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框之间的间隔大一倍
stretch：轴线占满整个交叉轴 - 项目的六大属性
a. order 项目的排列顺序，数值越小，排列越靠前，默认值为0
order：int
b.flex-grow 项目的放大比例，默认为0，如果存在剩余空间也不放大
flex-grow：number
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
c.flex-shrink 项目的缩小比例，默认为1，如果空间不足也不缩小
flex-shrink：number
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效
d.flex-basis 在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本来的大小
flex-basis：lenght | auto
可以设置为width\height属性一样的值，项目占据固定空间
e.flex flex属性是flex-grow，flex-shrink，flex-basis的简写，默认值为：0 1 auto，后两个属性可选
flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]
f. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch
Flex布局
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
