- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个包含一到三个 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
propertyThe
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/
更新 对于那些不喜欢内联 CSS 并想要类的人,这里有另一个带有类和样式表的 jsFiddle。 更新结束 我想做一个产品页面。它将包含三列。第一个是图片,第二个是一些规范,第三个是“入篮”。所有列的
我创建了一个简单的测试应用程序 使用以下代码 var i : int; for (i=0; i *
我做了一个小demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html flex 容器中有2个 fl
我读过好几遍,要让 flex-grow 按预期工作,您通常需要设置 flex-grow:1(或 flex: 1) 在元素的父级、其父级等上,一直向上。 在学习 flexbox 时,这给我的印象是它具有
我开始学习 FLEX。我只有 flex sdk。所以我只能使用它开始学习吗?如果是这样,请建议我要通过的链接.. 但是,使用编辑器将最大限度地减少我们的工作,并自行创建代码。所以作为一个新的学习者,理
有没有办法使用 flex-direction: column 在 flex 容器中放置 flex 项有相同的高度,只使用 CSS? JSFiddle:https://jsf
我有一个 flex .swf 和一个单独的 AIR 项目,我试图通过套接字相互通信。 这两个程序连接正常,.swf 能够毫无问题地将数据发送到 AIR 应用程序。但是,我发现当 AIR 应用程序将数据
在这种情况下,我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行,而不是将其放置在 div 下方那已经是那个特定的顺序了。 我如何使用 flexbox - 将包含 2
假设您有一个带有显示 flex、flex-direction 列的 div,在本例中高度为 600。 它有三个子项,每个子项的属性 flex 等于 1。前两个子项呈现一些简单文本,第三个子项呈现 h1
男孩,这个头衔是满口的。让我解释一下我的困惑: 我有一个 flex 容器和 2 个 flex 元素。 /* CSS */ .container {
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。 今天我们中的许多人都知道 displa
其用例是带有单选按钮的响应式表单。当在大 PC 屏幕上时,所有单选按钮通常都在屏幕上的一行中(就像带有 flex-direction: row 的非包装 flex 容器中的 flex 元素)。在电话上
在可访问的 flex 应用程序中,用户可以使用 TAB 键在控件中导航。 在用户激活特定链接后,flex 应用程序会在 html 页面顶部弹出,并使用 swfobject.embedSWF 加载。 它
我将我的 Flex 3 项目导入 Flex 4 并删除了 Flex 4 问题窗口中列出的所有错误和警告。 启动我的应用程序时,我在 Flex 4 中遇到以下错误。 这可能是什么原因? Error: C
我有如下标记: alot of text 我不能让黄色占据红色的 100% 高度,即使红色溢出,它也只占据窗口的 100%。如果我将红色的 display
我在 Eclispe 3.4 中安装了 flex builder 3 插件。现在许可证过期了。所以我需要在其中添加另一个许可证。但我无法更改许可证 key ,因为该选项已禁用。 因此,请任何人知道如何
这个问题在这里已经有了答案: Make flex items have equal width in a row (3 个答案) How to make Flexbox items the same
我正在尝试理解以下行。 flex :0 1 50% 现在,如果最后一个值,flex basis 是像素,上面会说该元素不允许增长,但允许缩小并且最大为 50 像素。 但是用百分比代替,有什么关系。它将
我一直致力于 flex 布局,遇到了针对 Firefox 和 IE11 的问题。 我创建了一个 codepen显示问题。 截图 Chrome(左)、Firefox(右) 描述 预期的行为是header
我正在尝试在 flex (flash builder 4) 中创建一个简单的表单。我在里面放了一个表单容器和 FormItems。例如,表单项是标准的“客户”字段,例如名字、姓氏、地址、城市、州、 z
我是一名优秀的程序员,十分优秀!