All geek questions in one place

Is there a way to style elements based on flex-wrap state?

Quite bluntly, is there a way to find out if an element was wrapped because of flex-wrapand therefore its style is different?

+9
source share
2 answers

I would use javascript or jquery to achieve this. My approach would be as follows:

  • get the offsetTop of an element using: a selector of the first type.
  • use each jquery method to run all the elements and compare whether offsetTop differs from $ (this) from the offsetTop value obtained in step 1.
  • Caught

Indicate the code if you need help developing it.

+1
source

, flex-wrap. JavaScript. , :

, 2 : flex-wrap-blue, flex-wrap , - flex-wrap-green, flex-wrap , 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.

0

Source: https://habr.com/ru/post/1663110/

More articles:


All Articles