前面瞭解過響應式佈局基礎 ,本篇及後續文章主要了解響應式佈局方式 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-startcenterflex-endspace-between 兩端對齊,第一行放起點,最後一行放終點,其他行保持間距相等space-around 元素被空間環繞,所有行的間距都相等,起點和終點的距離元素間距是行間距的一半示例:
6. justify-content
所有子元素沿主軸的排列方式(單行多行都可)
flex-start 默認值centerflex-endspace-betweenspace-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