Richten Sie Elemente mit Flexbox links und zentriert aus
P粉545682500
P粉545682500 2023-08-27 21:54:23
0
2
559
<p>Ich verwende Flexbox, um meine untergeordneten Elemente auszurichten. Ich möchte ein Element zentrieren und das andere Element links ausrichten. Normalerweise würde ich <code>margin-right: auto</code> verwenden, um das linke Element festzulegen. Das Problem besteht darin, das mittlere Element von der Mitte wegzudrücken. Ist dies ohne absolute Positionierung möglich? </p> <p><strong>HTML und CSS</strong></p> <p><br /></p> <pre class="brush:css;toolbar:false;">#parent { align-items: center; Rand: 1 Pixel einfarbig schwarz; Anzeige: Flex; rechtfertigen-Inhalt: Mitte; Rand: 0 automatisch; Breite: 500px; } #links { Rand rechts: auto; } #Center { Rand: automatisch; }</pre> <pre class="brush:html;toolbar:false;"><div id="parent"> <span id="left">Left</span> <span id="center">Center</span> </div></pre> <p><br /></p>
P粉545682500
P粉545682500

Antworte allen(2)
P粉561323975

添加第三个空元素:

<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>
P粉899950720

编辑:请参阅下面的Solo 的答案,这是更好的解决方案。


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

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


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

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

如果您不知道宽度,那么您可以在右侧复制“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>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage