Question

我第一次尝试使用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，这意味着它应该跨越两列，但它只占用1列。此外，底部的3个div（div1，div4，div2）未与其上方的项目对齐到同一网格。如果我将max-width: 25%添加到#main div样式，它会将所有内容保留在同一网格中，但跨越列不起作用。我尝试为所有div设置max-width: 25%，为＃div3设置max-width: none（设置为flex：2）但是没有效果。

Answer 1

让我们剖析您编写的一些内容，以便我们澄清弹性框行为。

您可以看到#div3有flex: 2，这意味着它应该跨越两个列，但它只占用1列。

flex: 2并不意味着它应该跨越两列。这与HTML colspan属性不同。（即使是这样，你还有其他三个弹性项目[“表格单元格”]已占据其余三列，那么#div3如何扩展两列？它必须突破网格。）< / p>

flex property是flex-grow，flex-shrink和flex-basis属性的简写。

flex-grow属性通过在Flex容器中分配剩余空间来控制Flex项目的扩展方式。因此，通过应用flex: 2，您说您希望弹性项目的剩余空间是其兄弟姐妹的两倍，不一定是其大小的两倍。

来自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%，为max-width: none设置只是＃div3（flex：2），但没有影响。

什么？你失去了我。

我希望flexbox的行为像一个表，但是有一个订单属性，所以我可以在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; }

DEMO：http://jsfiddle.net/Lb838dwf/4/

跨越多列

如上所述，flex属性是flex-grow，flex-shrink和flex-basis属性的简写。

flex-grow告诉flex项目如何分配可用空间，因此它不是模拟HTML colspan属性的可靠工具。（容器中可用的空间和弹性项目大小的两倍是不相关的长度，不一定相等。）

但是，设置弹性项目初始大小的flex-basis属性可用于制作两倍宽，三倍宽的柔性项目。

在上面的代码中，flex项目设置为：flex: 0 0 150px;第三个值代表flex-basis。因此每个盒子的宽度设置为150px。

对于要占用两列的弹性项，只需将该值加倍。

由于flex级联到所有div，我们只需要针对目标项调整flex-basis。

#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 */

DEMO：http://jsfiddle.net/Lb838dwf/5/（展开效果窗口）

保持所有元素与同一网格对齐并跨越多列

1 个答案: