CODEWITHSUNDEEP
csscss-selectorsflexbox
dontexist
dontexist

Reputation: 5652

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

Quite straight forward, is there a way to know whether an element has been wrapped because of flex-wrap and therefore style it differently?

Upvotes: 48

Views: 12234

Answers (3)

Artur Marczyk
Artur Marczyk

Reputation: 1

It's a pretty old one question, but if someone is looking for an easy solution in 2025 - there is one now. Detecting flex-wrap is still not possible without javascript. For a non pure CSS solution tough - I created a library who's sole purpose is to address the problem of - "detecting if items in a flex container have wrapped". When wrapped alternative styling or even content could be applied.

The library is fluid-flexbox and it provides custom html element <flex-wrap-detector> .

Usage is pretty straightforward - checkout some examples here: https://github.com/arturmarc/fluid-flexbox/blob/main/flex-wrap-detector/README.md

There is also a more in depth article on what it can do, how it works, and which also explains some of the caveats of this approach.

Upvotes: -1

YATIN GUPTA
YATIN GUPTA

Reputation: 955

You can make the different class with styling that should be applied to that flex-wrap property. You can manage these classes by javascript. Please check the implementation of this approach as:

Here is the code where 2 classes are made, flex-wrap-blue which set flex-wrap to wrap and change color to blue and other class is flex-wrap-green which set flex-wrap to wrap-reverse and change color to green. I am managing these 2 classes by javascript as show the code below:

HTML Code:

<!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 Code:

.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 Code:

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');  
});

You can find the code working at my Codepen.

Upvotes: 0

Lima Chaves
Lima Chaves

Reputation: 96

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

  • get the offsetTop of the element using :first-of-type selector.
  • use the each method of jquery to run through all elements and compare if offsetTop of $(this) is different of the offsetTop value you got on step1.
  • gotcha

Provide some code if you need help developing it.

Upvotes: 7

Related Questions