CSS Flex布局

flex布局的基本概念

• flex布局是一种一维的布局模型，它给子元素之间提供了强大的空间分布和对齐能力。
• 我们之所以说flex是一种一维的布局，是因为一个flex容器一次只能处理一个维度上的元素布局，一行或者一列。
• 采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目，容器存在两根轴，默认项目按照主轴排列。

flexbox的两根轴线

当使用flex布局时，首先应该想到两根轴线——主轴和交叉轴，主轴由flex-direction定义，另一根轴垂直于它，flexbox的所有属性都跟这两根轴线有关。

首先，先设置flex容器

.container{
    display: flex | inline-flex; //块元素使用flex，行内块元素使用inline-flex
}

容器属性

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

主轴

主轴由flex-direction定义，可以取四个值

• row

• row-reverse

• column

• column-reverse

flex-direction: row | row-reverse | column | column-reverse;

• row和row-reverse分别是水平排列和水平逆序排列

• column 和 column-reverse 分别是垂直排列和垂直逆序排列

交叉轴

交叉轴垂直于主轴，所以如果你的flex-direction设置成了row或者row-reverse的话，交叉轴的方向就是沿着上下方向延伸的。

如果主轴方向设成了column或者column-reverse交叉轴就是水平方向

用 flex-wrap 实现多行 Flex 容器

flex-wrap: no-wrap | wrap | wrap-reverse;

• nowrap （默认）不换行

• wrap 换行，第一行在上方

• wrap-reverse 换行，第一行在下方

简写属性 flex-flow

你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

元素间的对齐和空间分配

Flexbox 的一个关键特性是能够设置 flex 元素沿主轴方向和交叉轴方向的对齐方式，以及它们之间的空间分配。

align-items

align-items属性可以使元素在交叉轴方向对齐

这个属性的初始值为stretch，这就是为什么 flex 元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满 flex 容器——最高的元素定义了容器的高度。

align-items:flex-start | flex-end | center | baseline | stretch;
//Streth 拉伸（子元素不设置高度时的默认值)

justify-content

justify-content属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。

你可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。

justify-content: flex-start | flex-end | center | space-between | space-around;

flex元素上的属性

为了更好地控制flex元素，有四个属性可以作用于他们：

• order

• flex-grow

• flex-shrink

• flex-basis

在考虑这几个属性的作用之前，需要先了解一下可用空间这个概念，这几个flex属性其实就是改变了flex容器中的可用空间的行为，同时，可用空间对于flex元素的对齐行为也是很重要的。

假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下，flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。

如果期望这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些 flex 属性要做的事。

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

Flex 元素属性：flex-grow

• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• 如果容器压根就没有剩余空间，那么即使设置了flex-grow也不会生效。

• flex-grow的默认值是0，子项目不做任何比例拉伸，如果将三个子项目的flex-grow属性都设为1，那么他们将按照1:1:1的比例分配剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

Flex 元素属性：flex-shrink

• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

• 负值对该属性无效，如果容器还有剩余空间，同样设置flex-shrink也是无效的。

• 如果不希望压缩，我们可以选择换行，只需要设置flex-wrap为wrap就好。

Flex 元素属性： flex-basis

• flex-basis 定义了该元素的空间大小，flex 容器里除了元素所占的空间以外的富余空间就是可用空间。该属性的默认值是 auto。此时，浏览器会检测这个元素是否具有确定的尺寸。在上面的例子中，所有元素都设定了宽度（width）为 100px，所以 flex-basis 的值为 100px。

• 如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给 Flex 元素的父元素声明 display: flex，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。

Flex属性的简写

• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

• 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

• 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。