React Native Flexbox & CSS3 Flexbox

React Native Flexbox & CSS3 Flexbox

https://facebook.github.io/react-native/docs/flexbox/

https://reactnative.cn/docs/flexbox/

---

CSS3 Flexbox

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex container & flex item

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

main axis & cross axis

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

1. 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
2. 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
3. 项目默认沿主轴排列。单个项目占据的主轴空间叫做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)

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

---

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://www.w3schools.com/css/css3_flexbox.asp

https://zh.learnlayout.com/flexbox.html

---

CSS3 Grid Layout

https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html