内联弹性布局的居中和间距问题

Question

我想在块级容器中居中两个使用display: inline-flex;属性的div元素，但是align-items: center;和justify-content: center;似乎不起作用。只有text-align: center;可以将它们居中，但这并不正确（因为我读到使用display: inline-flex;应该使用align-items和justify-content）。如果我的解决方案正确，那么你能告诉我这两种方法的区别吗？

此外，我想消除这两个居中的div之间的小空隙，但我尝试了一些互联网上的解决方案，没有一个有效。为什么呢？

如果你们能帮助我解决这两个问题，我会非常高兴。

以下是代码示例：

.parent {
  border: 1px solid blue;
  background-color: yellow;
  padding: 10px;
}

.container {
  border: 1px dotted green;
  padding: 10px;
  text-align: center;
}

.child, .child2 {
  display: inline-flex;
  border: 1px solid red;
  background-color: honeydew;
  padding: 50px;
}

<div class="parent">
  <div class="container">
    <div class="child">
      <h1> Test1.</h1>
    </div>
    <div class="child2">
      <h1> Test2.</h1>
    </div>
  </div>
</div>

- Tomasz Czechowski

Answer 1

如果您在容器元素上使用display: flex，它将起作用。 align-items和justify-content位置弹性项内部的弹性容器，因此您需要在父元素上设置display: flex。

.parent {
  border: 1px solid blue;
  background-color: yellow;
  padding: 10px;
}
.container {
  border: 1px dotted green;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.child,
.child2 {
  display: inline-flex;
  border: 1px solid red;
  background-color: honeydew;
  padding: 50px;
}

<div class="parent">
  <div class="container">
    <div class="child">
      <h1> Test1.</h1>
    </div>
    <div class="child2">
      <h1> Test2.</h1>
    </div>
  </div>
</div>

- Nenad Vracar

---

看起来问题已经解决了，但又出现了一个新问题：当屏幕缩小到一定程度时，它应该断开那2个div的行，并像我的代码一样在第一个下面显示第二个。有没有办法解决这个问题，还是只能用媒体查询？ - Tomasz Czechowski

有一种方法，只需将 flex-wrap: wrap; 添加到 flex 容器即可 https://jsfiddle.net/Lg0wyt9u/1519/ - Nenad Vracar

如果您在（父级）容器元素上使用display: flex，它将起作用...这就是我所需要的...谢谢。 - danday74