CSS flex baby gutters with stock

Question

I have a gallery layout and I want to split each box with a margin. The problem is that the last box in each row does not align with the grid; there is still room on the right side, how can I do this without using a gasket? (which will make me add another div shell)

* { box-sizing: border-box; margin: 0; padding: 0; } ul { list-style-type: none; } .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .align-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .space-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .container { max-width: 1000px; margin: 0 auto; height: 100%; padding: 0 1em; border: 1px solid; } nav { background: #464646; height: 70px; } .box { background: lightblue; padding: 1em; -webkit-box-flex: 0; -webkit-flex: 0 0 calc(50% - 1em); -ms-flex: 0 0 calc(50% - 1em); flex: 0 0 calc(50% - 1em); text-align: center; margin-right: 1em; margin-bottom: 1em; } 

 <nav> <div class="container flex align-center space-between"> <ul> <li>Logo</li> </ul> <ul> <li>Home</li> </ul> </div> </nav> <div class="container"> <header> <h1>Header</h1> </header> </div> <div class="container"> <div class="gallery flex"> <div class="box">BOX 1</div> <div class="box">BOX 2</div> <div class="box">BOX 3</div> </div> </div> 

Note: I cannot use flex grow: 1 because I do not always have two lines in a row.

I can’t use the space between them, because the grid is dynamic, for example, if the field width is 33.33% and you have five boxes, the second row will be with two cells on the left and the second on the right side.

Answer 1

Method # 01:

Add the following css to parnet and child, respectively (this method will work only when there are only 2 blocks in a row):

 /* For Parent Element */ .flex { justify-content: space-between; } /* For Child Element */ .flex-child { flex: 0 0 calc(50% - 0.5em); } 

 * { box-sizing: border-box; margin: 0; padding: 0; } ul { list-style-type: none; } .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .align-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .space-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .container { max-width: 1000px; margin: 0 auto; height: 100%; padding: 0 1em; border: 1px solid; } nav { background: #464646; height: 70px; } .box { background: lightblue; padding: 1em; -webkit-box-flex: 0; -webkit-flex: 0 0 calc(50% - 0.5em); -ms-flex: 0 0 calc(50% - 0.5em); flex: 0 0 calc(50% - 0.5em); text-align: center; margin-bottom: 1em; } 

 <nav> <div class="container flex align-center space-between"> <ul> <li>Logo</li> </ul> <ul> <li>Home</li> </ul> </div> </nav> <div class="container"> <header> <h1>Header</h1> </header> </div> <div class="container"> <div class="gallery flex space-between"> <div class="box">BOX 1</div> <div class="box">BOX 2</div> <div class="box">BOX 3</div> <div class="box">BOX 4</div> <div class="box">BOX 5</div> <div class="box">BOX 6</div> <div class="box">BOX 7</div> <div class="box">BOX 8</div> <div class="box">BOX 9</div> </div> </div> 

Method # 02:

• Add a brand on both sides of the children.
• Extend the parent element left / right with the same amount of negative field.

Note : add overflow: hidden to the parent .gallery element if horizontal scrolling appears.

 * { box-sizing: border-box; margin: 0; padding: 0; } ul { list-style-type: none; } .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -0.5em; } .align-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .space-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .container { max-width: 1000px; margin: 0 auto; height: 100%; padding: 0 1em; border: 1px solid; } nav { background: #464646; height: 70px; } .box { background: lightblue; padding: 1em; -webkit-box-flex: 0; -webkit-flex: 0 0 calc(50% - 1em); -ms-flex: 0 0 calc(50% - 1em); flex: 0 0 calc(50% - 1em); text-align: center; margin: 0 0.5em 1em; } 

 <nav> <div class="container flex align-center space-between"> <ul> <li>Logo</li> </ul> <ul> <li>Home</li> </ul> </div> </nav> <div class="container"> <header> <h1>Header</h1> </header> </div> <div class="container"> <div class="gallery flex"> <div class="box">BOX 1</div> <div class="box">BOX 2</div> <div class="box">BOX 3</div> </div> </div> 

Answer 2

Check out the picture below. his decision

Use CSS

window: 5th child (2n + 1) {left margin: 0px;}

 * { box-sizing: border-box; margin: 0; padding: 0; } ul { list-style-type: none; } .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .align-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .space-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .container { max-width: 1000px; margin: 0 auto; height: 100%; padding: 0 1em; border: 1px solid; } nav { background: #464646; height: 70px; } .box { background: lightblue; padding: 1em; -webkit-box-flex: 0; -webkit-flex: 0 0 calc(50% - 1em); -ms-flex: 0 0 calc(50% - 1em); flex: 0 0 calc(50% - 1em); text-align: center; margin-left: 2em; margin-bottom: 1em; } .box:nth-child(2n+1){ margin-left:0px; } 

 <nav> <div class="container flex align-center space-between"> <ul> <li>Logo</li> </ul> <ul> <li>Home</li> </ul> </div> </nav> <div class="container"> <header> <h1>Header</h1> </header> </div> <div class="container"> <div class="gallery flex"> <div class="box">BOX 1</div> <div class="box">BOX 2</div> <div class="box">BOX 3</div> </div> </div> 

Answer 3

Just change two things: -

• Remove margin-right: 1em; style from class box.
• Add a new style justify-content: space-between; in your flex class.