Flex布局学习

Flex基本概念

示例图

Flex容器

实现Flex布局需要先指定一个容器，任何一个容器都可以被指定为Flex容器，内部元素就可以使用Flex来进行布局。

.container {
    display: flex;
}

flex-direction方向

容器内部的元素排列方向，有以下四种方向：

1. row，水平方向，从左到右排列子元素
2. row-reverse，水平方向，从右到左排列子元素
3. column，竖直方向，从上到下排列子元素
4. column-reverse，竖直方向，从下到上排列子元素

flex-direction定义了容器的主轴方向，对应的还有一个与之垂直的交叉轴

flex-wrap 换行

当容器主轴方向尺寸固定时，如果子元素的总宽度超出时，会根据这个属性决定是否换行显示。有三个可选值：

1. nowrap，不换行，显示不下，则压缩子项目的大小
2. wrap，换行显示，显示不下时，换到下一行显示
3. wrap-reverse，换行显示，但是第一行在最下方

justify-content 主轴上子元素的对齐方式

1. flex-start，主轴头部对齐
2. flex-end，主轴尾部对齐
3. center，主轴居中
4. space-between，两端对齐，子元素之间间隔相等
5. space-around，子项目之间距离相等，两端距离是中间距离的一半

align-items 交叉轴上子元素的对齐方式

1. stretch，拉伸子元素，交叉轴的尺寸与容器一致
2. flex-start，子元素在交叉轴顶部对齐
3. flex-end，子元素在交叉轴底部对齐
4. center，子元素在交叉轴中点对齐
5. baseline，以文字的底部对齐

align-content

当flex-wrap设置为wrap时，可能会存在多根主轴，只有这种情况下，这个属性才会起作用。属性值有下面几种：

1. stretch，拉伸，每根轴平分交叉轴的尺寸
2. flex-start，交叉轴上起点对齐
3. flex-end， 交叉轴终点对齐
4. center，交叉轴中间对齐
5. space-between，轴线两端对齐，中间间隔相等
6. space-around，中间间隔相等，两端间隔是中间间隔一半

Flex子元素

在flex容器里面的都属于子元素。

order

定义在容器里的排列顺序，数值越小，排列越靠前，可以修改HTML的结构。

flex-basis

设置在主轴上的大小，默认auto，根据子元素自身设置的大小。如果设置了数值时，自身设置的大小就失效，flex-basis需要跟flex-grow和flex-shrink配合使用才能发挥效果。

flex-grow

子元素的放大比例，默认值为0，即使存在剩余空间也不放大。

当容器内所有与的子元素以flex-basis的值进行排列后，如果仍有剩余空间，那么将根据flex-grow再平分剩余空间

flex-shrink

跟grow相反，让容器空间不足时，对子元素进行大小压缩。

flex

flex-basis，flex-grow，flex-shrink三个属性的组合

flex属性如果指定的是一个数字，那么指定的是grow，如果是一个百分数或者px值，那么是basis。

同一时间，flex-grow和flex-shrink只有一个能起作用，空间足够是flex-grow发挥作用，空间不足时，flex-shrink发挥作用。

align-self

定义自己的对齐方式，优先级高于容器中的align-items

参考链接:30 分钟学会 Flex 布局