使用 flexbox 左对齐和居中对齐元素

Posted 2023-03-05

【中文标题】使用 flexbox 左对齐和居中对齐元素

【英文标题】：Aligning elements left and center with flexbox

【发布时间】：2015-04-26 08:55:13

【问题描述】：

我正在使用 flexbox 来对齐我的子元素。我想做的是使一个元素居中，而另一个元素则与最左边对齐。通常我会使用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>

【问题讨论】：

查看此站点以获取对 flexbox 的引用：css-tricks.com/snippets/css/a-guide-to-flexbox

我没有看到任何解决我的问题的内容。

我把这个链接作为对 flexbox 最准确和全面描述的参考。如果你在那里找不到答案，那么它可能是不可能的。您可以在没有绝对定位的情况下尝试的一件事是使用两个容器。一个会将第一个按钮对齐到左侧，第二个将对齐到中心。然后以负上边距向上推第二个。

是的，没有绝对定位也是可能的。在 html 中创建第三个元素 (#right)。使其与#left 相同，但在容器的另一端除外。将以下 CSS 应用于 #right：visibility: hidden 和 margin-left: auto。现在#left 上的margin-right: auto 将按需要工作。更多细节在这里：***.com/q/35250367/3597276

【参考方案1】：

解决方案 1： 给中心元素 50% 的宽度并使用 justify-content:space-between

#parent 
  display: flex;
  justify-content: space-between;


#center 
  flex-basis: 50%;

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

解决方案2：添加一个虚拟元素并将其隐藏。

#parent 
  display: flex;
  justify-content: space-between;


#right 
 visibility:hidden;

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
  <span id="right">Right</span>
</div>

【参考方案2】：

.parent 
  display: flex;


.left 
  flex: 1;


.parent::after 
  flex: 1;
  content: '';

<div class="parent">
  <div class="left">Left</div>
  <div>Center</div>
</div>

我有另一个解决方案。在我看来，向中心元素添加一个空块很好，但在代码方面它有点难看。

【参考方案3】：

如果你有一个网格系统，你可以用它来做你想做的事，而不需要“额外的”css。

以下带有引导程序 (V 4.X) 注意：它在引擎盖下使用 flex

<div class="row">
  <div class="col text-left">left</col>
  <div class="col text-center">center</col>
  <div class="col text-right">right</col>
</div>

文档引导程序：https://getbootstrap.com/docs/4.6/layout/grid/

等等！ :)

【参考方案4】：

因为这是 4 年的历史，我想我会用一个更简单的 CSS Grid 解决方案来更新它。

#parent 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid black;
  margin: 0 auto;
  width: 500px;

#center 
  text-align: center;

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

【参考方案5】：

编辑：见下面的Solo's answer，这是更好的解决方案。

---

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

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

---

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

#center 
    position: relative;
    margin: auto;
    left: -half width of left divpx;

---

如果你不知道宽度，那么你可以在右侧复制“Left”，使用justify-content: space-between;，并隐藏新的右侧元素： 要明确一点，这真的非常难看……最好使用绝对定位而不是复制内容。 :-)

#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 子级不会重叠。

【参考方案6】：

添加第三个空元素：

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

还有如下风格：

.parent 
  display: flex;

.left, .right 
  flex: 1;

只有左和右才会增长，这要归功于......

只有两个不断增长的元素（如果为空则无关紧要）和 两者的宽度相同（它们会平均分配可用空间）

...中心元素将始终完美居中。

在我看来，这比公认的答案要好得多，因为您不必将左侧内容复制到右侧并将其隐藏以使两边的宽度相同，它只是神奇地发生了（flexbox 很神奇)。

---

实际操作：

.parent 
  display: flex;


.left,
.right 
  flex: 1;



/* Styles for demonstration */
.parent 
  padding: 5px;
  border: 2px solid #000;

.left,
.right 
  padding: 3px;
  border: 2px solid red;

.center 
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

【讨论】：

谢谢，这正是我制作模态窗口标题栏所需要的。

您也可以使用父元素的伪元素代替空元素，例如.parent::aftercontent: ''; flex: 1

这是最简洁的方法！谢谢。

我怎样才能用这种方法做相反的事情？ IE。将一个项目居中，将另一个项目放在右边？

@Benisburgers 什么都没有移动，内容向左对齐，似乎“移动到中心”，like this。将text-align: right; 添加到类.right。

【参考方案7】：

试试这个没有黑客:)

CSS

.container
  width: 500px;
  margin: 0 auto;

.box
  display: flex;
  align-items: center;/* just in case*/
  justify-content: space-between;

.box p:nth-child(2)
  text-align: center;
  background-color: lime;
  flex: 1 1 0px;

HTML

<div class="container">
  <div class="box">
    <p>One</p>
    <p>Two</p>
  </div>
</div>

http://codepen.io/whisher/pen/XpGaEZ

【讨论】：

这仅在剩余空间内居中。这不是真正的中心

【参考方案8】：

如果您不想依赖定位，我发现使其真正居中的唯一方法是使用自动边距和负边距的组合，以防止居中元素被左对齐元素推倒.不过，这要求您知道左对齐元素的确切宽度。

.container 
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: center;


.block 
  width: 120px;
  background: tomato;


.justify-start 
  margin-right: auto;


.justify-center 
  margin-right: auto;
  margin-left: -120px;

<div class="container">
  <div class="block justify-start"></div>
  <div class="block justify-center"></div>
</div>

【讨论】：

我不知道为什么这被否决了，这正是问题的答案，也帮助了我。谢谢！

因为有比硬编码宽度和左边距更好的方法。

【参考方案9】：

据我所知，这可以通过以下代码实现。

https://jsfiddle.net/u5gonp0a/

.box 
    display: flex;
    justify-content: center;
    background-color: green;
    text-align: left;


.left 
    padding: 10px;
    background-color: pink;


.center 
    padding: 10px;
    background-color: yellow;
    margin: 0 auto;

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
</div>

【讨论】：

整洁！迄今为止对我来说最好的解决方案。

迄今为止最好的！