2

The last container/s should be to the left side. but it'll puts all into the center! I want to: move the last container/s into the left but others above into the center of wrapper.
enter image description here 

 .wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 10px;
            flex-direction: row;
            align-items: stretch;
            justify-content: space-evenly;
            width: 200px;
            height: 100px;
            resize: horizontal;
        }

        .container {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: stretch;
            justify-content: space-between;
            align-content: space-between;
            flex: none;
            width: 50px;
            height: 50px;
            text-align: center;
            max-width: 100%;
            padding: 2px;
            border: 1px solid rgb(95 170 227 / 78%);
            background: rgb(0, 145, 255);
            color: white;
        }
<div class="wrapper">
        <div class="container">
            1
        </div>
        <div class="container">
            2
        </div>
        <div class="container">
            3
        </div>
        <div class="container">
            4
        </div>
        <div class="container">
            5
        </div>
    </div>


Note: if my container/s has a single one, also put that one or two into the left side. and I don't want to remove (align-items: stretch;) because if I do that added extra space!

Aso
  • 603
  • 7
  • 16

2 Answers2

0

Updated Using CSS Grid:

.container {
  width: 200px;
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-auto-rows: 50px;
  grid-auto-flow: row;
  justify-content: space-evenly;
  gap: 10px 10px;
  background: yellow;
  padding: 5px
}

.box {
  background-color: #ccc;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
-1

In order to reach what you're saying, keeping the align of the first row centered and spaced and the second row all on the left,you can simply add this to your css:

.container:nth-child(5){
    margin-right: auto;
}

It's pretty basic and un-elegant but does the trick. Still, don't know what you need to have on your page, but i really think Sai Manoj answer is the most good looking answer

Giuliano Gostinfini
  • 112
  • 4