CSS Flex Box Layout is a CSS3 web layout model that allows elements within a container to be automatically arranged and resized depending on screen size. It defines flex containers and flex items, with properties that control alignment, order, sizing, and distribution of space. Common flex properties include flex-direction, flex-wrap, justify-content, align-items, and properties for individual flex items like order, flex-grow, and align-self. Flexbox provides more flexible layout options compared to traditional CSS box model properties.

1. Ian 20160422
FlexBox

2. INSTRUCTION
CSS Flex Box Layout is a CSS3 web layout model. It is in the W3C's Candidate
Recommendation (CR) stage. The flex layout allows responsive elements within a container,
automatically arranged to different size screens or devices.
CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes
based on their relationships with their sibling and ancestor boxes:
block layout, designed for laying out documents
inline layout, designed for laying out text
table layout, designed for laying out 2D data in a tabular format
positioned layout, designed for very explicit positioning without much regard for other elements
in the document

3. 使用 Flexbox 配置簡單的版面
.container {
display: flex;
}
nav {
width: 200px;
}
.flex-column {
flex: 1;
}

4. 使用 Flexbox 配置居中的版面
.vertical-container {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}

5. Flex Layout Box Model and Terminology
A flex container is the box generated by an element with a computed display of
flex or inline-flex. In-flow children of a flex container are called flex items and are
laid out using the flex layout model.

7. flex-direction
.container {
flex-direction: row | row-reverse | column | column-reverse;
}

8. flex-wrap
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}

9. “Flex-flow
This is a shorthand flex-direction and flex-wrap properties,
which together define the flex container's main and cross
axes. Default is row nowrap.
flex-flow: <『flex-direction'> || <『flex-wrap'>

10. justify-content
.container {
justify-content: flex-start | flex-
end | center | space-between |
space-around;
}

11. align-items
.container {
align-items: flex-start | flex-end |
center | baseline | stretch;
}

12. .container {
align-content: flex-start | flex-
end | center | space-between |
space-around | stretch;
}
align-content

13. Properties for the Children
.item {
order: <integer>;
}

14. flex-grow
.item {
flex-grow: <number>; /* default 0 */
}

15. flex
This is the shorthand for flex-grow, flex-shrink and flex-basis
combined. The second and third parameters (flex-shrink and
flex-basis) are optional. Default is 0 1 auto.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

16. align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline |
stretch;
}

18. Practice
http://flexboxfroggy.com/

19. References
▸ https://www.w3.org/TR/css-flexbox-1/
▸ https://en.wikipedia.org/wiki/CSS_Flex_Box_Layout
▸ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
▸ http://flexboxfroggy.com/
▸ https://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
▸ http://learnlayout.com/float-layout.html

20. THANK YOU!
Any questions?
You can find me at ian@ltc.tw