CSS3佈局神器 - Flexbox

zhongjiaming發表於2018-03-20
CSSS3Flex

display:flex是CSS3的新特性，是一個強大的佈局神器。
在傳統的佈局中，通常使用浮動float、position，雖然能很好進行佈局，但自從接觸flex後，對前端的佈局來說簡直就是一種解放。

flex相容性
上圖為 flex在各瀏覽器和裝置上的相容性問題，可見除了IE瀏覽器外基本都支援了這一特性。不過即使這樣也不用擔心，還記得postcss的autoprefixer外掛嗎？結合webpack即可解決相容問題。

使用flex只需在父元素上定義display:flex,然後子級的所有元素都具有了flex功能。
index.html

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>
</div>
複製程式碼

index.css

.box { display:flex; }
.box-item { margin:5px; width:100px; height:100px; background:red; }
複製程式碼

現在.box以及子元素都具備了flex特性，可以通過相應特性進行個性化佈局，接下來將逐一介紹每一個特性。

flex術語圖示

flex圖示

flex的兩根軸

主軸水平方向
交叉軸垂直於主軸

這些屬性應用在父級元素上

flex-direction

row 設定主軸為水平（預設從左到右）
row-reverse 設定主軸為水平（從右到左）
column 設定主軸為垂直（預設從上到下）
column-reverse 設定主軸為垂直（從下到上）

flex-wrap

nowrap 不自動換行（預設）
wrap 自動換行
wrap-reverse 從下到上開始換行

flex-flow

是flex-direction和flex-wrap的簡寫屬性

justify-content

控制主軸的對齊方式
flex-start 左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊
space-around 使專案之間的間隔相等

align-items

控制單行交叉軸的對齊方式
flex-start 左對齊
flex-end 右對齊
center 居中 baseline 基線對齊
stretch 預設撐滿整個容器高度

align-content

控制 多行交叉軸的對齊方式
flex-start 左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊
space-around 使專案之間的間隔相等

注意：如果垂直方向沒有設定高度，那麼align-items和align-content會失效

下面的幾個屬性是用於單個專案裡面

align-self

覆蓋align-items而在單獨專案生效例子：align-self:flex-start;

order

改變專案位置，數值越小越靠前，可以是負數 例子：order:-1;

flex-grow

設定放大比例（無單位）例子：flex-grow:2;

flex-shrink

設定當空間不足時的收縮比例（無單位）例子：flex-shrink:2;

flex-basis

設定初始大小（有單位） 例子：flex-basis:20%;

flex

是flex-grow、flex-shrink、flex-basis的簡寫屬性

  • 單值（選其中之一）
    一個無單位數(): 它會被當作flex-grow的值。
    一個有效的寬度(width)值: 它會被當作 flex-basis的值。
    關鍵字none, auto,或initial.
    例子：flex:auto;
  • 雙值
    第一個值必須為flex-grow。
    第二個值可以是flex-shrink或者flex-basis

例子：flex:2 2;

  • 三值
    flex-grow>
    flex-shrink>
    flex-basis>
    例子：flex:1 1 auto

參考文件

相關文章