Flexbox · Web Design 1 · Learn the Web

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>

CSS

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

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>

CSS

li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
p {
  margin-bottom: auto;
}

Works on children

Videos & tutorials