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

【问题标题】：CSS Flex Box --- flex-wrap:wrap; How to style a specific line?CSS Flex Box --- flex-wrap:wrap;如何设置特定线条的样式？
【发布时间】：2013-11-09 02:38:41
【问题描述】：

我的问题与根据浏览器窗口的宽度将 (flex-wrap:wrap;) 包装成多行的 Flex-Box 样式有关：除了 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 来实现？

提前致谢

【问题讨论】：

您的意思是在应用了flex-wrap:wrap 的元素上应用样式，还是在不使用 JavaScript 的情况下让元素以类似的方式表现？通过提供一些示例代码或显示您想要实现的目标的图像来获得帮助通常会更有效。
这里有一个类似的问题：stackoverflow.com/questions/19574851/…
相关：stackoverflow.com/questions/18744164/…
"is styled" 不是一个很有用的描述。如果“风格化”的意思是“我希望它是粉红色的”，那么不。如果它的意思是“我希望它调整大小”，那么是的。

标签： css flexbox

【解决方案1】：

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

Flexbox是否允许 flex 项根据它们的 flex-basis 值调整大小。

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;
}

请注意，这不适用于 2009 Flexbox 实现：

虽然指定了换行，但没有浏览器实现它
没有弹性基础

【讨论】：

那么你会使用 JavaScript 和 jquery 吗？