How do i acheive this in flexbox without creating two rows of div
lets say i have an array of 7 elements, the max no of elements permited in a row is 4 and the rest should go in row(2). These remaining 3 elemts should start in the center (example image ).
How can i acheive this?
8 Replies
use grid ?
yes i tried with grid, created 6 colums and each box spanning 2coloumns,
since im using tailwind and react this is getting confused really quick
Then don't use tailwind for this part
don't use tailwind period π
https://codepen.io/avinash-tallapaneni/pen/oNOOoEq
this is working but i placed it in center
youll want to do some flex-hacking if you dont want to use grid (which would be easier). make a breakpoint where the container is wide enough to hold three wide so the other two will wrap. in your codepen youre using 7 boxes and in your screenshot there are five. this video may help (the flex part to create a 'breakpoint') and the codepen is linked in the vid description
https://youtu.be/LEkFckg7sfw?si=ZpFAm6LaXS_e2_nW
but grid would be a lot simpler
Kevin Powell
YouTube
Use this instead of media queries or container queries
Media queries are a bit limited in how they work, and while container queries go a really long way in solving a lot of those limitations, there are intrinsic patterns that we can follow that allow us to do things that neither one of them can do.
The setup is a bit strange and can look complex, but, in my opinion, it's also 100% worth it!
π Lin...
You can set the children of the flex container to have a flex-basis of 25%, if you add a gap make sure to take it away from the 25% like so,
calc(25% - gap), otherwise the gap will take up space not allowing the desired amount of children on one row. Then on the flex container put justify-content: center and add a flex-wrap: wrap. That should do it for you.