CSS CSS Flexbox Layout Flexbox Properties Wrapping Flex Items

Kafe Hezam
Kafe Hezam
10,873 Points

Why when there's no padding on the items the items fit in the container??

1- Why when I don't give padding to the items the items fit in the container?

2- When I give the items width the items fit perfectly in the container?

I really appreciate if you can answer these question :)

  • {

box-sizing: border-box;

}

body {

font-size: 1.35em;

font-family: 'Varela Round', sans-serif;

color: #fff;

background: #e8e9e9;

padding-left: 5%;

padding-right: 5%;

}

.container {

padding: 10px;

background: #fff;

border-radius: 5px;

margin: 45px auto;

box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);

display: flex;

}

.item {

color: #fff;

/* padding: 15px;/ / no padding */

margin: 5px;

background: #3db5da;

border-radius: 3px;

width: 200px;

}

Steven Parker
Steven Parker
176,634 Points

This appears to be a duplicate of your previous question (but without the benefit of code formatting in the original).

2 Answers

Dmitry Polyakov
Dmitry Polyakov
4,411 Points

1- Why when I don't give padding to the items the items fit in the container?

It depends on what padding you will give the items. Let's say if you give them 130px padding, they won't fit into the container because total width of the items exceeds the width of the container. They will stretch in 1 row outside of the container. To fix that you also need to set up a flex-wrap property on a container itself. By default it's nowrap. It means that elements inside the container stay in one row and don't wrap to the next row. If you set up flex-wrap: wrap; on a container, then no matter how big padding you'll give to the items they will stay inside the container go down to the second row within the container.

/* ================================= Flexbox ==================================== */

{ box-sizing: border-box;

}

body {

font-size: 1.35em;

font-family: 'Varela Round', sans-serif;

color: #fff;

background: #e8e9e9;

padding-left: 5%;

padding-right: 5%;

}

.container {

padding: 10px;

background: #fff;

border-radius: 5px;

margin: 45px auto;

box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);

display: flex;

justify-content: space-around; flex-wrap: wrap;

}

.item {

color: #fff;

padding: 135px;

margin: 5px;

background: #3db5da;

border-radius: 3px;

/width: 200px;/

}

2- When I give the items width the items fit perfectly in the container? Almost the same as the first point. Depends on what width you give the items and how flex-wrap property is set up on a container.

Kafe Hezam
Kafe Hezam
10,873 Points

Steven Parker,

I reposted the question because I never gotten an answer.

Thank you so much for the help, Dmitry!