Flexbox (Part 1) — Setup and Fundamental Concepts

Understanding the basics of Flexbox

5 min readJan 6, 2023

Live dev notes taken throughout the What the Flexbox course by Wesbos — What the Flexbox

In this series, we’ll be looking at flexbox from the ground up by working through simple sandbox examples to visually understand how it works.
In this post, we’ll be setting up our working environment to use flexbox, as well as the fundamental concepts we’ll be referring to throughout the series.

Setting up our working environment

An ideal working environment for implementing sandbox projects is one that is able to allow us to reload the browser with our changes (without having to rebuild or restart the server manually).

Tools

Firefox (browser, Chrome will also work fine)
Node.js — currently using v16.15.1
Terminal — currently using Command Prompt via Windows Terminal
Code Editor — currently using VSCode

Starter Files

Can be found on Github

Browser Sync — Setup

Without have to repeat / duplicate content, I’ve included a link to the same setup process used in the CSS Grid Series.

Fundamental Concepts in Flexbox

There are effectively two fundamental concepts that we’ll need to know about in order to use flexbox:

Flex container
Flex item

Base Code Example

Each example we’ll be walking through in this series will follow the exact same base HTML and CSS.

<!-- index.html -->

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
</div>

Throughout the series, we’ll always be starting with a div of class “container” nested with divs of class “box”. Each box will have its own custom class (box1, box2, etc) so that we may pull out specific elements and style them.

The div container is effectively the flex container and each nested div is known as a flex item

The items aren’t limited to divs, they can be any tag element (image, section, paragraph, etc)

Classes have been assigned to each div so that they can be styled (as shown below) — but is not necessary for understanding flexbox

/* style.css */

/* CSS Normalize - not included in snippet but can be found in Github repo */

/* Box-sizing border-box */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* Some default styles to make each box visible */
.box {
  color:white;
  font-size: 100px;
  text-align: center;
  text-shadow:4px 4px 0 rgba(0,0,0,0.1);
  padding:10px;
}

/* Colours for each box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

/* We start writing out flexbox here. The above is just page setup */
.container {}

By default, with this base setup (no flexbox has been applied) — we can see that each div is stacked on top of one another

Enable Flexbox

To use flexbox, we must first define which element will be our container by giving it a CSS property of `display:flex`

While this CSS property might look very similar to `display:block`, `display:inline`, etc — we need to come into this with a fresh perspective (where these same rules no longer apply)

.container {
  display: flex;
}

Seems as though each div is no longer a block element. Let’s add a border to our container to see what’s actually happening

.container {
  display: flex;
  border: 10px solid goldenrod; /* Add border for clarity */
}

The flex container has now become a block element as it stretches across the entire page, and all of the flex items have become inline elements

Inline-flex

If there are instances where we don’t want the flex container to act as a block element, we can specify it to be an inline flex container which will wrap around the content, taking only the width that it needs

.container {
  display: inline-flex; /* Turn into an inline flex container */
  border: 10px solid goldenrod;
}

Flex Items

When we define our flex container, any element nested inside automatically become a flex item. This means that we don’t have to classify these elements as flex items, it inherits that association.

Working with Axis and Flex Direction

In order to help us learn flexbox, a trick we can use to better visualise the outcomes of flexbox is to assign the flex container a height value.

In real-world projects, the height of the container and its elements would be made up from the content inside. However, we’ll keep the content to a minimum for less confusion and instead using the following line to stretch the entire height

.container {
  display: flex;
  border: 10px solid goldenrod;
  height: 100vh; /* 100% viewport height */
}

Uncurated