What a busted water heater and wet boxes taught me about flexbox.

Our water heater broke. I walked in to the garage and heard running water. Checked the house faucets off, toilet not running, Checked outside. nope hose off. recheck garage still hear water, maybe it just noise as gas heats the water. Walk over and there's water in floor.

The Water heater was leaking from top. There are puddles on the floor and through the carpet. We have some old carpet on the floor so it's not cold bare floor. It now has a stream through it.

The boxes stored on the carpet have wicked up water. Boxes are wet and soggy. So are some of the contents. There were a few paperbacks and some Jurassic Park dinosaurs in those boxes. The books are water damaged but most will dry out.

These boxes are no longer sturdy they are flexible.

These boxes = flexbox. Which gave me a click bait LinkedIn like title and an excuse to write about flexbox.

Flexbox

In CSS flexbox is used to arrange items horizontally or vertically in either rows or columns. The items will flex to fill the space in the container.

To start using flex add display:flex to the parent flex-container that you want to hold your child elements.

.flex-container {
  display: flex;
}

<flex-container>
  <div class="box"></div>
</flex-container>

Then decide if you want row or columns with flex-directionoptions are row, row-reverse, column, and column-reverse. Row lines things up left-to-right, row-reverse lines them right-to-left. You might guess Column and column-reverse are similar but top-to-bottom and bottom-to-top respectively.

.flex-container {
  display: flex;
  flex-direction: row;
}

<flex-container>
  <div class="box">
   <div class="book">Book 1</div>
   <div class="book">Book 2</div>
   <div class="book">Book 3</div>
  </div>
</flex-container>

Justify Content

So how to arrange things horizontally? Use justify-content: to align the books in your boxes. Here you have several options.

• justify-content: center - Aligns items in the center of the container.
• justify-content: space-around - Places space at the front and end of the container plus in between each item.
• justify-content: space-between - Pushes items to the front and end of the container and place space evenly between the items.
• justify-content: flex-start (default) - Aligns at the start of the container.
• justify-content: flex-end - Aligns at end of container.

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}

This image shows the books centered in the box.

This image shows the books with space-around applied. There are gaps between the start and end of the box.

This image shows the books with space-between applied. Books are pushed to front, center, end of box with space between them.

This image shows flex-start. All the books are shoved to the start or left side of the box.

This images shows flex-end. All the books are shoved to the end or right side of the box.

Alignment

Use align-items to vertically align things inside the parent container.

• align-items: flex-start - Aligns at the top of the container
• align-items: flex-end - Align at bottom of container
• align-items: center - Puts items in the vertical center
• align-items: baseline - Aligns along the baseline inside each item.
• align-items: stretch (default) - Stretches items to fill the height of the container.

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: center;
}

Illustrated with CSS. These images were made using CSS.

Conclusion

This is just an introduction to flexbox check out Wes Bos' What the flex box or MDN Web Docs for more in depth explanations.