我第一次尝试CSS3的flexbox,它看起来很有希望,但是我很难让它表现出来。
基本上,我希望flexbox像表一样工作,但是具有order属性,因此我可以在CSS中告诉它在网格中显示元素的顺序。 flexbox甚至有可能吗?
这是我创建的测试页:https://jsfiddle.net/Lb838dwf/
HTML:
<div id="main">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div>generic</div>
<div id="div3">div 3</div>
<div>generic</div>
<div id="div4">div 4</div>
<div>generic</div>
<div>generic</div>
<div>generic</div>
<div>generic</div>
<div>generic</div>
</div>
CSS:
#main {
width: 100%;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
#main div {
min-width: 25%;
height: 100px;
-webkit-flex: 1;
flex: 1;
-webkit-order: 2;
order: 1;
background-color: #ccc;
}
#main #div1 {
-webkit-order: 3;
order: 3;
background-color: coral;
}
#main #div2 {
-webkit-order: 5;
order: 5;
background-color: lightblue;
}
#main #div3 {
-webkit-flex: 2;
flex: 2;
-webkit-order: 2;
order: 2;
background-color: lightgreen;
}
#main #div4 {
-webkit-order: 4;
order: 4;
background-color: pink;
}
您可以看到#div3具有
flex: 2
,这意味着它应该跨越两列,但只占用一列。此外,底部的3个div(div1,div4,div2)未与上方的网格对齐。如果将max-width: 25%
添加到#main div
样式,它将使所有内容保持在同一网格中,但是跨越列不起作用。我尝试为所有div设置max-width: 25%
,仅为#div3(带有flex:2的那个)设置max-width: none
,但这没有影响。 最佳答案
让我们剖析您编写的一些内容,以便我们弄清flexbox的行为。
您可以看到#div3
具有flex: 2
,这意味着它应该跨越两个
列,但仅占用1列。flex: 2
并不意味着它应该跨越两列。这不像HTML的colspan
属性。 (即使是这样,您还有其他三个flex项[“ table cell”]已经占据了剩余的三列,所以#div3
如何扩展两列?它必须脱离网格。)flex
property是flex-grow
,flex-shrink
和flex-basis
属性的简写。flex-grow
属性通过在flex容器中分配剩余空间来控制flex项的扩展方式。因此,通过应用flex: 2
表示您希望flex项占用的剩余空间是其同级项的两倍,而不必是其大小的两倍。
在spec中,flex-grow
属性:
...确定弹性项目相对于其余项目的增长程度
当正的可用空间为时,flex容器中的flex项
分散式。
但是,由于已为容器(#main
)赋予了width: 100%
,并且为每个弹性项目赋予了min-width: 25%
,因此没有剩余空间可分配。所以什么也没发生。
为了说明此行为,请将每个弹性项目的宽度更改为50px。这样就可以分配更多空间,而#div3
则需要2倍的空间。参见演示:https://jsfiddle.net/Lb838dwf/6/
另外,底部的3个div(div1,div4,div2)未与
与上方项目相同的网格。
正确。它们未对齐,因为您在flex: 1
中将#main div
应用于它们。这告诉他们将剩余的所有空间平均分配给他们。
如果我将max-width: 25%
添加到#main div
样式,它将保持
一切都放在同一个网格中,但是跨越列不起作用。一世
尝试为所有div设置max-width: 25%
并为
只是#div3(带有flex:2的那个),但这没有影响。
什么?你丢了我
我希望flexbox表现得像表格,但具有order属性,所以我
可以在CSS中告诉它在网格中显示元素的顺序。
flexbox甚至有可能吗?
是的,有可能。
的HTML
<div id="main">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div>div 5</div>
<div>div 6</div>
<div>div 7</div>
<div>div 8</div>
<div>div 9</div>
<div>div 10</div>
<div>div 11</div>
</div>
的CSS
#main {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
#main div {
flex: 0 0 150px; /* don't grow, don't shrink, stay at 150px */
height: 100px;
margin: 5px;
background-color: #ccc;
border: 1px dashed black;
}
#main div:nth-child(2) { order: -4; background-color: lightblue; }
#main div:nth-child(5) { order: -3; background-color: lightgreen; }
#main div:nth-child(8) { order: -2; background-color: lightyellow; }
#main div:nth-child(11) { order: -1; background-color: lightpink; }
演示:http://jsfiddle.net/Lb838dwf/4/
跨越多列
如上所述,
max-width: none
属性是flex
,flex-grow
和flex-shrink
属性的简写。flex-basis
告诉弹性项目如何分配可用空间,因此它不是模拟HTML flex-grow
属性的可靠工具。 (容器中可用的空间和伸缩项目的大小的两倍是无关的长度,不一定相等。)但是,用于设置弹性项目初始大小的
colspan
属性可用于使弹性项目变宽两倍,变倍三倍。在我上面的代码中,弹性项目设置为:
flex-basis
第三个值表示flex: 0 0 150px;
。因此,每个框都设置为150px宽。对于要占用两列的弹性项目,只需将该值加倍即可。
由于
flex-basis
级联到所有div,因此我们只需要针对目标项目调整flex
。#main div:nth-child(11) { flex-basis: calc(300px + 10px); } /* factoring in margin space */
#main div:nth-child(7) { flex-basis: calc(450px + 20px); } /* factoring in margin space */
演示:http://jsfiddle.net/Lb838dwf/5/(展开效果窗口)