非常简单，有没有一种方法可以知道元素是否由于 flex-wrap 被包装，因此可以以不同的样式进行排版？
有没有一种方法可以根据flex-wrap状态来样式化元素？
41
- dontexist
5
除非您也使用一些JS，否则不要这样做。 - Pete
据我所知，目前没有选择器修饰符和/或伪类可以针对具有 flex 属性的元素进行定位，因此我的答案是否定的。但是，如果您解释一下您想要做什么以及发生了什么，您可能会得到更好的帮助，因为定位包装元素可能不是您需要做的事情。 - Joum
如果弹性项目的宽度已知，您可以使用CSS... https://dev59.com/Mp3ha4cB1Zd3GeqPQCk_ ... 如果不知道，则需要脚本... 另外，如果此链接的答案有效，则我会投票关闭为重复项，请通知我。 - Asons
在CSS中，容器无法知道子元素何时换行。一种解决方法是使用媒体查询，但这会将控制权从浏览器转移到您手中。https://dev59.com/8VoU5IYBdhLWcg3we2-6#37413580 - Michael Benjamin
可能是目标最后一行的flex项目的重复问题。 - Pikamander2
2个回答
6
我会使用 JavaScript 或 jQuery 来实现这个功能。
我的方法是：
- 使用 :first-of-type 选择器获取元素的 offsetTop 值。
- 使用 jQuery 的 each 方法来遍历所有元素，并比较 $(this) 的 offsetTop 值是否与步骤1中获取的值不同。
- 完成
- Lima Chaves
0
您可以创建不同的类，其中包含应用于 flex-wrap 属性的样式。您可以通过 JavaScript 管理这些类。请检查此方法的实现方式：
以下是代码示例，其中创建了 2 个类：flex-wrap-blue 将 flex-wrap 设置为 wrap 并将颜色更改为蓝色，另一个类是 flex-wrap-green，它将 flex-wrap 设置为 wrap-reverse 并将颜色更改为绿色。我通过 JavaScript 管理这两个类，如下所示：
HTML 代码：
<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="btn-wrap">Apply Wrap</button>
<button id="btn-wrap-reverse">Apply Wrap Reverse</button>
<br />
<div class="large-box">
<div class="small-box">One</div>
<div class="small-box">Two</div>
<div class="small-box">Three</div>
<div class="small-box">Four</div>
</div>
</body>
</html>
CSS 代码：
.large-box {
display:flex;
width:100px;
border:1px solid #f00;
height:100px;
padding:1% 0 1% 0;
box-sizing:border-box;
}
.small-box {
width:30px;
border:1px solid #f0f;
height:20px;
padding:1%;
}
.flex-wrap-blue {
flex-wrap:wrap;
color:#00f;
}
.flex-wrap-green {
flex-wrap:wrap-reverse;
color:#0f0;
}
Javascript代码：
function addClass(elem, className) {
if (!elem.classList.contains(className)) {
elem.classList.add(className);
}
}
function removeClass(elem, className) {
if (elem.classList.contains(className)) {
elem.classList.remove(className);
}
}
const btnWrap = document.getElementById('btn-wrap');
const btnWrapReverse = document.getElementById('btn-wrap-reverse');
const box = document.getElementsByClassName('large-box')[0];
btnWrap.addEventListener('click', function(){
addClass(box, 'flex-wrap-blue');
removeClass(box, 'flex-wrap-green');
});
btnWrapReverse.addEventListener('click', function(){
addClass(box, 'flex-wrap-green');
removeClass(box, 'flex-wrap-blue');
});
你可以在我的Codepen上找到代码的运行效果。
- YATIN GUPTA
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接