前面瞭解過響應式佈局基礎 ，本篇及後續文章主要了解響應式佈局方式 flex grid 等。

如有錯誤，還請指正，謝謝~

flex 概念

flex只是css3的一個屬性 ，flex又稱‘彈性佈局’，它使得盒子的子元素可以自動排列

{　display:flex;}

經典的flex模型圖：

說明：

• 主軸不一定是橫向的，它和側軸垂直，由 flex-direction 屬性決定
• flex item 不指定高度時，等於父元素的高度（換行則比例平分）

flex-container 相關屬性

display:flex / inline-flex 都是flex佈局， inline類似 inline-block ，盒子被加入了inline模型特性

1. flex-direction

flex-direction 決定了主軸和主軸方向，子元素順著主軸的方向依次排列

• row 默認值，主軸水平向右（元素水平向右排列）
• column 主軸垂直向下（元素垂直向下排列）
• row-reverse 水平反向（向左）
• column-reverse 垂直反向（向上）

注：主要是row和column

示例：(全寫成了id，忽略...)

2. flex-wrap

此屬性指定子元素是否換行

• nowrap 默認，不換行，如果子元素總長度大於父元素則等比壓縮
• wrap 換行，排不下的元素換行沿側軸排列 ，如果高度不夠則會超出
• wrap-reverse 側軸反向

注：側軸其他操作，優先執行wrap

3. flex-flow

flex-flow:'direction' 'wrap' 是 flex-direction 和 flex-direction 的組合，方便簡寫，類似 background

4. align-items

側軸有長度時，每個子元素沿側軸的排列方式

• strech 默認值，不排列，高度自適應父元素
• flex-start 子元素沿側軸起始點排列
• center 中心點
• flex-end 終點
• baseline 根據第一個子元素的基線（content） 排列

示例：

5. align-content

側軸有長度時，所有子元素沿側軸的排列方式，

• strech 默認值，不排列，高度比例平分父元素
• flex-start
• center
• flex-end
• space-between 兩端對齊，第一行放起點，最後一行放終點，其他行保持間距相等
• space-around 元素被空間環繞，所有行的間距都相等，起點和終點的距離元素間距是行間距的一半

示例：

6. justify-content

所有子元素沿主軸的排列方式（單行多行都可）

• flex-start 默認值
• center
• flex-end
• space-between
• space-around

示例：

flex-item 相關屬性

1. order

order:num 用來指定子元素的順序，默認0，值大的排在後面，也可以是負數

2. flex-grow

flex-grow:num 用來指定擴展分配比例，所有子元素長度小於父元素長度時，添加此屬性的子元素，會按比例來分配剩餘的寬度

3. flex-shrink

flex-shrink:num 在未指定wrap時，用來指定壓縮比例（減去 壓縮的總長度百分比）

4. flex-basis

flex-basis:px 類似grow，分配剩餘長度（像素），總和大於剩餘寬度時，按比例分配

5. align-self

align-self:xx 指定元素自身的排列方式，優先級高於 align-items，值類似

本篇文章就到這裡，下篇舉例flex的應用

【關注一下不迷路】

html css html css javascript html javascript css javascript css

閱讀更多 全棧前端 的文章

關鍵字: 編程語言 JavaScript HTML