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

【问题标题】：CSS - Alignment issues using Flex propertyCSS - 使用 Flex 属性的对齐问题
【发布时间】：2019-01-15 01:13:06
【问题描述】：

我正在使用 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>

【问题讨论】：

你有 6 个盒子，而不是 3 个。
不..应该是这样，但布局应该是我说的。这可能吗？

标签： html css flexbox centering

【解决方案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>

【讨论】：

这就是我的意思:)

【解决方案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>

如果这是你要找的，我稍后会在这里写解释。

【讨论】：

【解决方案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>

【讨论】：

这并不能解决他的问题。请仅在您为该问题写下最低答案后单击答案。