Click here to Skip to main content
15,120,478 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have a div witch contain different element
when i use the use the wrap property in the div the element wrap but i could not fix how many element i get in every row
for example
here i have a display who look like this with 4 element at every row
element element element element
element element element element
element element element element
element element

i want the wrap always to happen after the third element to have a display who look like this one
element element element
element element element
element element element
element element

could i do this ?

What I have tried:

i put a flex and the flex-wrap property at the div
Posted
Updated 18-Jan-21 0:02am
Comments
Gerry Schmitz 17-Jan-21 9:03am
   
Use a smaller "column" width (so it wraps sooner).
aymen991 17-Jan-21 12:49pm
   
it's not a solution because if the screen became bigger the result will be different

1 solution

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Flexbox | CSS-Tricks[^]

If you want to have three elements per row, specify a flex basis of around 33%.

NB: If you have margins or gaps between the child items, you will need to decrease the flex basis to account for those. It's usually easier to apply padding to the child items instead.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900