CSS 彈性盒子 Flexbox 布局

Flexbox（彈性盒子）是 CSS3 中引入的一種強大且兼容性好的布局方法，使用 flexbox，可以很容易地處理好頁面上的元素布局，并創建可以自動縮小和放大的動態用戶界面，

flex 盒子模式

只要在一個元素的 CSS 中添加 display: flex;，就可以使用其它 flex 屬性來構建回應式頁面了，

#box-container {
  display: flex;
}

行，列 Row Culomn

給元素添加 display: flex 屬性可以讓它變成 flex 容器，然后可以讓元素的專案排列成行或列，只要給父元素添加 flex-direction 屬性，并把屬性值設定為 row 或 column，即可橫向排列或縱向排列它的所有子元素，創建一行將使子項水平對齊，創建一列將使子項垂直對齊，

flex-direction 的其他可選值還有 row-reverse 和 column-reverse，

注意： flex-direction 的默認值為 row，

#box-container {
  display: flex;
  flex-direction: row; 
  /* flex-direction: column */
}

父元素對齊 Align

子元素排列的方向被稱為 main axis（主軸），對于行，主軸水平貫穿每一個專案；對于列，主軸垂直貫穿每一個專案，

對于如何沿主軸線排放 flex 專案，有幾種選擇，很常用的一種是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列，其他選擇包括：

flex-start：從 flex 容器的起始位置開始排列專案，對行來說是把專案移至左邊，對于列是把專案移至頂部，如未設定 justify-content 的值，那么這就是默認值，
flex-end：從 flex 容器的終止位置開始排列專案，對行來說是把專案移至右邊，對于列是把專案移至底部，
space-between：專案間保留一定間距地沿主軸居中排列，第一個和最后一個專案被放置在容器邊沿，例如，在行中第一個專案會緊貼著容器左邊，最后一個專案會緊貼著容器右邊，然后其他專案均勻排布，
space-around：與space-between相似，但頭尾兩個專案不會緊貼容器邊緣，所有專案之間的空間均勻排布，
space-evenly：頭尾兩個專案不會緊貼容器邊緣，所有專案之間的空間均勻排布，

#box-container {
  justify-content: center;
}

Flex 容器中，與主軸垂直的叫做 cross axis（交叉軸），行的交叉軸是垂直的，列的交叉軸是水平的，

CSS 中的 align-items 屬性用來定義 flex 子元素沿交叉軸的對齊方式，對行來說，定義的是元素的上下對齊方式；對列來說，是定義元素的左右對齊方式，

align-items 的可選值包括：

flex-start：從 flex 容器的起始位置開始對齊專案，對行來說，把專案移至容器頂部；對列來說，是把專案移至容器左邊，
flex-end：從 flex 容器的終止位置開始對齊專案，對行來說，把專案移至容器底部；對列來說，把專案移至容器右邊，
center：把專案居中放置，對行來說，垂直居中（專案距離頂部和底部的距離相等）；對列來說，水平居中（專案距離左邊和右邊的距離相等），
stretch：拉伸專案，填滿 flex 容器，例如，排成行的專案從容器頂部拉伸到底部，如未設定align-items的值，那么這就是默認值，
baseline：沿基線對齊，基線是文本相關的概念，可以認為它是字母排列的下端基準線，

#box-container {
  align-items: center;
}

換行 Wrap

CSS flexbox 有一個把 flex 子元素拆分為多行（或多列）的特性，

默認情況下，flex 容器會調整專案大小，把它們都塞到一起，對于行來說，所有專案都會在一條直線上，

不過，使用 flex-wrap 屬性可以使專案換行展示，這意味著多出來的子元素會被移到新的行或列，換行發生的斷點由子元素和容器的大小決定，

換行方向的可選值有這些：

nowrap：默認值，不換行，
wrap：如果排列以行為基準，就將行從上往下排列；如果排列以列為基準，就將列從左往右排列，
wrap-reverse：如果排列以行為基準，就將行從下往上排列；如果排列以列為基準，就將列從右往左排列，

#box-container {
  flex-wrap: wrap;
}

收縮 Shrink

上面提到的屬性都是應用于 flex 容器（flex 子元素的父元素）的，除此之外，flex 子元素也有很多實用屬性，

首先介紹的是 flex-shrink 屬性，使用之后，如果 flex 容器太小，則子元素會自動縮小，當容器的寬度小于里面所有子元素的寬度之和時，所有子元素都會自動壓縮，

子元素的 flex-shrink 接受數值作為屬性值，數值越大，則該元素與其他元素相比會被壓縮得更厲害，比如，一個專案的 flex-shrink 屬性值為 1，另一個專案的 flex-shrink 屬性值為 3，那么后者相比前者會受到 3 倍壓縮，

#box-1 {
  flex-shrink: 1;
}
#box-2 {
  flex-shrink: 2;
}

擴大 Grow

與 flex-shrink 相對的是 flex-grow，flex-grow會在容器太大時對子元素作出調整，

如果一個專案的 flex-grow 屬性值為 1，另一個專案的 flex-grow 屬性值為 3，那么值為 3 的一個會較另一個擴大 3 倍，

#box-1 {
  flex-grow: 1;
}
#box-2 {
  flex-grow: 2;
}

初始大小 Basis

flex-basis 屬性定義了在使用 CSS 的 flex-shrink 或 flex-grow 屬性對元素進行調整前，元素的初始大小，

flex-basis 屬性的單位與其他表示尺寸的屬性的單位一致（px、em、% 等），如果值為 auto，則專案的尺寸隨內容調整，

#box-1 {
  flex-basis: 10em;
}
#box-2 {
  flex-basis: 20em;
}

簡寫 Shorthand

上面幾個 flex 屬性有一個簡寫方式， flex-grow、flex-shrink和 flex-basis 屬性可以在 flex中一并設定，

例如，flex: 1 0 10px; 會把專案屬性設為 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;，

屬性的默認設定是 flex: 0 1 auto;，

#box-1 {
  flex: 2 2 150px;
}
#box-2 {
  flex: 1 1 150px;
}

重新排列 Rearrange

order 屬性告訴 CSS flex 容器里子元素的順序，默認情況下，專案排列順序與源 HTML 檔案中順序相同，這個屬性接受數字作為引數，可以使用負數，

#box-1 {
  order: 2;
}
#box-2 {
  order: 1;
}

子元素對齊方式 Align

align-self，這個屬性允許調整單個子元素自己的對齊方式，而不會影響到全部子元素，因為 float、clear 和 vertical-align 等調整對齊方式的屬性都不能應用于 flex 子元素，所以這個屬性顯得十分有用，

align-self 可設定的值與 align-items 的一樣，并且它會覆寫 align-items 所設定的值，

#box-1 {
  align-self: center;
}
#box-2 {
  align-self: flex-end;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509167.html

標籤：Html/Css

上一篇：[通明境 · React架構]通俗地講React，優雅地理解React

下一篇：CSS Flexbox 布局