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

CSS justify-content属性定义浏览器如何沿着flex容器的 main-axi 和网格容器的内联轴在内容项之间及其周围分配空间。

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>

Answer 2

您要查找的CSS声明是：

justify-content: space-between;

工作示例：

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

.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>

Flexbox对齐内容未对齐

2 个答案: