flex布局学习总结

flex布局

• 任何元素都可以。

	display:flex;

• 行内元素也可以。

	display:inline-flex;

• webkit内核加上-webkit前缀。

	display:-webkit-flex;
	display:flex;

• flex布局中，子元素的float、clear和verticlal-align属性失效。

flex容器

• 采用flex布局的元素成为flex容器，所有孩子称为item。
• 主轴：容器横向轴。
• 交叉轴：容器纵向轴。
• 主尺寸：item宽。
• 交叉尺寸：item高。

flex属性

1. flex-direction：主轴的排列方向。

参数	说明
row	从左到右排列，默认
row-reverse	从右到左排列，靠右
column	从上到下排列
column-reverse	从下到上排列

2. flex-wrap：如何换行

参数	说明
nowrap	不换行，默认
wrap	换行
wrap -reverse	换行，从下到上

3. flex-flow：上面的简写，默认row nowrap。
4. justify-content：主轴上的对齐方式。

参数	说明
flex-start	左对齐
flex-end	右对齐
center	居中
space-between	两头对其，中间间隔平分
space-around	每个item两边间隔相等

5. align-items：交叉轴上的对齐。

参数	说明
flex-start	上对齐
flex-end	下对齐
center	居中
baseline	item的第一行文字基线对齐
stretch	如果item的height为未设置或auto，将占满容器高度

6. align-content：定义多根轴线的对齐方式，如果只有一个轴线，则不起作用。

参数	说明
flex-start	上对齐
flex-end	下对齐
center	居中
space-between	两头对其，中间间隔平分
space-around	每个item两边间隔相等
stretch	轴线占满整个交叉轴

item

1. order：item的排列顺序，越小越靠前。
2. flex-grow：item的放大比例，默认0不放大（有剩余空间）。
3. flex-shrink：item的缩小比例，默认1，空间不足则缩小。
4. flex-basis：item占据的主轴空间，默认auto（本来大小）。
5. flex：上面的缩写。
6. align-self：item自己的对齐方式（可覆盖align-items属性）