深入理解Flex布局

一、基本概念

Flex布局（即Flexible Box布局模型）是一種伸縮型的盒子布局模型，可以靈活地實現元素的對齊、排列等功能，是CSS3新增的一種布局模型，旨在解決當今Web應用程序開發中的常見布局問題。

Flex布局的核心概念包括伸縮容器（flex container）、伸縮項目（flex item）、主軸/交叉軸（main axis/cross axis）、伸縮比例（flex-grow、flex-shrink、flex-basis）、對齊方式（justify-content、align-items、align-self）等，接下來將一一進行詳細講解。

二、伸縮容器與伸縮項目

伸縮容器是由display:flex或display:inline-flex聲明的盒子元素，它包含一個伸縮項列表，支持伸縮布局模型。比如以下代碼：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
}
.flex-item {
  flex: 1;
}

以上代碼中，div.flex-container就是一個伸縮容器，其子元素div.flex-item就是伸縮項，其中flex:1表示對所有的伸縮項，都設置了相同的伸縮比例。

三、主軸和交叉軸

Flex布局中，伸縮容器會默認在水平方向（主軸）上形成一個可伸縮盒子，並在豎直方向（交叉軸）上形成一個由伸縮元素交叉排列而成的線。因此，主軸和交叉軸是對Flex布局非常重要的概念，主軸方向由flex-direction屬性決定，主軸的開始與結束由justify-content屬性決定，交叉軸方向則是垂直於主軸的方向。

四、伸縮比例

Flex布局允許我們通過flex-grow、flex-shrink、flex-basis三個屬性，來設置伸縮項的伸縮比例。其中flex-grow屬性用於控制伸縮項增加寬度的比例，如果所有的伸縮項的flex-grow值相等，則它們將均勻分配父容器的可用空間；如果某個伸縮項的flex-grow值為2，其餘伸縮項為1，則前者將增加的寬度是後者的2倍。flex-shrink屬性用於控制伸縮項縮小寬度的比例，而flex-basis屬性則用於確定伸縮項在伸縮容器中的初始大小。

五、對齊方式

Flex布局中的對齊方式有justify-content、align-items和align-self三個屬性。其中，justify-content屬性用於控制伸縮項在主軸方向上的對齊方式，取值包括flex-start（起始邊對齊）、flex-end（結束邊對齊）、center（居中對齊）、space-between（等間距排列，首項對齊起始邊，末項對齊結束邊）和space-around（等間距排列，每個伸縮項兩側留有相同的空白距離）等。align-items屬性用於控制伸縮項在交叉軸上的對齊方式，取值包括flex-start（起始邊對齊）、flex-end（結束邊對齊）、center（居中對齊）和stretch（在交叉軸上拉伸以填滿容器）。align-self屬性與align-items類似，但它只對當前伸縮項有效，可以用於單獨的對某個伸縮項進行對齊設置。

六、完整代碼

以下是一個完整的Flex布局代碼示例：

<div class="flex-container">
  <div class="flex-item flex-item-1">1</div>
  <div class="flex-item flex-item-2">2</div>
  <div class="flex-item flex-item-3">3</div>
  <div class="flex-item flex-item-4">4</div>
  <div class="flex-item flex-item-5">5</div>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 500px;
}
.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  flex-grow: 1;
  flex-shrink: 1;
}
.flex-item-1 {
  background-color: red;
  flex-grow: 2;
}
.flex-item-3 {
  background-color: green;
}
.flex-item-5 {
  background-color: blue;
  align-self: flex-end;
}

以上代碼中，伸縮容器的高度設置為500px，伸縮項的寬度和高度都設置為100px，伸縮項1的伸縮比例設置為2，3號伸縮項是默認的伸縮比例1，5號伸縮項使用align-self屬性設置自身在交叉軸上對齊方式為flex-end，其餘屬性含義請見上文。