使用＆＃39;命令＆＃39;在兄弟姐妹之间定位弹性项目的属性

时间：2016-08-19 16:22:56

标签： javascript jquery html css flexbox

我有一个带有一到三个弹性项目的柔性盒。

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

我的代码只有在布局顺序保持不变的情况下才能使这项工作（参见this）。

  

我的问题是：如果有一种方法可以确定，如果标记并不总是按顺序排列（假设我的一个同事未能正确执行），我该怎样设置它以便{{ 1}}总是显示在中间（或者在只有一个div和一个h2的情况下尽可能接近）。

为了实现这一点，我一直在使用<h2>属性;但是，我要么没有充分利用它，要么是错误的解决方案。

我已将this jsfiddle作为试验场，但也有这样的样本：

order

＆＃13;
＆＃13; 
.diff-order {
  order: 2
}
.diff-order:not(h2) {
  order: 1;
}
＆＃13; 
.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; }
＆＃13;
＆＃13;
＆＃13;

它完成的是它将<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>移动到包含div的末尾。 我正在尝试查看是否有设置顺序的方法，以便<h2>始终是中心项。可能是伪类<h2>和{{1}可以利用（可能作为围绕h2的div的替代......）。

谢谢。

1 个答案:

答案 0 :(得分：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

         

Flex项目均匀分布在行中，具有半角空格     在任何一端。

         

如果剩余的自由空间为负数或存在     在该行上只有一个弹性项目，此值与之相同     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>

相关问题
最新问题