技術標籤：CSScss

文章目錄

• Flex佈局學習筆記
• • 使用範圍
  • 基本概念
  • 容器的屬性
  • 專案的屬性

Flex佈局學習筆記

學習內容詳見
阮一峰的網路日誌>>Flex佈局教程：語法篇

使用範圍

設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。

1. 任何一個容器 都可以指定為 Flex 佈局。

.box{ 
 display: flex;
}

2. 行內元素 也可以使用 Flex 佈局。

 .box{
  display: inline-flex;
}

4. Webkit 核心的瀏覽器，必須加上-webkit字首。

.box{
  display
 
: -webkit-flex; /* Safari */
  display: flex;
}

基本概念

採用 Flex 佈局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），簡稱"專案"。

容器的屬性

flex-direction設定主軸方向
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。

flex-wrap設定換行方式

flex-flow是flex-direction屬性和flex-wrap屬性的簡寫形式
預設值為row nowrap

justify-content設定專案在主軸上的對齊方式
具體對齊方式與軸的方向有關。下面假設主軸為從左到右
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
space-evenly

align-items設定專案在交叉軸上對齊方式
具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度

align-content設定多根軸線的對齊方式
若只有一根，則不起作用
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
space-evenly
stretch（預設值）：軸線佔滿整個交叉軸。

專案的屬性

order設定專案的排列順序
值越小越靠前，預設0

flex-grow設定專案放大比例
填充剩餘空間，預設0，不放大

flex-shrink設定專案縮小比例
以應對空間不足，預設1，縮小以免溢位
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。
如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效。

flex-basis設定分配多餘空間之前專案佔據的主軸空間（main size）
預設auto，即專案大小
可以設為跟width或height屬性一樣的值，則專案將佔據固定空間

flex是flex-grow, flex-shrink 和 flex-basis的簡寫
預設值為0 1 auto
兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)

align-self設定單個專案的對齊方式
可覆蓋align-items，預設0（繼承父元素的align-items，無父元素則為stretch）
可能取6個值，除了auto，其他都與align-items屬性完全一致