css - Flexbox 对齐内容不对齐

Question

这就是场景，我在容器中有一些容器。我无法让 flexbox 使用 space-between。

假设我们有一个看起来像这样的容器:

.flex-container {
  display: flex;
  height: 150px;
  width: 150px;
  background-color: aqua;
  border: 2px solid black;
  flex-direction: column;
}

.sub-container {
  display: flex;
  margin: 5px;
  background-color: #fff;
  border: 2px solid black;
  flex-basis: 50px;
  align-content: space-between;
}

.item {
  flex-basis: 25px;
  margin: 3px;
  border: 1px solid black;
  background-color: green;
}

<div class="flex-container">
  <div class="sub-container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  Hello this is some content
  <div class="sub-container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

当它运行时，它应该在 sub-container 的左侧和右侧有一个元素，但如您所见，它没有。

Answer 1

您需要使用 justify-content 而不是 align-content

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

MDN

.flex-container {
  display: flex;
  height: 150px;
  width: 150px;
  background-color: aqua;
  border: 2px solid black;
  flex-direction: column;
}

.sub-container {
  display: flex;
  margin: 5px;
  background-color: #fff;
  border: 2px solid black;
  flex-basis: 50px;
  justify-content: space-between;
}

.item {
  flex-basis: 25px;
  margin: 3px;
  border: 1px solid black;
  background-color: green;
}

<div class="flex-container">
  <div class="sub-container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  Hello this is some content
  <div class="sub-container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>