筆記來源：尚矽谷Web前端HTML5&CSS3初學者零基礎入門全套完整版

• 彈性盒簡介
  • 1、基本概念
    • 彈性盒
    • 彈性容器
    • 彈性元素
  • 2、彈性容器的屬性
    • 主軸屬性
      • 排列方式
      • 自動換行
      • 空白空間
    • 輔軸屬性
      • 輔軸對齊
      • 空白空間
    • 彈性居中
  • 3、彈性元素的屬性
    • 伸展係數
    • 縮減係數
    • 基礎長度
    • 排列順序
    • 覆蓋輔軸

彈性盒簡介

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;
}