Flex
Flex
- 排布方向
flex-direction: row \ column \ row-reverse \ colume \ reverse
- 对齐方式
justify-content: center \ flex-start \ flex-end \ space-around \ space-evenly \ space-between
align-items: center \ flex-start \ flex-end
- 是否换行
flex-warp: nowrap \ warp
- 缩写 flex-direction \ and \ flex-warp
flex-flow: row \ nowrap
- 行与行之间的对其方式
align-content: \ flex-start \ center \ flex-end \ initial \ space-around \ space-evenly \ space-between
Flex Item
- 排序位置
order:1
- 覆写alignitems
align-self: center \ flex-start \ flex-end
- 主轴方向大小
flex-basis: 100px \ 0 \ auto;
- 占主轴剩余空间份数(扩大)
lex-grow: 0 \ 1;
- 超出主轴方向(缩小)0不做缩小
flex-thrink: 0 \ 1;
- 缩写 flex-grow flex-shrink flex-basis
flex:1 1 auto; 平均分配