10 Feb 2022

Flex Box last column break to the next row


I have a section which contains 3 cards. I gave the section tag a display flex property accompanied by a flex wrap. The issue is when I go into the tablet size the third card goes to the next line on the left side. I want it to be centered to be a little bit more symmetrical design. Can anyone help me with that?



Joseph Morgan

10 Feb 2022

Best Answer

best answer

You can set width: 33.3%; to each column, this is the best way & also add flex: 1; to the wrapper div like the code below

.main_div {
 display: flex;
 flex: 1;
.main_div .column {
 width: 33.3%;

© 2023 Copyrights reserved for