Richten Sie Elemente mit Flexbox links und zentriert aus
P粉545682500
2023-08-27 21:54:23
<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>
添加第三个空元素:
以及以下样式:
只有左翼和右翼会成长,并且由于以下事实......
...中心元素将始终完美居中。
在我看来,这比接受的答案要好得多,因为您不必将左侧内容复制到右侧并隐藏它以获得两侧相同的宽度,它只是神奇地发生(flexbox 很神奇)。
实际操作:
编辑:请参阅下面的Solo 的答案,这是更好的解决方案。
flexbox 背后的想法是提供一个框架,用于轻松对齐容器内具有可变尺寸的元素。因此,提供一种完全忽略一个元素宽度的布局是没有意义的。从本质上讲,这正是绝对定位的用途,因为它将元素从正常流中取出。
据我所知,如果不使用
position:absolute;
就没有什么好的方法可以做到这一点,所以我建议使用它......但如果你真的不想这样做,或者无法使用绝对定位,那么我想您可以使用以下解决方法之一。如果您知道“左”div 的确切宽度,那么您可以将
justify-content
更改为flex-start
(左),然后像这样对齐“居中”div:如果您不知道宽度,那么您可以在右侧复制“Left”,使用
justify-content: space- Between;
,然后隐藏新的右侧元素: 需要明确的是,这真的非常难看......使用绝对定位比复制内容更好。 :-)