flexbox report
TRANSCRIPT
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
