有没有办法根据 flex-wrap 状态来设置元素的样式？
Posted
技术标签:
【中文标题】有没有办法根据 flex-wrap 状态来设置元素的样式？【英文标题】：Is there a way to style elements based on flex-wrap state? 【发布时间】：2017-04-22 12:09:20 【问题描述】：直截了当，有没有办法知道元素是否因为flex-wrap 而被包装，从而改变它的样式？
【问题讨论】：
除非你也使用一点js AFAIK，没有选择器修饰符和/或伪类来定位具有 flex 属性的元素，所以我会说不。但是，如果您解释您想要做什么以及会发生什么，您可能会得到更好的帮助，因为定位包装元素可能不是您需要做的。 如果知道弹性项目的宽度，你可以使用 CSS ...***.com/questions/41021890/… ...如果不是，则需要一个脚本 ...顺便说一句，如果这个链接的答案有效，我投票关闭为重复，所以如果它通知我 在 CSS 中，容器无法知道子元素何时包装。一种解决方法是使用媒体查询，但这会将控制权从浏览器转移给您。 ***.com/a/37413580/3597276 Targeting flex items on the last row的可能重复 【参考方案1】：我会使用 javascript 或 jquery 来实现这一点。 我的方法是：
使用 :first-of-type 选择器获取元素的 offsetTop。 使用 jquery 的 each 方法遍历所有元素并比较 $(this) 的 offsetTop 是否与您在 step1 中得到的 offsetTop 值不同。 明白了如果您需要帮助开发它，请提供一些代码。
【讨论】：
【参考方案2】：您可以使用应该应用于该 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找到代码。
【讨论】：
以上是关于有没有办法根据 flex-wrap 状态来设置元素的样式？的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法使用 reader.onload return 来设置我的状态？
有没有办法根据存储在 CoreData 中的实际值来设置 NSPredicate？