CSS Flexbox

One of the most useful properties I learned while studying CSS was display: flex (a.k.a. — flexbox). Modern websites typically have easily readable and navigable layouts. Webpages are no longer line after boring line of text and elements. Instead there are levels, zones, and complex arrangements that make the site more organized and usable. Many of these popular layouts are achieved using Flexbox. In this article, we’re going to discuss what flexbox is, how to make use of it, and common issues you may run into trying to implement it.

CSS Display

We can’t talk about Flexbox without first discussing CSS Display. CSS Display is a property that allows developers to manipulate how elements are displayed on the page (shocking I know). This makes more sense when you consider what your options are. Display has 5 total options, including flex and grid. In this article we’ll discuss flexbox (display:flex;), but we’ll only briefly discuss grid.

In the image below, we have parent containers (the gray boxes) and child elements (the orange blocks). The first 3 properties we’ll discuss are applied to child elements.

Display: block is the default option. Whenever you add an element to a page, without having to type anything extra, the element will have this property. In this scenario, each element receives a full row of space, meaning subsequent elements…