How to use flexbox to align two under one

by Wayneio   Last Updated October 10, 2019 20:26 PM

How do I use flexbox to align one box at the top with two under like on my screenshot

enter image description here

So far I can align three in a row with this

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div className="flex-container">
    <div />
    <br />
    <div />
    <div />
</div>

I tried with a br but it did not work

Tags : html css flexbox


Answers 2


Better to do this with grid:

.flex-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 100px;
}

.flex-container>img {
  justify-self: center;
  border-radius: 50%;
}

.flex-container>img:nth-child(1) {
  grid-column: 1/3;
}
<div class="flex-container">
  <img src="http://placekitten.com/200/200" />
  <img src="http://placekitten.com/200/200" />
  <img src="http://placekitten.com/200/200" />
</div>

symlink
symlink
October 10, 2019 20:25 PM

Just have two containers one with all the rows, and then row containers where all of the items will be distributed evenly.

.outer { 
  display: flex; 
  flex-direction: column;
}
.row {
  flex: 1 0 100%;
  display: flex; 
  flex-direction: row;
}
.row div {
  flex: 1 1 auto;
  border: 1px solid #ccc;
  background: #eee;
  padding: 5px;
}
<div class="outer">
  <div class="row">
    <div>1</div>
  </div>
  <div class="row">
    <div>2</div>
    <div>3</div>
  </div>
</div>

Daniel Gimenez
Daniel Gimenez
October 10, 2019 20:25 PM

Related Questions


Updated September 06, 2016 08:11 AM

Updated October 10, 2017 05:26 AM

Updated August 08, 2015 19:11 PM

Updated March 24, 2017 00:26 AM

Updated March 24, 2017 11:26 AM