gpt4 book ai didi

CSS Flex Box --- flex-wrap :wrap; How to style a specific line?

转载 作者:技术小花猫 更新时间:2023-10-29 11:40:35 24 4
gpt4 key购买 nike

我的问题涉及根据浏览器窗口的宽度将 (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 来实现?

提前致谢

最佳答案

没有。 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 实现:

  • 虽然指定了包装,但没有浏览器实现它
  • 没有 flex 基础

相关:CSS3 flexbox adjust height of vertically aligned elements

关于CSS Flex Box --- flex-wrap :wrap; How to style a specific line?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19666728/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com