Lesson 3: Flexbox

Flex box用來編排page layout，也可以用Javascript，但CSS會比較簡單，因人而異。

Setup Flexbox

.container{
  display:flex;
}

Browser Support

The flexbox properties are supported in all modern browsers.

Further research

For more information about a Flexbox overview, see this MDN entry.

Or w3schools CSS Flexbox.

Axes and Direction with Flexbox

The main axis is defined by flex-direction, which has four possible values:

  • row

  • row-reverse

  • column

  • column-reverse

The two row settings will create the main axis horizontally - or inline direction. The two column settings will create the main axis vertically - or block direction. block or inline here refer to the CSS display settings which we have covered previously.

The axis determines the flow of your content - you can think of this as being either rows or columns - and they will be determined when you start aligning and justifying content within a flex container.

Axes and Direction in Action

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

Justify為排版方式。

For more on axis and direction with flexbox see the documentation here.

Ordering Elements with Flexbox

  1. Moving the HTML code for the elements themselves to reorder

  2. Appending -reverse to row or column will reverse the order in the specified row or column

  3. Using the order property of the individual items inside the grid

There are three ways to explicitly set the order in which items will appear in a grid.

Ordering Elements Demo

flex-direction:row; will lay elements out from left to right. But flex-direction:row-reverse will flip that order and display elements from right to left.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Exercise 1</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>

  <style>
  .container{
      display:flex;
      flex-direction: column;
      /* alt solution */
      flex-direction: column-reverse;
      border: 2px solid yellow;
  }
  .box{
        width: 250px;
        height: 150px;
        border: 1px solid red;
    }
  </style>
  </head>

  <body>

  <div class = "container">
    <div class="box"> Box 1</div>
    <div class="box"> Box 2</div>
    <div class="box"> Box 3</div>
    <!-- alternative solution -->
    <!-- <div class="box"> Box 3</div> -->
    <!-- <div class="box"> Box 2</div> -->
    <!-- <div class="box"> Box 1</div> -->
  </div>
  </body>
</html>

Aligning Items & Justifying Content with Flexbox

To align items on the cross axis use align-items with the possible values:

  • stretch

  • flex-start

  • flex-end

  • center

To justify content on the main axis use justify-content, which has the possible values:

  • flex-start

  • flex-end

  • center

  • space-around

  • space-between

  • space-evenly

Aligning & Justifying in Action

By setting different values for the properties align-items and justify-content you can easily create elegant distribution of elements across the available space. The align-items property will align the items on the cross axis.

<style>
    /* Align and justify items in the grid to the center */
  .container{
    display:flex;
    flex-direction: row;
    border: 2px solid yellow;
    align-items: center;
    justify-content: space-evenly;
  }
  .box{
     border: 1px solid red;
  }
</style>

Further Research

For further research on the topics covered in this section, see this MDN article Alignment, justification and distribution of free space between items.

PreviousLesson 2: CSSNextLesson 4: CSS Grid

Last updated