### 1.容器與項目  ### 2.定義flex屬性 ``` flex-direction:row; 橫向排(默認) flex-direction:column; 縱向排 flex-wrap:wrap; 換行 flex-wrap:nowrap不換行 簡寫 flex-flow:column 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; 元素之間對齊 ```