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）。
- 主轴的开始位置（与边框的交叉点）叫做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-flowis shorthandflex-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
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
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！