Flexbox Guide

Tomato_CN發表於2018-10-22
FlexGUIIDE

Flexbox

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

相容性

image

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，列對齊，從下到上

如下圖所示：

image

水平對齊或者垂直對齊

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

image

改變水平對齊方式

justify-content有5個屬性值：

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

image

改變垂直對齊方式

align-items有5個屬性值：

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

image

關於align-items:baseline，可以看看codepen：codepen.io/flaviocopes…

換行

預設情況下，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

image

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

image

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的區別可以參考這篇文章：www.jianshu.com/p/17b1b445e…

flex：有三個屬性值

  1. flex-grow
  2. flex-shrink
  3. flex-basis
flex: 0 1 auto
分別對應flex-grow、flex-shrink、flex-basis
複製程式碼

結尾

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

flexboxfroggy.com/#zh-cn

相關文章