user image

Dev-Mo
Published in : 2022-02-10

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 Date : 2022-02-10

Best answers

11

Best answers

11

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%;
}

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to horizontally align to the centre a li inside an ul?
Publish date: 2022-03-04 | Comments: 2

Tag: HTML & CSS

min-height is not working on td or th
Publish date: 2021-10-20 | Comments: 1

Tag: HTML & CSS

How do custamize my button to give it a bubble look using CSS?
Publish date: 2022-03-04 | Comments: 0

Tag: HTML & CSS

Do I have to upload the sass files or just the CSS file?
Publish date: 2022-02-11 | Comments: 1

Tag: HTML & CSS

Is OOCSS still a good CSS architecture in 2022?
Publish date: 2022-02-08 | Comments: 2

Tag: HTML & CSS

Sticky header goes behind the Images
Publish date: 2022-02-10 | Comments: 1

Tag: HTML & CSS

How to separate the background into three divs that can be flipped?
Publish date: 2022-02-12 | Comments: 1

Tag: HTML & CSS

Invalid CSS after : expected expression was - SASS error
Publish date: 2022-02-13 | Comments: 1

Tag: HTML & CSS