Good day! I'm learning to use Flexbox, so I decided to make such a layout, and I can not figure out how to align the elements on the left side. enter image description here About the structure:

<div> //display: flex <ul> //display: flex, justify-content: space-around, flex-wrap; wrap; <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>

But justify-content , aligns as in the 2nd picture, but I would like to, as the 1st, is it possible? Cgfcb, Thank you!

    2 answers 2

    In fact, everything is simple, you can create additional <div> tags inside <li> . And the <li> tags themselves should be set to the size of the corresponding number of blocks that are needed in the line, in this case for 3 it will be 33%. Well and accordingly the parent <ul> block should be set justify-content: flex-start; Implementation:

     li{ width: 33%; height: 100px; display: flex; align-items: center; justify-content: center: } li div { width: 50px; height: 50px; border: 1px solid red; } ul { display: flex; flex-wrap: wrap; justify-content: flex-start; } 
     <div> <ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> </ul> </div>

      Judging by the same question on Toster, you need to have the 5th block drag on if he is the last and if 6 of them became the same, well, this is the implementation

       header { width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 3px; } main { display: flex; } aside, article { border-radius: 4px; } aside { display: inline-flex; border: 1px solid red; width: 40%; } article { display: inline-flex; border: 1px solid blue; width: 59%; margin-right: 1%; min-height: 300px; justify-content: initial; align-items: flex-start; flex-wrap: wrap; } .item { width: 150px; height: 150px; border: 1px solid orange; margin: 10px; } .item:nth-last-child(5n+1) { /*чётные*/ width: 321px; order: 5; } .item:nth-child(5n+1) { /*чётные*/ width: 150px; order: ; } 
       <header></header> <main> <article> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </article> <aside></aside> </main> <footer></footer>

      This is a sandbox for experiment.