display:flex

關(guān)于那些迷迷糊糊的flex屬性們

flex-direction 改變flex容器的主軸方向

• row 主軸以x軸 方向從左到右 （主軸被定義為與文本方向相同。 主軸起點和主軸終點與內(nèi)容方向相同。）
• column 主軸以y軸 方向從上到下 （flex容器的主軸和塊軸相同。主軸起點與主軸終點和書寫模式的前后點相同）
• row-reverse 主軸以x軸 方向從從右到左 （表現(xiàn)和row相同，但是置換了主軸起點和主軸終點）
• column-reverse 主軸以y軸 方向從下到上 （表現(xiàn)與column相同，但是置換了主軸起點與主軸終點）

justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間。

• flex-start 定義內(nèi)容元素在主軸的起始位置對齊
• flex-end 定義內(nèi)容元素在主軸的結(jié)束位置對齊
• center 定義內(nèi)容元素在主軸的中心位置對齊
• space-between 定義內(nèi)容元素平均分配在主軸上，第一個元素在主軸開始位置，最后一個元素在主軸結(jié)束位置
• space-around 定義內(nèi)容元素平均分配在主軸上，第一個元素到行首的距離與最后一個元素到行尾的距離是相鄰元素之間距離的一半

flex-wrap

• nowrap
  flex 的元素被擺放到到一行，這可能導(dǎo)致溢出 flex 容器。 cross-start 會根據(jù) flex-direction
  的值 相當(dāng)于 start 或 before。
• wrap
  flex 元素 被打斷到多個行中。cross-start 會根據(jù) flex-direction
  的值選擇等于start 或before。cross-end 為確定的 cross-start 的另一端。
• wrap-reverse
  和 wrap 的行為一樣，但是 cross-start 和 cross-end 互換。

align-items 交叉軸

• baseline
  所有元素向基線對齊。側(cè)軸起點到元素基線距離最大的元素將會于側(cè)軸起點對齊以確定基線。