Intro

What is Flexbox? Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items will expand to fill additional space, or shrink to fit into smaller spaces making it a flexible way of displaying content.

W3Schools CSS Flexbox and Its Properties | MDN Flexbox | Geeks4Geeks CSS Flexbox and Its Properties | CSS Flexbox Layout Guide

Why Use Flexbox?

CSS flexible layout enables you to:

• - Center a block of content inside its parent.
• - Make all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
• - Make all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.

Defining Flex

Flexbox consists of a parent container that is designated as a flex container, and the child elements that become the flex items.

So to start we need to define our "parent" and our "children". On our html page, we'll set a "container div" and nested within, we'll have four "child divs", like so:

• HTML
• <div class="parent">
  • <div class="child"></div>
  • <div class="child"></div>
  • <div class="child"></div>
  • <div class="child"></div>
• </div>

And now in our css, we define the "parent" container as being a "flex" container, like so:

• CSS
• .parent {
  • display: flex;
  • gap: 10px;
• }

Using Flex

Flex works off of the premise of a MAIN and CROSS axis. These are determined by the flex designation, row or column, with row being the default.

• flex-direction: row; - gives you a left to right horizontal main axis and a vertical cross axis.
  • *note: this is the default axis setup for flex, so if you want a left to right main axis with a vertical cross axis, you can omit this statement.
• flex-direction: row-reverse; - gives you a right to left horizontal main axis and a vertical cross axis
• flex-direction: column; - gives you a top to bottom vertical main axis and a horizontal cross axis
• flex-direction: column-reverse; - gives you a bottom to top vertical main axis and a horizontal cross axis

Once you have designated a container as a flex container, AND determined which are the main and cross axises, you can then use flex properties to effect the layout of the content, within the flex container. Below is a partial list of some of these properties. Consult the documentation for more information.

Parent Properties

• display: flex; Defines a parent container as a flex container.
• flex-direction : Defines the main axis direction.
  • row | row-reverse | column | column-reverse
• flex-wrap : allows child items to wrap onto multiple lines.
  • wrap | nowrap | wrap-reverse
• flex-flow : shorthand for flex-direction and flex-wrap.
  • row wrap | row-reverse nowrap | column wrap-reverse | column wrap
• justify-content : aligns child items along the main axis.
  • start | center | end | flex-start | flex-end | space-between | space-around | space-evenly | stretch
• align-content : aligns child items along the cross axis.
  • same as justify-content plus baseline | first baseline | last baseline | and others
• align-items : aligns multiple lines of child items on the cross axis.
  • Too many to list - consult the documentation

Child Properties

Children/Flex-items Properties:

• order : changes the order of items without altering the source order.
• flex-grow : allows an item to grow to fill available space.
• flex-shrink : allows an item to shrink if there’s insufficient space.
• flex-basis : defines the initial size of an item.
• flex : shorthand for flex-grow , flex-shrink , and flex-basis.
• align-self : aligns a single item within the flex container.

Flex Sizing

If we want to understand Flex Sizing, we need to understand how Flex determines the width of a flex item. There is a basic hierarchy of how flex determines the width:

• Content Width   <   Width   <   flex-basis   <   min/max-width
  1. first it checks if there is a min/max width set,
  2. if not then it checks for a flex-basis setting,
  3. and if there is none, it checks for a width setting,
  4. and if none of these apply, then the width is determined by the content width.

Now an important note here, when determining min-width, or max-width:

• min-width: flex determines this based on the length of the longest word, or item.
• max-width: flex determines this based on the length of the entire content.

Practical Use - The Standard Chessboard

Let's show a practical example of using a flexbox layout. We're going to build a Chessboard, using flex.

Each individual square is 50px x 50px. We set the board width to 400px and set flex-wrap: wrap;. With these set, it will lay out eight squares, and then wrap to the next row, and continue until the board is built.

The code is simple and clean:

• HTML
• <div class="container">
  • <div class="white"></div>
  • <div class="black"></div>
  • repeat 62 more times
• </div>

Now for the css:

• CSS
• .container {
  • display: flex;
  • width: 400px;
  • flex-wrap: wrap;
  • border: 2px solid #453426;
• }
• .white {
• background-color: #f0d9b5;
• width: 50px;
• height: 50px;
• }
• .white {
• background-color: #b58863;
• width: 50px;
• height: 50px;
• }

Very simple code. Set our width, height, and colors for our individual boxes. Make the "parent" container a flex container. Set its width to 800px, and enable flex-wrap: wrap; And finally, we set a border for the entire board.