flexbox基础

in #flexbox8 years ago

flexbox中的属性

一、弹性容器

1、display:flex | inline-flex
块级伸缩容器 | 行级伸缩容器

2、flex-direction: row | row-reverse | column | column-reverse
主轴方向

3、flex-wrap: nowrap | wrap | wrap-reverse
主轴方向空间不足时是否换行及如何换行

4、flex-flow: row nowrap | ...
flex-direction + flex-wrap

5、justify-content: flex-start | flex-end | center | space-around | space-between
伸缩项目在主轴线的对齐方式

6、align-items: flex-start | flex-end | center | baseline | stretch
伸缩项目在交叉轴上的对齐方式

7、align-content: stretch | flex-start | flex-end | center | space-around | space-between
伸缩项目出现换行后在交叉轴上的对齐方式

二、弹性物体

1、order: 0 | 整数值
物体的排列顺序,数值越小,排列越靠前

2、flex-grow: 0 | 整数值
弹性物体的放大比例,即表示如果存在剩余空间也不放大,剩余空间按各值分配比例

3、flex-shrink: 1 | 整数值
弹性物体的收缩比例

4、flex-basis: auto | length
弹性物体的基准值,剩余空间按比例进行伸缩

5、flex: 0 1 auto | flex-grow flex-shrink flex-basis
flex-grow,flex-shrink,flex-basis三个属性缩写

6、align-self: auto | flex-start | flex-end | center | baseline | stretch(弹性物品在交叉轴方向占满弹性容器,如果交叉轴为垂直方向的话,只有在不设置高度的情况下才能看到效果)
单独弹性物体在交叉轴上的对齐方式,会覆盖默认的对齐方式

RN支持flexbox的如下6个属性:

1、alignItems: flex-start | flex-end | center | stretch

2、flexDirection: column | column-reverse | row-reverse | row

3、flexWrap: nowrap | wrap | wrap-reverse

4、justifyContent: flex-start | flex-end | center | space-around | space-between

5、alignSelf: auto | flex-start | flex-end | center | stretch

6、flex: 0 1 auto | flex-grow flex-shrink flex-basis

Sort:  

Congratulations @lang-feng! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 3 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.028
BTC 62104.41
ETH 2404.22
USDT 1.00
SBD 2.49