CSS Flexbox -子元素没有正确对齐是否给出不相等的间距？

w46czmvw 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(118)

我使用CSS Flexbox创建一个包含多个子元素的布局。但是，我遇到了一个问题，即子元素在父容器中没有正确对齐。我希望它们均匀分布并水平居中，但它们看起来不对齐或间距不等。

我的代码是：

<div class="parent">
  <div class="child">box 1</div>
  <div class="child">box 2</div>
  <div class="child">box 3</div>
</div>

.parent{
  display: flex;
  justify-content: center;
}

.child{
  margin: 10px;
  padding: 10px;
  background-color: #ccc;
}

是什么导致了这个问题？如何使用CSS Flexbox确保子元素在父容器中均匀分布并居中？请给予任何见解或建议。
在左侧创建空间，并在元素之间均匀分配剩余空间。预期的结果是，子元素应该均匀分布，并在父容器中水平和垂直居中。

css

来源：https://stackoverflow.com/questions/76545338/css-flexbox-child-elements-not-aligning-properly-giving-unequal-spacing

3条答案

按热度按时间

roejwanj1#

/* 分布式对齐 / justify-content：间隔;/ 均匀分布项目第一个项目与开始齐平，最后一个项目与结束齐平 /在此输入代码
理由内容：空间环绕;/ 均匀分布项目两端各有一半空间 /在此处输入代码
理由内容：间隔均匀;/ 均匀分布项目周围有相等的空间 */在此处输入代码
您应该在这里查看MDN以获得更多的flex justify属性-https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

赞(0）回复(0）举报 2023-06-25

643ylb082#

我想你想中心的子项目水平和垂直之间的空间相等，然后在中心对齐。下面是代码，你可以试试。

.parent{
  display: flex;
  justify-content: center;
  align-item: center;
  gap: 1rem; /* Adjust according to your need*/
}

.child{
  margin: 10px;
  padding: 10px;
  background-color: #ccc;
}

<div class="parent">
     <div class="child">box 1</div>
     <div class="child">box 2</div>
     <div class="child">box 3</div>
  </div>

赞(0）回复(0）举报 2023-06-25

t9aqgxwy3#

只需将对齐项添加到父项：

.parent{
  display: flex;
  justify-content: center;
  align-items:center;
}

.child{
  margin: 10px;
  padding: 10px;
  background-color: #ccc;
}

赞(0）回复(0）举报 2023-06-25

我来回答

CSS Flexbox -子元素没有正确对齐是否给出不相等的间距？

3条答案

相关问题

热门标签

最新问答