使用'order'属性在兄弟之间定位flex项目 [英] Using 'order' property to position flex item between siblings

查看：86
本文介绍了使用'order'属性在兄弟之间定位flex项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个flex-box，有一到三个flex-items。



正确的布局应该像< div> / div>< / div>< / div>< / div>< / h>< / h>我有代码让这项工作（请参阅这个


我的问题是：如何有一个方法来确保，如果标记不总是这样的顺序（说我的一个同事不能正确地做），我怎么设置它，使< h2> 显示在中间（或者在只有一个div和一个h2的情况下尽可能接近）。


我一直在使用 order 属性;



我已经使这 jsfiddle作为它的测试场，但也有这个例子：

  .diff-order {
 order：2 
} 
 .diff-order：not（h2）{
 order：1; 
} 
  

  .container {display：flex;}。container> * {flex：1; / * KEY RULE * / border：1px red 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>我是h2< / h2> < div> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < div> < span>我是一个span< / span> < span>我是一个span< / span> < / div>< / div>< div class =container> < h2 class =diff-order>我是h2< / h2> < div class =diff-order> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < div class =diff-order> < span>我是一个span< / span> < span>我是一个span< / span> < / div>< / div>



是将< h2> 移动到包含div的结尾。 我想要查看是否有一种设置顺序的方法，以便< h2> 始终是中心项。 -classes ：之前和：之后可以使用（也许作为替换h2周围的div ...） 。



谢谢。

解决方案

容器中的三个元素：




  • div

  • h2

  • div



AND




  • 这些元素的顺序在源代码中不同...



AND




  • 您希望 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 broken 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是h2< / h2> < div> < span>我在span 1< / span> < span>我在span 2< / span> < span>我在span 3< / span> < / div>< / div>< div class =container> < div> < span>我在span 1< / span> < span>我在span 2< / span> < span>我在span 3< / span> < / div> < h2> I是h2< / h2> < div> < span>我在span 4< / span> < span>我在span 5< / span> < span>我是span 6< / span> < / div>< / div>< div class =container> < div> < span>我在span 1< / span> < span>我在span 2< / span> < / div> < h2> I是h2< / h2> < div> < span>我在span 3< / span> < / div>< / div>< div class =container> < div> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < div> < / div> < h2>我是h2< / h2>< / div>< div class =container> < div> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < h2>我是h2< / h2>< / div>< div class =container> < h2 class =diff-order>我是h2< / h2> < div class =diff-order> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < div class =diff-order> < span>我是一个span< / span> < span>我是一个span< / span> < / div>< / div>< p>< span> TRUE CENTER< / span>< / p>   
 
 
 
 
 
 
对于容器中有一个元素的情况，请添加<$ c $因为每个项目已经具有 flex：1 
 $ c> apply， space-around 将在容器中有两个或更多项目时无效。
 
 
 
但是，当只有一个项目时，空格解析为 center 。
 
 
 
  
       www.w3.org/TR/2016/CR-css-flexbox-1-20160301/#justify-content-propertyrel =nofollow>  8.2。轴对齐： justify-content 属性  
 
 
 
  justify-content 属性沿弹性容器当前行的主轴
对齐弹性项目。
 
 
   空格   
 
 
 
 Flex项目均匀分布在行中，两端有半角空格
。
 
 
 
 如果剩余的可用空间为负值或有
行上只有一个flex项，此值与
 中心相同。 
 
 
 
 
 
 
 
  .container {显示：flex; justify-content：space-around; / * NEW * /}。container> * {flex：1; border：1px broken 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是h2< / h2> < div> < span>我在span 1< / span> < span>我在span 2< / span> < span>我在span 3< / span> < / div>< / div>< div class =container> < div> < span>我在span 1< / span> < span>我在span 2< / span> < span>我在span 3< / span> < / div> < h2> I是h2< / h2> < div> < span>我在span 4< / span> < span>我在span 5< / span> < span>我是span 6< / span> < / div>< / div>< div class =container> < div> < span>我在span 1< / span> < span>我在span 2< / span> < / div> < h2> I是h2< / h2> < div> < span>我在span 3< / span> < / div>< / div>< div class =container> < div> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < div> < / div> < h2>我是h2< / h2>< / div>< div class =container> < div> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < h2>我是h2< / h2>< / div>< div class =container> < h2 class =diff-order>我是h2< / h2> < div class =diff-order> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < div class =diff-order> < span>我是一个span< / span> < span>我是一个span< / span> < / div>< / div>< div class =container> < h2 class =diff-order> I'm a h2< / h2>< / div>< p>< span> TRUE CENTER< / span>< / p>  
 div> 
 
 
 
 
您现在可以使用ONE和THREE flex项目。
 
 
 
 ，它有点棘手。
 
 
 
由于你总是希望 h2 居中，我建议有两个div容器在任何时候，即使它们是空的。  flex：1 会使所有三个项目的宽度相等。
 
 
 
 
 
 
  .container {display：flex; justify-content：space-around;}。container> * {flex：1; border：1px broken 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是h2< / h2> < div> < span>我在span 1< / span> < span>我在span 2< / span> < span>我在span 3< / span> < / div>< / div>< div class =container> < div> < span>我在span 1< / span> < span>我在span 2< / span> < span>我在span 3< / span> < / div> < h2> I是h2< / h2> < div> < span>我在span 4< / span> < span>我在span 5< / span> < span>我是span 6< / span> < / div>< / div>< div class =container> < div> < span>我在span 1< / span> < span>我在span 2< / span> < / div> < h2> I是h2< / h2> < div> < span>我在span 3< / span> < / div>< / div>< div class =container> < div> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < div> < / div> < h2>我是h2< / h2>< / div>< div class =container> < div>< / div> < div> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < h2>我是h2< / h2>< / div>< div class =container> < h2 class =diff-order>我是h2< / h2> < div class =diff-order> < span>我是一个span< / span> < span>我是一个span< / span> < / div> < div class =diff-order> < span>我是一个span< / span> < span>我是一个span< / span> < / div>< / div>< p>< span> TRUE CENTER< / span>< / p>   
 
I have a flex-box with one to three flex-items.



The proper layout should look like <div></div><h2></h2><div></div> in the containing flex-box.



I have code to make this work (see this) only if the layout order stays the same.

  
My question is: how is there a way to make sure, if the markup is not always in that order (say one of my co-workers fails to do it correctly), how can I set it so that the <h2> always gets displayed in the middle (or as close as possible in the case that there are only one div and one h2).


To accomplish this I have been making use of the order property; however, I am either not using it to its full potential or it is the wrong solution.



I have made this jsfiddle as a testing ground for it but there is also this sample:
.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>









What it accomplishes is it moves the <h2> to the end of the containing div. I am trying to see if there is a way to set the order so that <h2> will always be the center item. Maybe the pseudo-classes :before and :after can be utilized (maybe as replacements for the div's around the h2...).



Thank you.
 解决方案 
When there are three elements in the container:



    

  • div
    • 

  • h2
    • 

  • div
    • 




AND



    

  • the order of these elements varies in the source...
    • 




AND



    

  • you want the h2 to always be in the middle...
    • 




THEN, you can do something like this:
.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }

This translates to:

  
Regardless of the order of elements in the source,

  
  
    
  
  • The first div will appear first in the visual order
    • 
  
  • The h2 will appear second in the visual order
    • 
  
  • The second div will appear last in the visual order
    • 
  






.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>












For situations where there is one element in the container, add justify-content: space-around.



Because each item already has flex: 1 applied, space-around will have no effect when there are two or more items in the container.



However, when there is only one item, space-around resolves to center.



From the spec:

  
8.2. Axis Alignment: the justify-content property

  
  
The justify-content property aligns flex items along the main axis
  of the current line of the flex container.

    
space-around

    
    
Flex items are evenly distributed in the line, with half-size spaces
    on either end.

    
    
If the leftover free-space is negative or there is
    only a single flex item on the line, this value is identical to
    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>









You are now covered for ONE and THREE flex items.



For TWO items, it gets a bit trickier.



Since you always want the h2 centered, I would suggest having two divs in the container at all times, even if they're empty. Then flex: 1 will give all three items equal width.







.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'属性在兄弟之间定位flex项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        
                    

                    

                        查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆