CODEWITHSUNDEEP
htmlcssflexbox
AndiLeni
AndiLeni

Reputation: 500

Flexbox centeres items with same height

I ceated a flexbox grid and tried to make each item the same hight which is not working. Basically all those blue containers shall have the same height.

HTML:

<div class="outer">

    <div class="item">
        <h1>Contact</h1>
    </div>

    <div class="item">
        <h3>Mail:</h3>
        <a>[email protected]</a>
        <br>
        <a>PGP</a>
    </div>

    <div class="item">
        <h3>Telegram:</h3>
        <a>www.t.me/doe</a>
    </div>

</div>

CSS:

.outer {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100vh;
width: 100vw;
}
.item {
background-color: aqua;
flex: 1;
}

Photo: enter image description here

Upvotes: 0

Views: 50

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

I would add another element that is the only flex child of .outer, centered vertically, with the background applied to it, then make that element the flex parent that holds your 3 sections and aligns them.

.outer, .inner {
  display: flex;
  align-items: center;
}
.outer {
  height: 100vh;
  width: 100vw;
}
.inner {
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 0 0;
  background-color: aqua;
}

.item {
  flex: 1;
}
<div class="outer">
  <div class="inner">
    <div class="item">
      <h1>Contact</h1>
    </div>
    <div class="item">
      <h3>Mail:</h3>
      <a>[email protected]</a>
      <br>
      <a>PGP</a>
    </div>
    <div class="item">
      <h3>Telegram:</h3>
      <a>www.t.me/doe</a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions