用flexbox左右对齐元素

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用flexbox对齐我的子元素。我想做的是将一个元素居中，而另一个保持最左对齐。通常我会使用来设置left元素margin-right:auto。问题是将中心元素推离中心。这是可能的 使用绝对定位？

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}
<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

回答：

请参阅下面的[Solo答案，这是更好的解决方案。

flexbox背后的想法是提供一个框架，可以轻松地将容器中尺寸可变的元素对齐。这样，提供一个布局而完全忽略一个元素的宽度几乎没有意义。本质上，这正是绝对定位的目的，因为它使元素脱离了正常流动。

据我所知，如果不使用position:

absolute;，就没有很好的方法，所以我建议您使用它…但是，如果您真的不想或不能使用绝对定位，那么我想您可以使用一个以下变通办法。

，则可以更改justify-content为flex-start（left），然后像这样对齐“

Center” div：

#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}

，那么可以在右侧复制“ Left”，使用justify-content: space-between;，并隐藏新的right元素： 明确一点，这确实非常丑陋……最好使用绝对定位而不是重复的内容。 :-)

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 500px;
}
#right {
    opacity: 0;
}
<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
  <span id="right">Left</span>
</div>

以上是 用flexbox左右对齐元素 的全部内容， 来源链接： utcz.com/qa/424028.html

回到顶部