CODEWITHSUNDEEP
htmlcssflexbox
Hikari
Hikari

Reputation: 3947

Align heights with Flexbox

Im using http://demo.agektmr.com/flexbox/ as reference, with following config:

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
</div>

.box {
    display: flex;
    flex-flow: row nowrap ;
    justify-content: space-around;
    align-content: space-between;
    align-items: center;
}

Then I set different height for each box. They got vertically aligned in middle, but keeping their set heights.

How can I use flexbox so that boxes have flexible heights and all them fit to the biggest one?

A practical example is a basic website with 2 sidebars and a content column, and they have dynamic content and should all have same height.

Upvotes: 3

Views: 9349

Answers (1)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13556

According to this article, changing align-items: center; to align-items: stretch; will do the trick.

Upvotes: 5

Related Questions