React Native Flexbox & CSS3 Flexbox Grid Layout
flex container & flex item
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
main axis & cross axis
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
- 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
- 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex container's properties
容器的 6个属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-direction: row | row-reverse | column | column-reverse; & default value(row)
flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse; & default value(nowrap)
https://codepen.io/team/css-tricks/pen/1ea1ef35d942d0041b0467b4d39888d3
flex-flow
flex-flow is shorthand flex-direction & flex-wrap
flex-flow: <‘flex-direction’> || <‘flex-wrap’> & default value(row nowrap)
justify-content
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; & default value(flex-start)
align-items
align-items: stretch | flex-start | flex-end | center | baseline; & default value(stretch)
align-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch; & default value(flex-start)
flex item's properties
项目的 6个属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
order: <integer>; & default value(0)
flex-grow
flex-grow: <number>; & default value(0)
flex-shrink
flex-shrink: <number>; & default value(1)
- 负数无效
flex-basis
flex-basis: <length> | auto; & default value(auto)
flex
flex is shorthand for
flex-grow & flex-shrink & flex-basis
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] & default value(0 1 auto)
align-self
align-self: auto | flex-start | flex-end | center | baseline | stretch; & default value(auto)
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
