用flexbox左右对齐元素

一尘不染

用flexbox左右对齐元素

css

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

HTML和CSS

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

阅读 635

2020-05-16

共1个答案

一尘不染

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

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

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

如果您知道“ Left” div的确切宽度 ，则可以更改justify-content为flex-start（left），然后像这样对齐“
Center” div：

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

如果您不知道width ，那么可以在右侧复制“ 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>

2020-05-16