Question

很简单，有没有办法知道元素是否因flex-wrap而被包装，因此它的样式不同？

Answer 1

我会使用javascript或jquery来实现这一目标。我的方法是：

使用：first-of-type selector。
使用jquery的每个方法来遍历所有元素，并比较$（this）的offsetTop是否与step1上的offsetTop值不同。
疑难杂症

如果您需要帮助开发它，请提供一些代码。

Answer 2

您可以使用应应用于该flex-wrap属性的样式制作其他类。您可以通过javascript管理这些类。请按以下方式检查此方法的实施情况：

这里是编写2个类的代码，flex-wrap-blue将flex-wrap设置为换行并将颜色更改为蓝色，其他类为flex-wrap-green，将flex-wrap设置为wrap-reverse并更改颜色变为绿色。我正在通过javascript管理这2个类，如下面的代码所示：

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状态设置元素样式？

2 个答案: