我第一次尝试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 propertyflex-growflex-shrinkflex-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属性是flexflex-growflex-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/(展开效果窗口)

10-05 21:04
查看更多