javascript - 使用 'order' 属性在兄弟之间定位 flex 元素

标签 javascript jquery html css flexbox

我有一个包含一到三个 flex 元素的 flex 盒。

正确的布局应类似于 <div></div><h2></h2><div></div>在包含 flex-box 中。

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

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

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

我做了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...)。

谢谢。

最佳答案

当容器中有三个元素时:

  • 分区
  • h2
  • 分区

和

  • 这些元素的顺序在来源中有所不同...

和

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

那么，你可以这样做:

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

这转化为:

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>

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

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

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

来自规范:

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>

您现在可以购买一件和三件 flex 商品。

对于两个元素，它变得有点棘手。

因为您总是希望 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>

关于javascript - 使用 'order' 属性在兄弟之间定位 flex 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39043729/

上一篇：javascript - AngularJS 不会验证 ng-show 隐藏的表单元素的输入

下一篇：javascript - 删除 select2 中的搜索框后，键盘选择选项不起作用

相关文章：

javascript - 如何使用 slider 和调整大小属性调整图像大小

html - 为什么我们不能将 span 元素的 line-height 设置为小于 1？

javascript - YOUTUBE 在移动设备上自动播放

javascript - 错误 - 未捕获类型错误 : Cannot set property 'innerHTML' of undefined

javascript - 在javascript中添加两个带有复选框的下拉列表

c# - 自动登录网站进行屏幕抓取

jquery - 获取参与触发事件的元素 ID

javascript - Bootstrap typeahead 建议链接与 jquery 单击不起作用

javascript - 如何使我的网页主要内容可点击/可访问？

javascript - 检查 JavaScript 数组中是否存在动态属性

©2024 IT工具网  联系我们