一、Flexbox基本不雅點
Flexbox（彈性盒子規劃）是CSS3中的一種規劃模型，它供給了一種愈加機動跟高效的方法來規劃、對齊跟分配容器內元素的寬度、高度以及次序。Flexbox規劃重要包含兩個核心不雅點：彈性容器（Flex Container）跟彈性項目（Flex Item）。
- 彈性容器：被設置為
display: flex或display: inline-flex的元素，它包含了一組彈性項目，並決定了它們的陳列方法。 - 彈性項目：彈性容器內的每個子元素都被稱為彈性項目，它們會按照一定規矩在容器內停止陳列跟對齊。
二、創建彈性容器
要創建一個彈性容器，只有將以下代碼增加到CSS中：
.container {
display: flex;
}
這行代碼將創建一個類名為.container的元素，並將其標記為彈性容器。此時，該容器內的全部直接子元素都將成為彈性項目。
三、容器屬性詳解
彈性容器存在一些重要的屬性，可能經由過程設置這些屬性來把持彈性項目標陳列跟對齊方法。
1. flex-direction
flex-direction屬性決定了彈性項目標陳列偏向，可能是程度或垂直偏向。罕見取值有：
row（默許值，程度偏向）row-reverse（程度反向偏向）column（垂直偏向）column-reverse（垂直反向偏向）
2. justify-content
justify-content屬性決定了彈性項目在彈性容器中的程度對齊方法。罕見取值有：
flex-start（肇端對齊）flex-end（結束對齊）center（居中對齊）space-between（兩頭對齊，項目之間的間隔都相稱）space-around（每個項目兩側的間隔相稱。所以，項目之間的間隔是項目與邊沿間隔的兩倍）space-evenly（項目之間的間隔都相稱）
3. align-items
align-items屬性決定了彈性項目在彈性容器中的垂直對齊方法。罕見取值有：
flex-start（肇端對齊）flex-end（結束對齊）center（居中對齊）stretch（假如項目未設置高度或設為auto，將佔滿全部容器的高度）
四、項目屬性詳解
彈性項目也存在一些屬性，可能經由過程設置這些屬性來調劑它們在規劃中的地位跟大小。
1. order
order屬性定義了項目標陳列次序。數值越小，陳列越靠前。
2. flex-grow
flex-grow屬性定義了項目標縮小比例，默許值為0，即假如存在剩餘空間，也不縮小。可能設置一個正整數，表示剩餘空間縮小比例。
3. flex-shrink
flex-shrink屬性定義了項目標縮小比例，默許值為1，即假如空間缺乏，項目將縮小。可能設置一個負整數，表示縮小比例。
4. flex-basis
flex-basis屬性定義了項目標初始大小。默許值為auto，即項目標本來大小。
五、實戰技能
1. 程度垂直居中
在Flexbox規劃中，實現程度垂直居中非常簡單。只有在Flex容器上設置justify-content跟align-items的值為center即可。
.container {
display: flex;
justify-content: center;
align-items: center;
}
2. 等寬列規劃
在Flexbox規劃中，實現等寬列規劃非常簡單。只有將彈性項目標flex-grow屬性設置為1即可。
.item {
flex-grow: 1;
}
3. 呼應式規劃
在Flexbox規劃中，實現呼應式規劃非常簡單。只有利用媒體查詢來調劑彈性容器的屬性即可。
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
六、總結
Flexbox規劃是現代前端開辟中弗成或缺的一部分，它供給了富強的規劃才能，使得網頁規劃變得愈加簡單直不雅。經由過程本文的介紹，信賴你曾經控制了Flexbox的基本不雅點、關鍵屬性以及實戰技能。在現實開辟中，多加練習跟現實，你將可能更好地應用Flexbox規劃，打造出愈加美不雅跟實用的網頁。