CODEWITHSUNDEEP
cssflexbox
NoDachi
NoDachi

Reputation: 934

Flexbox - Same height columns inside row

Is it possible to make the columns inside each row the same height as each other? For example to make both the blue headings the same size and so on

Apologies if this has been asked before but I couldn't see an answer to this when searching.

 <div class="row">
    <div class="column">
        <h2>heading</h2>
        <div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, nesciunt.</div>
        <div class="block-2">Lorem ipsum dolor sit amet.</div>
      </div>

      <div class="column">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</h2>
        <div class="block-1">Lorem ipsum</div>
        <div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quam praesentium suscipit laudantium illo voluptatibus eligendi, est exercitationem commodi reiciendis.</div>
      </div>
    </div>

 .row {
  display: flex;
}

.column {
  display: flex;
  flex-direction: column;

  * {
    flex: 1;
  }
}

https://jsfiddle.net/vdLaq7t1/

Upvotes: 1

Views: 52

Answers (2)

Gerard Reches
Gerard Reches

Reputation: 3154

You can do it with align-items: stretch (which is the default value for align-items), but you should redesign your HTML structure.

.column {
  background: silver;
}

h2 {
  background: cornflowerblue;
  margin: 0;
}

.block-1 {
  background: tomato;
}

.block-2 {
  background: brown;
}

.row {
  display: flex;
  
  /* Not required because it's already the default value */
  align-items: stretch;
}

.row > *{
  flex: 1;
}
<div class="row">
    <h2>heading</h2>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</h2>
</div>
<div class="row">
    <div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, nesciunt.</div>
    <div class="block-1">Lorem ipsum</div>
</div>
<div class="row">
    <div class="block-2">Lorem ipsum dolor sit amet.</div>
    <div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quam praesentium suscipit laudantium illo voluptatibus eligendi, est exercitationem commodi reiciendis.</div>
</div>

Flexbox works in both X and Y axis. When you use flex-direction: column you are changing the main axis from X to Y. You can manage the main axis with the justify-content property, and the secondary axis with the align-items property.

The thing is that align-items work with the stretch value, but justify-content cannot.

So if you want the height to be the same (Y axis), you need to stretch it with align-items: stretch, but align-items only works in the secondary axis, so the main axis needs to be the X axis in this case, and that means that you cannot use flex-direction: column in order to make them the same height.

Upvotes: 3

Narek-T
Narek-T

Reputation: 1928

It can be done with many technics. For example, you can place 6 columns in 1 row.

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex-basis: 70%;
}

.column.sm {
  flex-basis: 30%;
}

.blue {
  background: blue;
}

.silver {
  background: silver;
}

.cornflowerblue {
  background: cornflowerblue;
}
<div class="row">
  <div class="column blue sm">heading</div>
  <div class="column blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</div>
  <div class="column silver sm"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quaerat, facilis qui placeat! Voluptatem reprehenderit similique rerum officia iste error ab, animi nobis quaerat culpa possimus, nisi laboriosam aliquid hic.</div>
  <div>Tempora eius eaque harum, temporibus sequi porro, minima quia, necessitatibus amet nisi unde reiciendis iure ipsa, facilis rerum qui dolores doloribus sed voluptatum! Dicta at, qui, exercitationem molestiae voluptas natus.</div></div>
  <div class="column silver">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto nemo ipsum voluptates mollitia eius enim, esse voluptatibus eaque doloremque vel asperiores quos unde similique rerum perspiciatis iure, ipsam eum soluta.</div>
  <div class="column cornflowerblue sm">lorem</div>
  <div class="column cornflowerblue"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore enim recusandae veniam optio delectus doloremque maiores quidem, impedit vel reprehenderit quam vitae, fugit atque assumenda molestiae debitis laboriosam blanditiis fugiat.</div>
  <div>Excepturi ea minima accusantium delectus totam quae fugiat, ex eos inventore deleniti odit, commodi eveniet, eum ullam consectetur ipsa quasi odio similique. Doloribus tempore accusantium soluta, id deserunt maxime accusamus.</div></div>
</div>

Upvotes: 0

Related Questions