using flexbox to align elements in a row

flexbox is so good at aligning elements, yes i used to use float left and then percentages and overflow auto or hidden the surrounding div, but now with flex you can just do something like this.

HTML

<div class='flex-row'>
<img src='http://kruxor.com/images/borat_thumbnail.jpg'>
<h2>A Title Tag</h2>
<p>something else</p>
</div>

<div class='flex-row flex-row-reverse'>
<img src='http://kruxor.com/images/borat_thumbnail.jpg'>
<h2>A reversed flex row</h2>
<p>something else</p>
</div>

CSS

.flex-row-reverse {
flex-direction:row-reverse;
}
.flex-row-reverse * {
margin-left:2%;
}
.flex-row {
display:flex;
flex-direction:row;
align-items:center;
}
.flex-row * {
margin-right:2%;
}
.flex-row *:last-child {
margin-right:0%;
}
.flex-row img {
height:64px;
border-radius:5px;
overflow:hidden;
}
.flex-row h2,
.flex-row p
{
justify-content:center;
display: flex;
flex-direction: column;
}

Demo

A Title Tag

something else

A reversed flex row

something else

Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹