CODEWITHSUNDEEP
htmlcssflexbox
Wayneio
Wayneio

Reputation: 3566

How to use flexbox to align two under one

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

Upvotes: 0

Views: 75

Answers (3)

IvanS95
IvanS95

Reputation: 5732

Just providing a different approach if you want a single container; you would just have to target the right elements and apply the right flex properties so the behave how you need them to.

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex div:first-child {
  width: 100%;
  margin-bottom: 20px;
}

.flex div:not(:first-child) {
  flex: 1 0 50%;
}

img {
  margin: 0 auto;
  display: block;
}
<div class="flex">
  <div>
    <img src="https://via.placeholder.com/150" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150" />
  </div>
</div>

Upvotes: 1

Tomi Adebanjo
Tomi Adebanjo

Reputation: 16

You can use flex-wrap

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.box1 {
  width: 100%;
  display: flex;
  justify-content: center;
}
<div class="container">
  <div class="box1">
    <div>
      Box 1
    </div>
  </div>
  <div>Box 2</div>
  <div>Box 3</div>
</div

Upvotes: 0

symlink
symlink

Reputation: 12209

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>

Upvotes: 1

Related Questions