Flex-box：将最后一行与网格对齐

小编典典

Flex-box：将最后一行与网格对齐

all

我有一个简单的 flex-box 布局，其中包含一个容器，例如：

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

现在我希望最后一行中的项目与其他项目对齐。justify-content: space-between;应该使用，因为可以调整网格的宽度和高度。

目前它看起来像

右下角的项目应该在中间

在这里，我希望右下角的项目位于“中间列”中。实现这一目标的最简单方法是什么？这是一个显示此行为的小jsfiddle
。

.exposegrid {

  display: flex;

  flex-flow: row wrap;

  justify-content: space-between;

}



.exposetab {

  width: 100px;

  height: 66px;

  background-color: rgba(255, 255, 255, 0.2);

  border: 1px solid rgba(0, 0, 0, 0.4);

  border-radius: 5px;

  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

  margin-bottom: 10px;

}


<div class="exposegrid">

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

  <div class="exposetab"></div>

</div>

阅读 114

2022-03-13

共1个答案

小编典典

添加一个::after自动填充空间。无需污染您的 HTML。这是一个显示它的代码笔：
http
://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

2022-03-13