【CSS】Flex布局总结

本文基本是 Flex入门(MDN) 的总结，推荐先观看原文。

弹性容器和弹性元素

Flex 的 CSS 属性主要作用于弹性容器和弹性元素，因此在学习 Flex 布局之前，我们需要先搞清楚这两个概念。

弹性容器
设置了 display: flex 的元素是弹性容器

弹性元素
弹性容器的直接子元素是弹性元素。

下面我们将分别讲解作用于这两个容器的属性。

弹性容器的属性

align-items 定义交叉轴（副轴）的对齐方式。默认值是 stretch，也就是弹性元素会拉伸填满弹性容器的副轴。

justify-content 定义主轴的对齐方式。

flex-direction 定义主轴的方向。

flex-wrap 当弹性元素溢出弹性容器时，是否换行。默认为 nowrap，也就是不换行。这里需要注意，如果设置 flex-wrap: wrap且当产生换行时，每一个新的换行都被当做独立的弹性容器，有自己的flex轴。可以参考这个例子：MDN

flex-flow
是 flex-direction 和 flex-wrap 的简写形式。e.g.： flex-flow: column wrap;

弹性元素的属性

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

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

重点：

1. flex-basis 的值默认为 auto，如果弹性元素没有设置宽度（或者高度，具体取决于 flex 的方向），那么 flex-basis 的值默认是元素的内容大小。
2. 可以通过flex-basis 设置弹性元素的宽（高）。

flex-grow
flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

如果我们给上例中的所有元素设定 flex-grow 值为1， 容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。

flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为2， 其他元素值为1，则第一个元素将占有2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有1/4（各50px）。——来自 MDN

重点：

1. flex-grow 的值如果为一个正整数，则 flex 元素会以 flex-basis 为基础在主轴延伸并占据主轴的可用空间。

flex-shrink
flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制flex元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。因此，我们可以在文章《控制Flex子元素在主轴上的比例》中更详细地看一下这个算法的原理。——来自 MDN

重点

1. flex-shrink 如果设置为一个正整数，那么 flex 元素可以收缩自身。

flex 简写
flex 是 flex-grow flex-shrink flex-basis 的简写。e.g.: flex: 1 1 auto。