flex元素属性

创建一个 flex 容器区域: 把一个容器的 display 属性值改为 flex 或者 inline-flex即可, 容器中的直系子元素就会变为 flex 元素

flex 元素初始属性

元素排列为一行 (flex-direction 属性的初始值是row)
元素从主轴的起始线开始
元素不会在主维度方向拉伸，但是可以缩小
元素被拉伸来填充交叉轴大小
flex-basis 属性为 auto
flex-wrap 属性为 nowrap

flex 元素上的属性

Flex 简写形式: flex-grow，flex-shrink，flex-basis。 flex 属性的作用改变了 flex 容器中的可用空间(正负)的行为;

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

flex-basis


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

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


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

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

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

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-grow 和 flex-shrink 赋值是要注意比例。如果我们给所有flex元素的flex属性赋值为 1 1 200px ，并且希望其中一个元素可以增加到2倍，我们可以给该元素的flex属性赋值为2 1 200px */


## 小结: Flex子元素大小
- flex 子元素的基本大小

flex-basis: auto: 默认(content-box 大小) 固定尺寸: 100px 100px 0: 忽略flex子元素的尺寸, 等比划分的基础

- flex 容器的可用空间(正负)

flex-grow 会在正可用空间发挥作用 0: 不分配空间 1: 按比例划分空间

flex-shrink 会在负可用空间发挥作用 0: 不收缩空间 1: 收缩对应比例的负空间尺寸



## 参考
[控制Flex子元素在主轴上的比例](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)

adodo0829 / blog

flex元素属性详解 #66

flex元素属性

flex 元素上的属性