> For the complete documentation index, see [llms.txt](https://owen31302.gitbook.io/github-education/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://owen31302.gitbook.io/github-education/become-a-front-end-web-developer-or-udacity-3.-javascript-and-the-dom/2.-css-website-layout-website-components/untitled.md).
# 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
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
```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
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
Exercise 1
```
## 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**.
```css
```
### 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).