flex右对齐_Flex学习

1. 容器属性

1.1 filex-direction：设置主轴的方向

row 默认是水平 row-reverse 水平，从右到左排列 column 垂直 column-reverse 垂直，从下到上排列

1.2 flex-wrap: 设置子项目在轴线上如何换行

nowrap 不换行，默认 wrap 换行 wrap-reverse 换行，倒着换行，从下往上换

1.3 flex-flow：是flex-direction和flex-wrap的简写形式，flex-flow: flex-direction || flex-wrap

1.4 justify-content：项目在主轴上的对其方式

flex-start 左对齐 flex-end 右对齐 center 中间对齐 space-between 两端对齐，项目中间的间隔相等 space-around 每个项目两侧的间隔相等，所以中间的space是两边的space的两倍

1.5 align-items：定义项目在交叉轴上如何对齐

flex-start flex-end center baseline 项目的第一行文字的基线对齐 stretch (默认)

1.6 align-content：定义了多根轴线的对齐方式，如果只有一根轴线，该属性不起作用

flex-start flex-end center space-between space-around stretch 轴线占满整个交叉轴，默认值

2. 项目的属性

2.1 order：定义项目的排列顺序，order越小越靠前，默认为0

2.2 flex-grow：定义了项目在主轴的放大比例

默认为0(不放大)，如果都为1，则均分剩余空间，如果有1有2，则2的占据的剩余空间比1的大一倍

2.3 flex-shrink：定义了项目在主轴的缩小比例

默认为1(如果空间不足，自动缩小)，如果有0有1，则0的不动，1的等比例缩小

2.4 flex-basic：定义了在主轴的分配多余空间之前，该项目占据的空间，类似于width/height

：一个固定值，类似于width/height auto：默认值，项目本身的大小

2.5 flex：是flex-grow flex-shrink flex-basic的简写

默认值值为0 1 auto，后两个属性可选，快捷值：auto=1 1 auto，none=0 0 auto

2.6 align-self：允许单个项目可以和其他项目有不一样的对齐方式(交叉轴上)，可覆盖容器的align-items，

auto：默认值(继承父容器的align-items)，如果没有父元素，则等同于stretch flex-start 除了auto，其他属性和align-items完全一致 flex-end flex-center baseline stretch

//内联样式动态修改
:style="{'order': item.order}

实际高度/宽度 = height(min-height) / width(min-width) + padding