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