CSS3彈性盒子
彈性盒模型的一些知識
一、簡單介紹
彈性盒模型（ Flexible Box或FlexBox）是一個CSS3新增佈局模組，官方稱為CSS Flexible Box Layout Module，用於實現容器裡專案的對齊、方向、排序（即使在專案大小位置、動態生成的情況）, 分配空白空間 。彈性盒模型最大的特性在於，能夠動態修改子元素的寬度和高度，以滿足在不同尺寸螢幕下的恰當佈局。
二、基本知識
彈性盒子是由彈性容器（flex container）和彈性子元素（flex item）組成，彈性盒子有一個主軸（main axis）和一個縱軸（cross axis），彈性子元素沿著主軸依次排列 ，側軸垂直於主軸。彈性容器的主軸開始（main start）、主軸結束（main end）和側軸開始（cross start）、側軸結束（cross end）代表了彈性子元素排列的起始和結束位置。具體可以看下面的圖。
三、屬性分類
1. 彈性容器的相關屬性
| 屬性 | 屬性說明 |
|---|---|
| flex-direction | 設定主軸方向，確定彈性子元素的排列方式 |
| flex-wrap | 當彈性子元素超出彈性容器範圍時是否換行 |
| flex-flow | flex-direction和flex-wrap的快捷方式，複合屬性 |
| justify-content | 設定彈性子元素主軸上的對齊方式 |
| align-items | 設定彈性子元素側軸上的對齊方式 |
| align-content | 側軸上有空白時且有多行時，設定彈性子元素側軸的對齊方式 |
a. flex-direction屬性
使用方法：
flex-direction:row |row-reverse |column |column-reverse
| 屬性值 | 含義 |
|---|---|
| row（預設值） | 主軸為水平方向。排序方向與頁面的文件順序相同。如果文件順序是ltr，則排列順序是從左到右；如果文件順序是rtl，則排列順序是從右到左。 |
| row-reverse | 主軸為水平方向。排序方向與頁面的文件順序相反。 |
| column | 主軸為垂直方向。排列順序為從上到下 |
| column-reverse | 主軸為垂直方向。排列順序為從下到上 |
其屬性的效果圖如下：
b. flex-wrap屬性
使用方法：flex-wrap: nowrap | wrap | wrap-reverse
| 屬性值 | 含義 |
|---|---|
| nowrap（預設值） | 溢位時不換行 |
| wrap | 溢位時自動換行 |
| wrap-reverse | 溢位時自動換行，翻轉排列 |
其效果圖如下：
c. flex-flow屬性
使用方法：flex-flow: [flex-direction] || [flex-wrap]
含義：複合屬性（flex-direction和flex-wrap），設定彈性子元素的排列方式
d. justify-content屬性
使用方法：justify-content: flex-start | flex-end | center | space-between | space-around
| 屬性值 | 含義 |
|---|---|
| flex-start（預設值） | 主軸開始對齊，主軸為橫軸，ltr環境下，左對齊 |
| flex-end | 主軸結束對齊，主軸為橫軸，ltr環境下，右對齊 |
| center | 居中對齊 |
| space-between | 第一個、最後一個對齊彈性容器的邊緣，其餘均勻分佈 |
| space-around | 全部均勻分佈 |
其效果圖如下：
e. align-items屬性
使用方法：align-items: flex-start | flex-end | center | baseline | stretch
| 屬性值 | 含義 |
|---|---|
| flex-start | 側軸開始對齊，主軸為橫軸，頂對齊 |
| flex-end | 側軸結束對齊 |
| center | 居中對齊 |
| baseline | 基線對齊 |
| stretch（預設值） | 從側軸開始到側軸結束鋪滿整個側軸 |
其效果圖如下：
f. align-content屬性
使用方法：align-content: flex-start | flex-end | center | space-between | space-around | stretch
| 屬性值 | 含義 |
|---|---|
| flex-start | 主軸開始對齊，主軸為橫軸，ltr環境下，左對齊 |
| flex-end | 主軸結束對齊，主軸為橫軸，ltr環境下，右對齊 |
| center | 居中對齊 |
| space-between | 第一個、最後一個對齊彈性容器的邊緣，其餘均勻分佈 |
| space-around | 全部均勻分佈 |
| stretch（預設值） | 各行伸展以佔用剩餘空間。如果剩餘空間是負數，該值等效於flex-start |
其效果圖如下：
2. 彈性子元素的相關屬性
| 屬性值 | 含義 |
|---|---|
| order | 控制彈性容器裡子元素的順序，數值小的排在前面，可以為負值 |
| flex-grow | 設定彈性子元素的擴充套件比率 |
| flex-shrink | 設定彈性子元素的收縮比率 |
| flex-basis | 指定彈性子元素伸縮前的預設大小值，相當於width和height屬性 |
| flex | flex-grow，flex-shrink和flex-basis屬性的複合屬性 |
| align-self | 允許獨立的彈性子元素覆蓋彈性容器的預設對齊設定（align-items） |
a. order屬性
使用方法：order: integer number
其屬性效果圖如下：
b. flex-grow屬性
使用方法：flex-grow: number
含義：設定彈性子元素的擴充套件比率，不允許為負值，預設值為0。根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間。
其屬性效果圖如下：
c. flex-shrink屬性
使用方法：flex-shrink: number
含義：設定彈性子元素的收縮比率，不允許為負值，預設值為1。根據彈性盒子元素所設定的擴充套件因子作為比率來收縮空間。
其屬性效果圖如下：
d. flex-basis屬性
使用方法：flex-basis: <length> | <percentage> | auto
含義：設定彈性子元素的伸縮基準值，不允許為負值。預設值為auto，無特定寬度（高度）。
e. flex屬性
使用方法：flex: none | [flex-grow] || [flex-shrink] || [flex-basis
含義：複合屬性，設定彈性子元素的如何分配空間
f. align-self屬性
使用方法：auto | flex-start | flex-end | center | baseline | stretch
含義：設定彈性子元素的在側軸上的對齊方式，與align-items相同。設定某個彈性子元素的對立對齊方式。
其屬性效果圖如下：
3. 多列屬性詳解
1）基礎知識
多列（Multi-column）是一個CSS3新增佈局模組，官方稱為Multiple column layout，可以比較輕鬆的實現多列布局，比如圖片瀑布流。
2）屬性一覽
| 屬性 | 屬性說明 |
|---|---|
| columns | 複合屬性（column-width和column-count），設定寬度和列數 |
| column-width | 設定每列的寬度 |
| column-count | 設定列數 |
| column-gap | 設定列之間的間隙 |
| column-rule | 複合屬性（column-rule-width、column-rule-style和column-rule-color），設定列之間的邊框樣式 |
| column-fill | 設定列的高度是否統一 |
| column-span | 設定是否橫跨所有列 |
a. column-width屬性
使用方法：column-width: length | auto
| 屬性值 | 含義 |
|---|---|
| auto（預設值） | 瀏覽器決定列的寬度 |
| length | 用長度值來定義列寬。不允許負值 |
b. column-count屬性
使用方法： column-count: integer number | auto
| 屬性值 | 含義 |
|---|---|
| auto（預設值） | 列數將取決於其他屬性，例如："column-width" |
| imteger number | 用整數值來定義列數，列的最佳數目將其中的元素的內容無法流出。 |
c. columns屬性
使用方法：columns: [column-width]｜[column-count]
含義：複合屬性設定列的寬度和個數
d. column-gap屬性
使用方法：column-gap: length | normal
| 屬性值 | 含義 |
|---|---|
| normal（預設值） | 與font-size大小相同。假設該物件的font-size為16px，則normal的值為16px，以此類推。 |
| length | 用長度來定義列與列之間的間隙。不允許為負值。 |
e. column-rule屬性
使用方法：column-rule: [column-rule-width] || [column-rule-style] || [column-rule-color]
含義：設定列與列之間的邊框，和border屬性相似
| 屬性值 | 含義 |
|---|---|
| column-rule-width | 設定列與列之間的邊框的厚度 |
| column-rule-style | 設定列與列之間的邊框的樣式 |
| column-rule-color | 設定列與列之間的邊框的顏色 |
f. column-fill屬性
使用方法：column-fill: auto | balance
含義：設定所有列的高度是否統一
| 屬性值 | 含義 |
|---|---|
| auto（預設值） | 列高度自適應內容 |
| balance | 所有列的高度以其中最高的一列統一 |
g. column-span屬性
使用方法：column-span: none | all
含義：物件元素是否橫跨所有列
| 屬性值 | 含義 |
|---|---|
| none（預設值） | 不跨列 |
| all | 橫跨所有列 |
CSS3彈性盒子的基本知識就是這些了，如果有錯的話，我會及時更改的！這篇文章就到此結束了，