如何使用Flexbox实现指定布局？附对应的HTML容器结构

别慌！Flexbox其实是个很直观的布局工具，咱一步步来，很快就能搞定你的需求。首先你已经有了基础的HTML结构，接下来只需要给容器加几行CSS，就能轻松控制这些.item的排列方式了。

首先给你的.container设置display: flex——这是启用Flexbox的核心开关，设置之后，里面的.item就会自动变成Flex项目，默认在同一行排列。

.container {
  display: flex; /* 开启Flexbox布局 */
}

默认情况下，项目会挤在容器左侧，你可以用justify-content属性调整它们的水平分布，常用的取值有这些：

• justify-content: flex-start（默认）：所有项目靠左对齐
• justify-content: center：项目整体水平居中
• justify-content: space-between：两端对齐，项目之间的间距完全相等
• justify-content: space-around：每个项目左右的间距相等，整体看起来均匀分布
• justify-content: space-evenly：容器边缘到项目、项目之间的所有间距都相等

比如想让项目在容器里水平居中，就这么写：

.container {
  display: flex;
  justify-content: center; /* 水平居中排列 */
}

如果你的容器有固定高度，还可以用align-items调整项目的垂直对齐方式：

• align-items: stretch（默认）：项目自动拉伸，填满容器的垂直高度
• align-items: center：项目在容器里垂直居中
• align-items: flex-start：项目靠容器顶部对齐
• align-items: flex-end：项目靠容器底部对齐

举个例子，给容器设个高度，让项目垂直居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
  height: 300px; /* 给容器一个固定高度，才能看到垂直效果 */
  border: 1px solid #ccc; /* 加个边框，方便看清容器范围 */
}

如果.item的总宽度超过容器宽度，默认会挤在一起缩小尺寸。想让它们自动换行的话，加上flex-wrap: wrap就行，还能用gap给项目之间加统一的间距：

.container {
  display: flex;
  flex-wrap: wrap; /* 屏幕空间不足时自动换行 */
  gap: 15px; /* 项目之间的间距，比margin更省心 */
}

给.item加个基础样式，方便你直观看到效果：

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

.container {
  display: flex;
  justify-content: space-around; /* 水平均匀分布 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 窄屏自动换行 */
  gap: 15px; /* 项目间距 */
  padding: 20px;
  border: 1px solid #eee;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  color: white;
  display: flex; /* 让item内部的文字也居中 */
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

• gap是Flexbox专门用来设置项目间距的属性，比给每个.item加margin更省心，不会出现容器边缘的额外间距问题
• 如果想让某个特定的.item占更多空间，可以给它加flex: 1，它会自动填充容器的剩余空间
• 用flex-direction: column可以把默认的水平排列改成垂直排列，适合做移动端的列表布局

你可以试着修改上面的属性值，看看不同的布局效果，很快就能掌握Flexbox的用法啦！

内容的提问来源于stack exchange，提问作者Jordi Holleman