使用 flexbox 将元素左对齐和居中对齐 [英] Aligning elements left and center with flexbox

问题描述

我正在使用 flexbox 来对齐我的子元素.我想做的是将一个元素居中，让另一个元素与最左边对齐.通常我只会使用 margin-right: auto 设置左元素.问题是将中心元素推离中心.这是否可能不使用绝对定位?

HTML &CSS

#parent {对齐项目:居中；边框:1px纯黑色；显示:弹性；对齐内容:居中；边距:0 自动；宽度:500px；}#剩下 {右边距:自动；}#中央 {保证金:自动；}

<span id="left">左</span><span id="center">中心</span>

解决方案

参见 Solo 的回答 下面，这是更好的解决方案.

<小时>

flexbox 背后的想法是提供一个框架，以便在容器内轻松对齐具有可变尺寸的元素.因此，提供一种完全忽略一个元素的宽度的布局是没有意义的.本质上，这正是绝对定位的用途，因为它将元素从正常流中取出.

据我所知，不使用 position: absolute; 就没有好的方法，所以我建议使用它......但是如果你真的不想，或者不能使用绝对定位，那么我想您可以使用以下解决方法之一.

<小时>

如果您知道左"div 的确切宽度，那么您可以将 justify-content 更改为 flex-start(左) 然后像这样对齐中心"div:

#center {位置:相对；保证金:自动；左:-{左div的一半宽度}px；}

<小时>

如果你不知道宽度，那么你可以在右边复制Left"，使用justify-content: space-between;，然后隐藏新的正确元素:需要说明的是，这真的非常丑陋……使用绝对定位比复制内容更好.:-)

#parent {对齐项目:居中；边框:1px纯黑色；显示:弹性；对齐内容:间隔；边距:0 自动；宽度:500px；}#对 {不透明度:0；}

<span id="left">左</span><span id="center">中心</span><span id="right">左</span>

I'm using flexbox to align my child elements. What I'd like to do is center one element and leave the other aligned to the very left. Normally I would just set the left element using margin-right: auto. The problem is that pushes the center element off center. Is this possible without using absolute positioning?

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>

解决方案

EDIT: See Solo's answer below, it is the better solution.

---

The idea behind flexbox is to provide a framework for easily aligning elements with variable dimensions within a container. As such, it makes little sense to provide a layout where the width of one element is totally ignored. In essence, that is exactly what absolute positioning is for, as it takes the element out of the normal flow.

As far as I know, there is no nice way of doing this without using position: absolute;, so I would suggest using it... but If you REALLY don't want to, or can't use absolute positioning then I suppose you could use one of the following workarounds.

---

If you know the exact width of the "Left" div, then you could change justify-content to flex-start (left) and then align the "Center" div like this:

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

---

If you do not know the width, then you could duplicate "Left" on the right side, use justify-content: space-between;, and hide the new right element: Just to be clear, this is really, really ugly... better to use absolute positioning than to duplicate content. :-)

#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 将元素左对齐和居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！