Flexbox
A one dimensional layout system: row or column.
Works on children
Many of the flexbox properties are applied to the parent element, but affect the child elements.
This is different from many other CSS properties that directly affect the selected element.
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-between;
}
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
HTML
<ul>
<li>
<h2>Unicorns</h2>
<p>Mythical horse-like creatures with a large single horn protruding from the centre of their heads.</p>
<a href="#">More about unicorns</a>
</li>
<li>
<h2>Narwhals</h2>
<p>Whales with a single horn protruding from their head.</p>
<a href="#">More about unicorns</a>
</li>
</ul>
li {
display: flex;
flex-direction: column;
justify-content: space-between;
}
p {
margin-bottom: auto;
}