CSS Flex Box --- flex-wrap：wrap; 如何设置特定线条的样式？

philkunz 发表于 Dev

菲尔昆兹

我的问题涉及对Flex-Box进行样式设置，根据浏览器窗口的宽度将Flex-Box包裹（flex-wrap：wrap;）成多行：除JavaScript之外，还有其他方法可以设计特定的行吗？

我们有以下div

 <body>
 <div class="flexwrap">
     <div class=flexbox"></div>
     <div class=flexbox"></div>
     <div class=flexbox"></div>
 </div>
 </body>

和以下样式表

.flexwrap {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: flex;
    box-orient: horizontal;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    flex-wrap: wrap;
}

.flexbox {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    flex-grow:1;
    flex-shrink:0;
    width:300px;
    height:100px;
}

当浏览器窗口的宽度大于900px时，所有具有.flexbox类的div都将在一条水平线中彼此相邻。当浏览器窗口的宽度小于900px时，类.flexbox的div将分为2行或3行，具体取决于浏览器的宽度。

我想设置第二行中所有div的样式。这意味着：

Browser width > 900px = no div is styled
Browser width < 900px and Browser width > 600px  = the third div is styed
Browser width < 600px  = the second div is styled

有没有办法使用CSS实现这一目标？

提前致谢

西曼侬

不能。Flexbox无法提供在多行flex容器中为特定行设置样式的方法。

Flexbox，就不会允许基于其柔性基础值弯曲的物品来调整。

http://codepen.io/cimmanon/pen/GKEfD

.flexwrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  .flexwrap {
    display: flex;
  }
}

.flexbox {
  -webkit-flex: 1 20em;
  -ms-flex: 1 20em;
  flex: 1 20em;
  height: 100px;
}