CSS - 使用 Flex 属性的对齐问题

Question

我正在使用flex属性创建div。每行有三个网格。第一个和第三个网格应分别对齐左侧和右侧。但中心网格应居中对齐。我试过但没有工作。我也附上了上面的代码。

.outer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-between;
}
.outer-grid {
  max-width: 150px;
  padding: 20px;
  background: #ff4040;
  color: #fff;
}

<div class="outer">
  <div class="outer-grid"> One </div>
  <div class="outer-grid"> two </div>
  <div class="outer-grid"> three </div>
  <div class="outer-grid"> four </div>
  <div class="outer-grid"> five </div>
  <div class="outer-grid"> six </div>
</div>

Answer 1

希望这对您有所帮助。

谢谢

.outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-content: center;
    width: 260px;
    margin: 0 auto;
}
.outer-grid {
    width: 30px;
    padding: 20px;
    background: #ff4040;
    color: #fff;
}

<div class="outer">
  <div class="outer-grid"> One </div>
  <div class="outer-grid"> two </div>
  <div class="outer-grid"> three </div>
  <div class="outer-grid"> four </div>
  <div class="outer-grid"> five </div>
  <div class="outer-grid"> six </div>
</div>

Answer 2

由于您无法编辑HTML，另一种解决方案是使框占用容器的相对宽度。

---

.outer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.outer-grid {
  display: flex;
  flex: 0 25%;
  padding: 20px;
  margin-top: 20px;
  background: #ff4040;
  justify-content: center;
  color: #fff;
}

<div class="outer">
  <div class="outer-grid"> One </div>
  <div class="outer-grid"> two </div>
  <div class="outer-grid"> three </div>
  <div class="outer-grid"> four </div>
  <div class="outer-grid"> five </div>
  <div class="outer-grid"> six </div>
</div>

---

如果这是您要查找的内容，我稍后会在此处编写解释。

Answer 3

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.outer-grid {
  max-width: 150px;
  padding: 20px;
  background: #ff4040;
  color: #fff;
}

<div class="outer">
  <div class="outer-grid"> One </div>
  <div class="outer-grid"> two </div>
  <div class="outer-grid"> three </div>
  <div class="outer-grid"> four </div>
  <div class="outer-grid"> five </div>
  <div class="outer-grid"> six </div>
</div>