Flexbox Guide

Flexible Box 模型，一般被稱爲 flexbox，是一種一維的佈局模型。它給 flexbox 的子元素之間提供了強大的空間分佈和對齊能力。

• 基本介紹
• 瀏覽器兼容性
• 啓用Flexbox

• 容器屬性

  • 行||列 對齊 ==row and columns==
  • 水平||垂直 對齊 ==Vertical and horizontal==
  • 更改水平對齊 ==change horizontal alignment==

  • 更改垂直對齊 ==change vertical alignment==

    • 關於基準線 ==about baseline==
  • 換行 ==wrap==

• flex元素上的屬性

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

介紹

Flexbox，也稱爲靈活盒模塊，是兩個現代佈局系統之一，還有CSS Grid。與CSS Grid（二維）相比，flexbox是一維佈局模型。它將基於行或列控制佈局，但不能同時控制佈局。flexbox的主要目標是容許項目填充其容器提供的整個空間，具體取決於您設置的一些規則。Flexbox不兼容IE10如下，IE10如下可使用以下方式：

• Table layouts
• Floats
• clearfix hacks
• display: table hacks

兼容性

IE10如下不兼容，一些瀏覽器須要使用-webkit或者display:-webkit-box兼容處理。

使用flexbox

display:flexbox

或者

display:inline-flexbox

容器屬性

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

行對齊或者列對齊

flex-direction決定容器以行對齊仍是列對齊。

• flex-direction:row，行對齊，從左到右
• flex-direction:row-reverse，行對齊，從右到左
• flex-direction:column，列對齊，從上到下
• flex-direction:column-reverse，列對齊，從下到上

以下圖所示：

水平對齊或者垂直對齊

flex-direction默認是row，從左向右，當其屬性值爲column時，是從上到下，可使用justify-content和align-items改變水平和垂直對齊。

改變水平對齊方式

justify-content有5個屬性值：

1. flex-start 左對齊
2. flex-end 右對齊
3. center 居中對齊
4. space-between 首尾對齊容器左右側，中間間距相等
5. space-around 每一個元素的間距相等

改變垂直對齊方式

align-items有5個屬性值：

1. flex-start 頂部對齊
2. flex-end 底部對齊
3. center 居中對齊
4. baseline 基線對齊
5. stretch 拉伸以適應容器

關於align-items:baseline，能夠看看codepen：https://codepen.io/flaviocopes/pen/oExoJR

換行

默認狀況下，flexbox容器中的項目保留在一行中，縮小它們以適合容器。

可使用flex-wrap:wrap或者flex-wrap:wrap-reverse對容器中的元素進行換行處理。

一種簡寫方式：flex-flow:row wrap;即flex-direction:row && flex-wrap:wrap

適用於flexbox容器內每一個元素的屬性

1. order
2. align-self
3. flex-grow
4. flex-shrink
5. flex-basis
6. flex

order-改變元素的順序，以下圖所示，能夠指定某個元素的order值，以改變其位置，默認值爲0

align-self-元素使用align-self覆蓋容器的align-items對當前元素的對齊方式

flex-grow || flex-shrink 若有必要，能夠增長或縮小某個元素

flex-grow：默認值爲0，當某個元素flex-grow爲1，另外一個爲2，則爲flex-grow：2的元素佔用flex-grow:1的空間的2倍。

flex-shrink：默認值爲1，若是沒有顯示定義該屬性，將會自動按照默認值1在全部因子相加以後計算比率來進行空間收縮。

好比：有這麼一個容器，div>.box13+.box22父容器定義寬度爲500px，子元素定義寬度爲120px，box1的flex-shrink爲1，.box2的flex-shrink爲2，那麼子項相加以後即爲 600 px，超出父容器 100px。那麼超出的 100px 須要被 A、B、C、D、E 消化 經過收縮因子，因此加權綜合可得 1001+1001+1001+1002+100*2=700px。

因而咱們能夠計算 A、B、C、D、E 將被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即約等於14px
B 被移除溢出量：(100*1/700)*100，即約等於14px
C 被移除溢出量：(100*1/700)*100，即約等於14px
D 被移除溢出量：(100*2/700)*100，即約等於28px
E 被移除溢出量：(100*2/700)*100，即約等於28px

最後A、B、C、D、E的實際寬度分別爲：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px

flex-basis-用於設置或檢索彈性盒伸縮基準值，默認值爲auto，其與width的區別能夠參考這篇文章：https://www.jianshu.com/p/17b...

flex：有三個屬性值

1. flex-grow
2. flex-shrink
3. flex-basis

flex: 0 1 auto
分別對應flex-grow、flex-shrink、flex-basis

結尾

友情獻上小遊戲，經過遊戲學習flexbox

http://flexboxfroggy.com/#zh-cn