flexbox report
TRANSCRIPT
![Page 1: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/1.jpg)
Ian 20160422 FlexBox
![Page 2: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/2.jpg)
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
![Page 3: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/3.jpg)
使用 Flexbox 配置簡單的版面.container { display: flex;}nav { width: 200px;}.flex-column { flex: 1;}
![Page 4: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/4.jpg)
使用 Flexbox 配置居中的版面.vertical-container { height: 300px; display: flex; align-items: center; justify-content: center;}
![Page 5: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/5.jpg)
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.
![Page 6: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/6.jpg)
![Page 7: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/7.jpg)
flex-direction
.container { flex-direction: row | row-reverse | column | column-reverse;}
![Page 8: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/8.jpg)
flex-wrap
.container{ flex-wrap: nowrap | wrap | wrap-reverse;}
![Page 9: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/9.jpg)
“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'>
![Page 10: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/10.jpg)
justify-content
.container { justify-content: flex-start | flex-end | center | space-between | space-around;}
![Page 11: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/11.jpg)
align-items
.container { align-items: flex-start | flex-end | center | baseline | stretch;}
![Page 12: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/12.jpg)
.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
align-content
![Page 13: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/13.jpg)
Properties for the Children
.item { order: <integer>;}
![Page 14: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/14.jpg)
flex-grow
.item { flex-grow: <number>; /* default 0 */}
![Page 15: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/15.jpg)
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'> ]}
![Page 16: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/16.jpg)
align-self
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}
![Page 17: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/17.jpg)
![Page 18: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/18.jpg)
Practice
http://flexboxfroggy.com/
![Page 19: flexbox report](https://reader036.vdocuments.net/reader036/viewer/2022062522/58d16de91a28abed798b4709/html5/thumbnails/19.jpg)
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