CSS的flex布局小结

Flex布局

也称为弹性布局，在此布局中有两个重要角色：

1. flex容器：是flex布局中的父元素，其包含一个或多个flex项目；
2. flex项目：是flex布局中的子元素，有一个或多个，包含在flex容器中。

如何使用Flex布局

给一个html元素添加CSS属性

display:flex;

后即可启用flex布局，此元素即为flex容器。

非常重要的概念

1. 主轴：flex布局中各子项目的排列方向即为主轴，默认为横向，子项目沿横轴从左向右依次排列；
2. 侧轴，与主轴垂直相交，也被称为“交叉轴”。侧轴的方向由主轴确定，也就是说，只要确定了主轴，也就确定了侧轴。

主轴是横，侧轴就是竖；主轴是竖，侧轴就是横。就是垂直相交~

在CSS中使用flex-direction属性来确定主轴方向。

可选值	主轴方向	侧轴方向
row(默认值)	横向（从左向右）	纵向
column	纵向（从上到下）	横向
row-reverse	横向（从右向左）	纵向
column-reverse	纵向（从下到上）	横向

Flex容器的其他可用选项

在使用其他选项之前，必须要清楚主轴是啥样的！！

justify-content

此属性来确定主轴上各个flex项目的的对齐方式

可选值	当flex-direction:row时
flex-start(默认值)	项目依次从左向右排列，左对齐
flex-end	项目依次从左向右排列，右对齐
center	项目依次从左向右排列，居中对齐
space-between	项目两端对齐，依次从左向右排列，各个项目之间(between)留有空间（不包括左右两端）
space-around	各个项目依次从左向右排列，左右两侧(around)留有空间（包括左右两端）

align-items

此属性来确定侧轴（交叉轴）上各个项目的对齐方式。

可选择值	当flex-direction:row时
stretch(默认值)	若项目未设置高度或设为auto，将占满整个容器的高度
flex-start	与侧轴的起点对齐
flex-end	与侧轴的终点对齐
center(常用)	侧轴的中点对齐
baseline	项目的第一行文字的基线对齐

flex-wrap

此属性用于确定在主轴上的子项目无法一行显示时，是否可以换行。

可选值	flex-direction:row时
nowrap(默认值)	各子项目会排列成一行，即使一行放不下全部元素，也会挤到一起
wrap	子项目自动换行
wrap-reverse	子项目自动换行，换行后翻转行的排序

align-content

此属性用于确定各行子项目之间的对齐方式。当flex-wrap:warp时，此属性可用。

可选值	flex-direction:row;flex-wrap:wrap时
stretch(默认值)	占满整个侧轴空间
flex-start	各行与侧轴的起点对齐
flex-end	各行与侧轴的终点对齐
center	各行与侧轴的中点对齐
space-between	各行与侧轴的两端对齐后，各行之间(between)间隔平均分布
space-around	各行之间(around)都留有间隔，所以两行之间的间隔*2

flex-flow

此属性是flex-direction和flex-wrap的简写形式，默认值：row no-wrap，即：主轴横向不换行（不常用）。

Flex子项目的可用选项

flex-grow

子项目占用剩余可用空间的比例，默认为0，即：不放大。

子项目个数	设置值	说明
N	0(默认值)	不放大
1	1	占用全部剩余空间
2	1, 1	均分剩余空间
2	1, 2	项目1占用1/3的剩余空间，项目2占用2/3的剩余空间
3	1, 1, 2	项目1,2各占用1/4的剩余空间，项目3占用2/4的剩余空间

flex-shrink

此属性于用确定当容器的空间不够包括子项目时，各个子项目的缩小比例。

子项目个数	设置值	说明
N	1(默认)	如果空间不足，项目将等比例缩小
1	0	空间不足，也不缩小
2	0, 1	空间不足时，项目1不缩小，其它缩小

flex-basis

此属性用于设置在分配多余空间之前，项目占据的主轴空间。

1. 此属性的默认值为auto，即项目的本来大小。
2. 此属性可设为与width或height相同的值，此时项目将占据固定空间（不常用），一般都直接设置width/height的值。

flex

这个属性名和flex布局的名字相同，感觉很厉害的样子，但是其实是用在子项目上的，没那么厉害！！~

此属性是flex-grow,flex-shrink,flex-basis的简写，默认值为:0 1 auto。后两个属性可选。所以有时候会写为：flex: 1，即：占用剩余空间。

该属性有两个快捷值：

1. auto (1 1 auto)
2. none (0 0 auto)。

当子项目需要换行，但是又不能确定容器的宽度和各个子元素的宽度时，可通过设置的flex的值，来决定在几个子项目后进行换行。

1. 比如将flex的值设置为25%，则排列4个子项目后，会换行；
2. 同理，将flex设置为20%，则有5个子项目后，会换行。
3. 但是最好要保证每行的子元素个数相同，不然上下两行的对齐，也让人头疼！

align-self

此属性用于覆盖父容器中设置的align-items的值，可以使某个子项目在侧轴显示与其他项目不同的对齐方式。

默认值为auto，表示继承flex容器中设置的align-items属性。如果容器中没有设置algin-items，则等同于stretch（占满整个容器）。

order

此属性用于设置子项目的排列顺序，默认为0。数值越小，排列越靠前（不常用）。

此属性可在不改变的html源文件的情况下，对各个子项目进行重新排序。