flex布局

• flex
• inner-flex

主轴 main start ---- main end main size

主轴方向 row 从左到右
flex-direction:row-reverse 主轴方向翻转 column 从上到下 column-reverse 从下到上

just-content 主轴对齐方式 start 默认开始对齐 end 主轴end方向对齐 center 居中对齐 space-between space-evenly (items距离两端的距离与item之间的距离相等) space-around (items与两端的距离是item之间距离的一半)

align-items 交叉轴对齐方式 flex-end 底部对齐 flex-center 中心对齐 baseline 基线对齐

flex-wrap wrap nowrap wrap-reverser

flex-flow direction wrap 组合属性

align-content 多行item 在交叉轴的对齐方式 flex-start 从上到下 end 底部开始展示 space-bwtween space-around

交叉轴 cross start --- cross end

item 方向 默认从 main start ---> main end

items

order 决定排布顺序 值越小越在前

align-self 单独控制对齐方式 与aligh-items 数值相同

flex-grow 值为数字 分割剩余空间

flex-shrink 收缩空间 默认值 1

flex-basis 主轴items元素大小 xxx px 优先于 width

flex 属性 grow shrink