39

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

dontexist
  • 5,252
  • 4
  • 27
  • 51
  • not unless you use a bit of js too – Pete Dec 07 '16 at 14:00
  • AFAIK, there are no selector modifiers and/or pseudo-classes to target elements with flex properties, so I would say no. But you can probably get better help if you explain what you want to do and what happens, because targeting wrapped elements may not be what you need to do. – Joum Dec 07 '16 at 14:00
  • If the flex items width is known you can, using CSS ... http://stackoverflow.com/questions/41021890/in-a-row-of-flex-items-make-middle-item-wrap-first ... if not, a script is needed ... and btw, if this linked answer work, I vote to close as duplicate, so notify me if it does – Asons Dec 07 '16 at 16:31
  • In CSS, a container has no way of knowing when a child wraps. One workaround is to use media queries, but that transfers control from the browser to you. http://stackoverflow.com/a/37413580/3597276 – Michael Benjamin Dec 07 '16 at 17:24
  • Possible duplicate of [Targeting flex items on the last row](https://stackoverflow.com/questions/42176419/targeting-flex-items-on-the-last-row) – Pikamander2 Aug 30 '18 at 07:00

2 Answers2

5

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.

Lima Chaves
  • 76
  • 3
0

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.

YATIN GUPTA
  • 916
  • 9
  • 17