mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-23 02:36:11 +02:00
955 B
955 B
layout, title, description, keywords
layout | title | description | keywords |
---|---|---|---|
layouts/post.njk | Same height columns | Create same height columns with CSS flexbox | css flexbox, css layout, css same height columns |
HTML
<div class="same-height-columns">
<!-- Column -->
<div class="same-height-columns__column">
<!-- Cover -->
...
<!-- Content -->
<div class="same-height-columns__content">
...
</div>
<!-- Button sticks to the bottom -->
...
</div>
<!-- Repeat with other columns -->
...
</div>
CSS
.same-height-columns {
display: flex;
}
.same-height-columns__column {
flex: 1;
/* Space between columns */
margin: 0 8px;
/* Layout each column */
display: flex;
flex-direction: column;
}
.same-height-columns__content {
/* Take available height */
flex: 1;
}
{% demo %}{% include "covers/same-height-columns.njk" %}{% enddemo %}