user

Dev-Mo

10 Feb 2022

Flex Box last column break to the next row

HTML & CSS

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?
 

 

Comments

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 web-brackets.com