0
281
ViewsHow to align items in a line across columns
Using flexbox this is what I have
.flexer{
display:flex;
margin:1px;
justify-content: space-around;
}
.flexer .column{
border: 1px solid #ebebeb;
}
h1.title{
font-size: 2.0rem;
}<div class="flexer">
<div class="column">
<h1 class="title">
Short
</h1>
<p>
Body 1
</p>
</div>
<div class="column">
<h1 class="title">
Medium
</h1>
<p>
Body 2
</p>
</div>
<div class="column">
<h1 class="title">
Very very long title that ends up spanning multiple lines
</h1>
<p>
Body 3
</p>
</div>
<div class="column">
<h1 class="title">
Short
</h1>
<p>
Body 4
</p>
</div>
</div>
Regardless of the title (since they're picked from database) I want the body to start at the same across the columns
I want it to look something like this:
·
Juan Pablo Isaza
1 answers
Answer question0
You could add flex display to columns and justify the content with space-between:
.column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
·
Juan Pablo Isaza
Report
Answer question