彻底解决Flex 弹性布局多行最后一行左对齐难题，成就完美网页布局

前端

2022-12-03 00:24:45

掌握Flex 弹性布局：轻松解决多行布局最后一行左对齐难题

Flex 弹性布局以其灵活性、易用性和响应式设计而闻名，让创建多列、多行的布局变得轻而易举。然而，当您在多行布局中使用 Flex 弹性布局时，您可能会遇到一个常见问题——最后一行的项目会左对齐，这可能会破坏您精心设计的布局。

多行布局的最后一行左对齐：罪魁祸首

造成最后一行项目左对齐的因素有很多，例如：

容器宽度不足
负边距
填充
文本对齐

简单有效的解决办法：对症下药

解决最后一行左对齐难题，有两种简单有效的解决办法：

方法1：调整容器宽度

如果您希望最后一行的项目居中对齐，请尝试调整容器的宽度，使其能够容纳所有项目。您可以设置容器的固定宽度或使用百分比宽度来实现这一点。

方法2：负边距技巧

另一个解决办法是使用负边距。通过在容器上设置负边距，您可以将最后一行的项目向右移动，使其与其他行对齐。这种方法简单易用，效果明显。

示例代码：代码直观明了

为了帮助您更好地理解这两种解决办法，我们提供了清晰的示例代码：

调整容器宽度

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
</div>

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

负边距技巧

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
</div>

.container {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

.container:after {
  content: "";
  flex: 1;
  margin-left: -10px;
}