Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 491
ahstro Avatar asked Dec 07 '16 13:12

ahstro


People also ask

How do you wrap elements in Flex?

If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.

What does the flex-wrap wrap rule do?

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

What can I use instead of flex-wrap?

An alternative to using flex-wrap: wrap would be to switch from flex-direction: row to column using a media query. Show activity on this post. An other alternative to flex is to remove display: flex on the container and use display: inline-block on all item images.

How do you adjust the flex-wrap in CSS?

The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.


1 Answers

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.

like image 51
Lima Chaves Avatar answered Sep 23 '22 12:09

Lima Chaves