深入理解Flex布局

发布时间：2023-05-20

一、基本概念

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，其余属性含义请见上文。

推荐文章