Flex 弹性盒子

Left image {flex-direction: row}, Right image {flex-direction: column}

弹性容器属性####

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

弹性元素属性####

order
align-self
flex-grow
flex-shrink
flex-basis

弹性容器####

flex值会引起一个元素生成一个盒级的弹性盒子。
inline-flex会生成一个行内弹性盒子。
display: flex | inline-flex

flex: 属性设置了弹性盒子长度的组成，包括增长因数(flex-grow)、收缩因数(flex-shrink)和伸缩基准值(flex-basic)。对于一个弹性元素，flex属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。
默认值：1 1 0

flex-flow属性是设置flex-direction和flex-wrap的简写，可以同时定义主轴和侧轴。
默认值：row nowrap

主轴方向######

flex-direction：属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。
值：row | row-reverse | column | column-reverse

justify-content: 属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。

提示：以前版本的语法不支持space-*值。

值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start

侧轴方向######

flex-wrap属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。
值： nowrap | wrap | wrap-reverse
默认：nowrap

align-items: 可以设置弹性元素在容器侧轴上的对齐方式，与justify-content功能相似但是方向垂直。align-items设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，align-self属性总是与align-items相同。）
值：flex-start | flex-end | center | baseline | stretch
默认值：stretch

align-content属性设置了容器内每行沿侧轴的对齐方式（控制多行（换行后的行）在交叉轴方向上的对齐方式）。与justify-content属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效，容器内有多行时生效（需要 flex-wrap: wrap;））。

others######

order属性通过将这些元素分配到序数分组来控制它们出现的顺序。
默认值：0

flex-grow属性设置增长因数(放大)，不接受负值。
默认值：0

flex-shrink属性设置了收缩因数，不接受负值。
默认值：1

flex-basis属性设置了弹性框伸缩的基准值，不接受负值。
值：类似width，默认值：auto

遇到的坑：

在低版本浏览器中（如iOS13，Harmony flutter app 内嵌webview），嵌套的flex-column 布局，父元素最后的空间都被截取掉，比如padding-bottom，margin-bottom, flex-column子元素之后的div，flex-column子元素的padding-bottom.

解决方案：避免嵌套flex-column的试用