前面瞭解過響應式佈局基礎 ,本篇及後續文章主要了解響應式佈局方式 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
側軸有長度時,所有子元素沿側軸的排列方式,
只適用於多行的情況(wrap)- 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
閱讀更多 全棧前端 的文章
關鍵字: HTML FLOW JavaScript