使用 'order' 属性在兄弟姐妹之间定位弹性项目

Posted 2023-03-05

技术标签:

【中文标题】使用 \'order\' 属性在兄弟姐妹之间定位弹性项目【英文标题】：Using 'order' property to position flex item between siblings使用 'order' 属性在兄弟姐妹之间定位弹性项目 【发布时间】：2016-12-26 21:23:46 【问题描述】：

我有一个包含一到三个弹性项目的弹性盒子。

正确的布局应该在包含的 flex-box 中看起来像 <div></div><h2></h2><div></div>。

只有在布局顺序保持不变的情况下，我才有代码可以完成这项工作（请参阅 this）。

我的问题是：如果标记并不总是按那个顺序排列（比如我的一位同事未能正确执行），我该如何设置它以便 @987654324 @ 总是显示在中间（或者在只有一个 div 和一个 h2 的情况下尽可能靠近）。

为此，我一直在使用order 属性；但是，我要么没有充分发挥它的潜力，要么是错误的解决方案。

我已经将this jsfiddle 作为它的试验场，但也有这个示例：

.diff-order 
  order: 2

.diff-order:not(h2) 
  order: 1;

.container 
  display: flex;

.container > * 
  flex: 1;  /* KEY RULE */
  border: 1px dashed red;

h2  
  text-align: center;
  margin: 0;

.container > div 
  display: flex;

.diff-order 
  order: 2

.diff-order:not(h2) 
  order: 1;

p  text-align: center;
p > span  background-color: aqua; padding: 5px;

<div class="container">
  <h2>
    I'm an h2
  </h2>
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>

它完成的是将<h2> 移动到包含div 的末尾。 我正在尝试看看是否有办法设置顺序，以便<h2> 始终是中心项目。 也许可以使用伪类 :before 和 :after（也许作为 h2 周围 div 的替代品...）。

谢谢。

【问题讨论】：

【参考方案1】：

当容器中有三个元素时：

div h2 div

与

这些元素的顺序因源而异...

与

您希望h2 始终位于中间...

那么，你可以这样做：

.container > div:first-of-type  order: 1; 
.container > h2  order: 2; 
.container > div:last-of-type  order: 3;

这转化为：

无论源中元素的顺序如何，
第一个 div 将在视觉顺序中首先出现 h2 将出现在视觉顺序中的第二位第二个 div 将出现在视觉顺序中的最后一个

.container 
  display: flex;

.container > * 
  flex: 1;
  border: 1px dashed red;

h2  
  text-align: center;
  margin: 0;


.container > div:first-of-type  order: 1; 
.container > h2  order: 2; 
.container > div:last-of-type  order: 3; 

p  text-align: center;
p > span  background-color: aqua; padding: 5px;

<div class="container">
  <div>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div>

  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>
<p><span>TRUE CENTER</span></p>

对于容器中有一个元素的情况，添加justify-content: space-around。

因为每个项目都已经应用了flex: 1，所以当容器中有两个或更多项目时，space-around 将不起作用。

但是，当只有一项时，space-around 解析为 center。

来自规范：

8.2. Axis Alignment: the justify-content property

justify-content 属性沿主轴对齐弹性项目 flex 容器的当前行。

space-around

弹性项目均匀分布在行中，有一半大小的空格在任一端。

如果剩余的可用空间为负数或有行上只有一个弹性项目，该值与 center.

.container 
  display: flex;
  justify-content: space-around; /* NEW */

.container > * 
  flex: 1;
  border: 1px dashed red;

h2  
  text-align: center;
  margin: 0;


.container > div:first-of-type  order: 1; 
.container > h2  order: 2; 
.container > div:last-of-type  order: 3; 

p  text-align: center;
p > span  background-color: aqua; padding: 5px;

<div class="container">
  <div>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div>

  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
</div>
<p><span>TRUE CENTER</span></p>

您现在可以使用一个和三个弹性项目。

对于两个项目，它变得有点棘手。

由于您总是希望h2 居中，因此我建议始终在容器中放置两个 div，即使它们是空的。然后flex: 1 将赋予所有三个项目相等的宽度。

.container 
  display: flex;
  justify-content: space-around;

.container > * 
  flex: 1;
  border: 1px dashed red;

h2  
  text-align: center;
  margin: 0;


.container > div:first-of-type  order: 1; 
.container > h2  order: 2; 
.container > div:last-of-type  order: 3; 

p  text-align: center;
p > span  background-color: aqua; padding: 5px;

<div class="container">
  <div>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div>

  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <div></div>
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>
<p><span>TRUE CENTER</span>
</p>

【讨论】：

以上是关于使用 'order' 属性在兄弟姐妹之间定位弹性项目的主要内容，如果未能解决你的问题，请参考以下文章

选择除兄弟姐妹和自我之外的所有元素

如何在悬停时定位先前的兄弟姐妹？ [重复]

Tailwind CSS：有没有办法定位下一个兄弟姐妹？

绝对的位置看起来最亲近的祖先，它关心兄弟姐妹吗？

为啥 SizedBox 的存在会移动 Stack 中的兄弟姐妹？

列表元素的以下兄弟姐妹