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值會(huì)引起一個(gè)元素生成一個(gè)盒級(jí)的彈性盒子。
inline-flex會(huì)生成一個(gè)行內(nèi)彈性盒子。
display: flex | inline-flex

flex: 屬性設(shè)置了彈性盒子長(zhǎng)度的組成，包括增長(zhǎng)因數(shù)(flex-grow)、收縮因數(shù)(flex-shrink)和伸縮基準(zhǔn)值(flex-basic)。對(duì)于一個(gè)彈性元素，flex屬性會(huì)被用來(lái)設(shè)置元素的尺寸，對(duì)于一個(gè)非彈性元素，該屬性無(wú)效。
默認(rèn)值：1 1 0

flex-flow屬性是設(shè)置flex-direction和flex-wrap的簡(jiǎn)寫，可以同時(shí)定義主軸和側(cè)軸。
默認(rèn)值：row nowrap

主軸方向######

flex-direction：屬性通過(guò)設(shè)置容器主軸來(lái)定義彈性元素如何在容器內(nèi)排列。這個(gè)屬性確定了彈性元素排列的方向。
值：row | row-reverse | column | column-reverse

justify-content: 屬性將彈性元素沿容器主軸方向?qū)R。當(dāng)所有彈性元素的長(zhǎng)度和邊距都設(shè)置好之后，布局完成。一般情況下，當(dāng)行內(nèi)所有彈性元素尺寸不可變或可變且達(dá)到最大尺寸的情況下，該屬性會(huì)分配剩余可用空間。同時(shí)，當(dāng)元素溢出行的時(shí)候，它也會(huì)對(duì)其排列做出控制。

提示：以前版本的語(yǔ)法不支持space-*值。

值：flex-start | flex-end | center | space-between | space-around 默認(rèn)值：flex-start

側(cè)軸方向######

flex-wrap屬性控制了容器為單行還是多行。并且定義了側(cè)軸的方向，新行將沿側(cè)軸方向堆砌。
值： nowrap | wrap | wrap-reverse
默認(rèn)：nowrap

align-items: 可以設(shè)置彈性元素在容器側(cè)軸上的對(duì)齊方式，與justify-content功能相似但是方向垂直。align-items設(shè)置彈性盒子的所有子元素的對(duì)齊方式，包括匿名彈性元素。元素可以通過(guò)單獨(dú)設(shè)置“align-self”來(lái)覆蓋該屬性。（對(duì)于匿名彈性元素，align-self屬性總是與align-items相同。）
值：flex-start | flex-end | center | baseline | stretch
默認(rèn)值：stretch

align-self: 用來(lái)單獨(dú)設(shè)置彈性元素在側(cè)軸的對(duì)齊方式，功能與align-items相同?？梢愿采walign-items屬性。
值：auto | flex-start | flex-end | center | baseline | stretch 默認(rèn)值：auto

align-content屬性設(shè)置了容器內(nèi)每行沿側(cè)軸的對(duì)齊方式（控制多行（換行后的行）在交叉軸方向上的對(duì)齊方式）。與justify-content屬性在主軸方向?qū)R單獨(dú)元素的方式相似。如果容器內(nèi)只有一行，該屬性無(wú)效，容器內(nèi)有多行時(shí)生效（需要 flex-wrap: wrap;））。

值：flex-start | flex-end | center | space-between | space-around | stretch
默認(rèn)值：stretch

others######

order屬性通過(guò)將這些元素分配到序數(shù)分組來(lái)控制它們出現(xiàn)的順序。
默認(rèn)值：0

flex-grow屬性設(shè)置增長(zhǎng)因數(shù)(放大)，不接受負(fù)值。
默認(rèn)值：0

flex-shrink屬性設(shè)置了收縮因數(shù)，不接受負(fù)值。
默認(rèn)值：1

flex-basis屬性設(shè)置了彈性框伸縮的基準(zhǔn)值，不接受負(fù)值。
值：類似width，默認(rèn)值：auto

遇到的坑：

1. 在低版本瀏覽器中（如iOS13，Harmony flutter app 內(nèi)嵌webview），嵌套的flex-column 布局，父元素最后的空間都被截取掉，比如padding-bottom，margin-bottom, flex-column子元素之后的div，flex-column子元素的padding-bottom.

解決方案：避免嵌套flex-column的試用