flexbox report

Ian 20160422 FlexBox

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

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

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

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.

flex-direction

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

flex-wrap

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

“Flex-flowThis 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'>

justify-content

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

align-items

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

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

align-content

Properties for the Children

.item { order: <integer>;}

flex-grow

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

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'> ]}

align-self

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

Practice

http://flexboxfroggy.com/

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

THANK YOU!Any questions?

You can find me at ian@ltc.tw