flex 彈性佈局的基本操作

1.容器與專案

2.定義flex屬性

flex-direction:row; 橫向排(預設)
flex-direction:colum; 縱向排

flex-wrap:wrap; 換行
flex-wrap:nowrap不換行

簡寫
flex-flow:colum nowrap; 主軸垂直 不換行   row wrap 主軸水平 自動換行

3.定義專案在主軸的操作方式

justify-content:flex-start; 起始方向對其
justify-content:flex-end; 結束方向對齊
justify-content:center; 結束方向對齊
justify-content:space-between; 兩端對齊
justify-content:space-around; 元素之間對齊
justify-content:space-evenly; 平均對齊

4.容器與專案的屬性

flex 專案屬性
flex 是上面三個屬性的簡化縮寫: flex: flex-grow flex-shrink flex-basis
align-self 單獨自定義某個專案在交叉軸上的對齊方式
order 自定義專案在主軸上的排列順序,預設為 0,書寫順序,值越小位置越靠前
flex 容器屬性
flex-flow 簡化 flex-direction, flex-wrap 屬性
justify-content 設定 flex 專案在主軸上對齊方式
align-items 設定 flex 專案在交叉軸上對齊方式
align-content 多行容器中,專案在交叉軸上的對齊方式

5.多軸對齊方式 （如果專案只有一根軸線 該屬性不起作用）

align-content:flex-start; 起始方向對其
align-content:flex-end; 結束方向對齊
align-content:center; 結束方向對齊
align-content:space-between; 兩端對齊
align-content:flex-around; 元素之間對齊

本作品採用《CC 協議》，轉載必須註明作者和本文連結