flex佈局（彈性佈局）

• flexible Box
• flex容器：使用display ，flex就是flex容器
• 預設主軸方向排列：row

flex容器的屬性

1. display屬性

• 作用：指定flex屬性
• 取值：flex | inline-flex
• flex： 將物件作為彈性伸縮盒展示，相當於塊級元素，預設寬度100% ---> display:block
• inline-flex：將物件作為內聯塊級彈性伸縮盒展示，即行級元素，沒有預設寬度 --> display:inline-block

　　2. flex-direction屬性

• 作用：指定容器的主軸方向，預設為水平向右方向，專案排列的方向
• 取值：row | row-reverse | column | column | column-reverse
• row: 預設值，水平向右
• row-reverse：水平向左
• column ：垂直向上
• column-reverse ：水平向下

3.flex-wrap屬性

• 作用：描述如果一個軸線排列不下，如何換行
• 取值：nowrap | wrap | wrap-reverse
• nowrap : 預設不換行
• wrap：換行，第一行在上方
• wrap-reverse：換行，第一行在下方

4.flex-flow

• 作用: 是flex-direction和flex-wrap合併縮寫的形式
• 取值：flex-direction | flex-wrap
• 例如：

.container{
  flex-flow: row wrap ; // 水平向右 ，換行  
}

// 等於

.container{
  flex-direction:row;
  flex-wrap:wrap;       
}

5.justify-content 屬性

• 作用：定義在主軸上的對齊方式
• 取值：flex-start | flex-end | center | space-between | space-around
• flex-start: 預設是從主軸結束的位置對齊
• flex-end：預設是從主軸結束位置對齊
• center 居中對齊，專案形成的總寬度一樣
• space-between ： 兩端對齊，中間的間隔寬度一樣
• space-around ：所有專案的兩端間隔相等，主軸兩端會留邊

6.align-items屬性

• 作用：定義交叉軸上的堆砌方式
• 取值：flex-start | flex-end | center | baseline | stretch
• flex-start : 交叉軸的開始位置對齊
• flex-end ： 交叉軸的結束位置開始對齊
• center ：交叉軸居中
• baseline ：基線對齊，文字第一行對齊
• stretch ：預設值，如果專案為設定高度或設定為auto，將佔滿整個容器

7.align-content

• 作用：定義了交叉軸線上的對齊方式
• 說明: 如果只有一個軸線（一行），改屬性不起作用，wrap換了行才起作用
• 取值：flex-start | flex-end | center | space-between | space-around
• flex-start: 所用軸線都從頭開始，交叉軸開始位置開始，主軸橫軸的話就是，上對齊
• flex-end：從尾開始，交叉軸結束位置開始
• center ： 所用從中間開始
• space-between ：多條軸線上下兩端對齊
• space-around ： 多條軸線上下兩端分散對齊，上下兩側留白
• stretch ：預設，高度自動拉伸

本文來自部落格園，作者：qiaoerwa，轉載請註明原文連結：https://www.cnblogs.com/qiaoerwa/p/15412771.html