Standard for space-between is such an arrangement of elements. The last element is always on the right. If in the last line there are 3 elements, then between them according to space-between is also an equal distance, but it differs from the distance between the blocks above the line.

Standard with space-between

How can I make this look with flexbox ? I still need to make an equal distance between the blocks (because I don’t know in advance the width of the container / screen width), I don’t know the number of blocks that will be, I only know the size of these blocks (the width can be 2, 3, 4 things.).

enter image description here

Those. There are blocks, for example, 4 pieces in a row and there is such a distance between them, how to make it so that in the last line, if the blocks are not 4 pieces. did the distance between them still be the same as in the rows above?

  • Add your code here - Daniel

2 answers 2

 .column { border: 2px solid black; width: 200px; height: 200px; margin: 15px; } .BigBlock { display: inline-block; } .block { display: flex; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link rel="stylesheet" type="text/css" href="css/style2.css"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="BigBlock"> <div class="block"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="block"> <div class="column"></div> <div class="column"></div> </div> <div class="block"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div> </body> </html>

    Use flex-basis to split into blocks.

    flex-basis example with markup

     .container { display: flex; flex-wrap: wrap; border: 1px solid black; } .block { height: 200px; flex-basis: 25%; display: flex; align-items: center; justify-content: center; outline: 1px solid black; } .item { height: 100px; border: 10px solid black; width: 100px; } 
     <div class="container"> <div class="block"> <div class="item"> </div> </div> <div class="block"> <div class="item"> </div> </div> <div class="block"> <div class="item"> </div> </div> <div class="block"> <div class="item"> </div> </div> <div class="block"> <div class="item"> </div> </div> <div class="block"> <div class="item"> </div> </div> <div class="block"> <div class="item"> </div> </div> </div>

    For small resolutions, use the media query to create adaptability, if you need it.

    Using Grid s

    In general, I would recommend using the grid to create this kind of markup, because it is a more flexible and convenient solution.

    For example, you can specify how many elements you need in the grid-template- columns: repeat(4, 1fr) and what gaps you need grid-gap: 10px , which you cannot do on the flexbox or you can, but not so easily.

    Grid example

     * { box-sizing: border-box; } .wrapper { border: 2px solid black; border-radius: 5px; } .wrapper>div { border: 2px solid black; border-radius: 5px; background-color: white; padding: 1em; height: 100px; } .wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } 
     <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>