CSS Flex Box
我的问题涉及到根据浏览器窗口的宽度将（flex-wrap：wrap;）封装到多行中的样式化Flex-Box：除JavaScript之外，有什么方法可以设计特定的行吗？
我们有以下divs
<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不提供在多行柔性容器中对特定线条进行样式设置的方法。
Flexbox确实允许Flex项目根据其基于Flex的价值进行调整。
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实施：
相关：CSS3 flexbox调整垂直对齐元素的高度
链接地址: http://www.djcxy.com/p/75691.html上一篇: CSS Flex Box