flexBox

flexible box
移动端标签





父块定义 display:flex;
则子块为弹性
项目排列方式
flex-direction:row|row-reverse|column|column-reverse
定义主轴 行 反行 列 反列
左->右 左<-右 顶 下
^ ^
| |
下 顶
justify-content:space-between |space-around | flex-end/flex-start
两边顶边,中间块等间距 两边1/2正常间距,中间块等间距 从父块开始/结尾开始排列
align-items
flex-start|flex-end|baseline|center|stretch
align-content 定义多根轴线对齐方式,只有一根轴线不起作用
flex-start|flex-end|center|space-between|space-around
flex-wrap
wrap|nowrap|wrap-reverse
(默认)
Item
order:inherit (integer)
flex-grow 子块占父块比例(扩大)
0|1|2
flex-shrink 子块占父块比例(收缩)
0|1|2





Autor:VincentAdamNemessis E-mail:vincent5519@yeah.net QQ:3377299629 Wechat:ZTXLoveC3344
原文地址:https://www.cnblogs.com/VincentAdam/p/0a2faa502e8ba95dab5230bc841bd4f0.html