Flex display items 3X3 row top, center, bottom

November 29, 2022

I am trying to create a flex-box container following display:

I was able to do:

.garden {
  width: 500px;
  height: 500px;
  background: #CCC;
}
.flower {
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}
.row {
  display: flex;
}
.row:first-child {
  justify-content: space-between;
}
.row:nth-child(2){
  justify-content: center;
}
.row:last-child {
  justify-content: space-around;
}

<div class="garden">
  <div class="row">
    <div class="flower red">Red</div>
    <div class="flower green">Green</div>
    <div class="flower yellow">Yellow</div>
  </div>
  <div class="row">
    <div class="flower red">Red</div>
    <div class="flower green">Green</div>
    <div class="flower yellow">Yellow</div>
  </div>
  <div class="row">
    <div class="flower red">Red</div>
    <div class="flower green">Green</div>
    <div class="flower yellow">Yellow</div>
  </div>
</div>

How should I align first row to the top, 2nd row to middle center and last row to bottom?

>Solution :

You could set also the .garden element as a flexbox container, with column direction and proper spacing:

.garden {
  width: 500px;
  height: 500px;
  background: #CCC;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.flower {
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}
.row {
  display: flex;
}
.row:first-child {
  justify-content: space-between;
}
.row:nth-child(2){
  justify-content: center;
}
.row:last-child {
  justify-content: space-around;
}

<div class="garden">
  <div class="row">
    <div class="flower red">Red</div>
    <div class="flower green">Green</div>
    <div class="flower yellow">Yellow</div>
  </div>
  <div class="row">
    <div class="flower red">Red</div>
    <div class="flower green">Green</div>
    <div class="flower yellow">Yellow</div>
  </div>
  <div class="row">
    <div class="flower red">Red</div>
    <div class="flower green">Green</div>
    <div class="flower yellow">Yellow</div>
  </div>
</div>