Question

看下面的例子，我的目标是使中间项始终居中-直接在容器div中居中。然后，使左侧和右侧项目与容器的最左侧和右侧对齐。

下面是容器的样式，但是它仍在元素之间放置均匀的空间，因此中间元素不会停留在确切的中间。与右侧和中间元素相比，我想要的结果是在左侧和中间元素之间留出更多空间-但中间元素始终始终居中

我该如何实现？

display: flex;
  justify-content: center;
  align-items: center;

  .left {
    margin-right: auto;
    justify-self: center;
    align-self: center;
  }

  .right {
    margin-left: auto;
    justify-self: center;
    align-self: center;
  }

Example Image

Answer 1

您可以在父容器上使用justify-content: space-between;。

.parentContainer {
 display: flex;
 justify-content: space-between;
}

<div class="parentContainer">
 <div class="left">1</div>
 <div class="middle">2</div>
 <div class="right">3</div>
</div>

Answer 2

.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
img {
  height: 100px;
  width: 100px;
  display: block;
}

<div class="container">
 <img src="https://i.ibb.co/KNRyrkQ/images-2.png">
  <img src="https://i.ibb.co/D4bMr4H/images-1.jpg">
  <img src="https://i.ibb.co/YQFjGv3/images-3.jpg" >
</div>

如何使用flexbox使中间元素始终完美居中

2 个答案: