# Lesson 3: Flexbox

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

## Setup Flexbox

```css
.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](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).

Or [w3schools CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp).

## Axes and Direction with Flexbox <a href="#axes-and-direction-with-flexbox" id="axes-and-direction-with-flexbox"></a>

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 <a href="#axes-and-direction-in-action" id="axes-and-direction-in-action"></a>

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

Justify為排版方式。

For more on axis and direction with flexbox see the [documentation here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#The_two_axes_of_flexbox).

## Ordering Elements with Flexbox <a href="#ordering-elements-with-flexbox" id="ordering-elements-with-flexbox"></a>

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.

```css
<!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 <a href="#aligning-items-justifying-content-with-flexbox" id="aligning-items-justifying-content-with-flexbox"></a>

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**.

```css
<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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#Alignment_justification_and_distribution_of_free_space_between_items).
