彈性盒簡介

1、基本概念

彈性盒

flex（彈性盒、伸縮盒）

• 是css中的又一種佈局手段，它主要用來代替浮動來完成頁面的佈局
• flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變

彈性容器

要使用彈性盒，必須先將一個元素設定為彈性容器

我們通過display 來設定彈性容器

• display:flex 設定為塊級彈性容器
• display:inline-flex 設定為行內的彈性容器

/* 設定彈性容器 */
display: flex;

彈性元素

彈性容器的子元素是彈性元素（彈性項）

彈性元素可以同時是彈性容器

2、彈性容器的屬性

主軸與側軸

• 主軸：彈性元素的排列方向稱為主軸
• 側軸：與主軸垂直方向的稱為側軸

主軸屬性

排列方式

flex-direction 指定容器中彈性元素的排列方式

• row預設值，彈性元素在容器中水平排列（自左向右）
• row-reverse 彈性元素在容器中反向水平排列（自右向左）
• column 彈性元素縱向排列（自上向下）
• column-reverse 彈性元素反向縱向排列（自下向上）

/* 設定彈性元素排列方式 */
flex-direction: column;

自動換行

flex-wrap 設定彈性元素是否在彈性容器中自動換行

• nowrap 預設值，元素不會自動換行
• wrap 元素沿著輔軸方向自動換行

/* 設定彈性元素排列方式 */
flex-direction: row;
/* 設定自動換行 */
flex-wrap: wrap;
 

簡寫屬性

flex-flow 是wrap和direction的簡寫屬性

/* 簡寫屬性 */
flex-flow: row wrap;

空白空間

justify-content 如何分配主軸上的空白空間（主軸上的元素如何排列）

• flex-start 元素沿著主軸起邊排列

• flex-end 元素沿著主軸終邊排列

• center 元素居中排列

• space-around 空白分佈到元素兩側

• space-between 空白均勻分佈到元素間

• space-evenly 空白分佈到元素的單側

輔軸屬性

輔軸對齊

align-items元素在輔軸上如何對齊

• stretch

   預設值，將元素的長度設定為相同的值

• flex-start 元素不會拉伸，沿著輔軸起邊對齊

• flex-end 沿著輔軸的終邊對齊

• center 居中對齊

• baseline 基線對齊

空白空間

align-content 如何分配輔軸上的空白空間（輔軸上的元素如何排列）

• flex-start 元素沿著輔軸起邊排列

• flex-end 元素沿著輔軸終邊排列

• center 元素居中排列

• space-around 空白分佈到元素兩側

• space-between 空白均勻分佈到元素間

• space-evenly 空白分佈到元素的單側

彈性居中

利用彈性盒對元素進行水平垂直雙方向居中

justify-content: center;
align-items: center;

3、彈性元素的屬性

伸展係數

flex-grow 指定彈性元素的伸展係數，預設值為 0

• 當父元素有多餘空間的時，子元素如何伸展
• 父元素的剩餘空間，會按照比例進行分配

li:nth-child(1) {
  background-color: #bfa;
  flex-grow: 1;
}

li:nth-child(2) {
  background-color: red;
  flex-grow: 2;
}

li:nth-child(3) {
  background-color: green;
  flex-grow: 3;
}

縮減係數

flex-shrink 指定彈性元素的收縮係數，預設值為 1

• 當父元素中的空間不足以容納所有的子元素時，如何對子元素進行收縮
• 縮減係數的計算方式比較複雜，縮減多少是根據 縮減係數 和 元素大小 來計算

li:nth-child(1) {
  background-color: #bfa;
  flex-shrink: 1;
}

li:nth-child(2) {
  background-color: red;
  flex-shrink: 2;
}

li:nth-child(3) {
  background-color: green;
  flex-shrink: 3;
}

基礎長度

flex-basis 指定的是元素在主軸上的基礎長度

• 如果主軸是橫向的，則該值指定的就是元素的寬度
• 如果主軸是縱向的，則該值指定的就是元素的高度
• 預設值是auto，表示參考元素自身的高度或寬度
• 如果傳遞了一個具體的數值，則以該值為準

li:nth-child(1) {
  background-color: #bfa;
  flex-basis: 200px;
}

簡寫屬性

flex可以設定彈性元素所有的三個樣式 flex: 增長 縮減 基礎

• initial：flex: 0 1 auto
• auto：flex: 1 1 auto
• none：flex: 0 0 auto 彈性元素沒有彈性

排列順序

order 決定彈性元素的排列順序

li:nth-child(1) {
  background-color: #bfa;
  order: 2;
}

li:nth-child(2) {
  background-color: red;
  order: 3;
}

li:nth-child(3) {
  background-color: green;
  order: 1;
}

覆蓋輔軸

align-self 用來覆蓋當前彈性元素上的align-items

li:nth-child(1) {
  background-color: #bfa;
  align-self: flex-end;
}