FlexBox

display: flex;

给元素添加display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。弹性子元素默认是在同一行按照从左到右的顺序并排排列。弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，该高度由它们的内容决定

flex-direction

用来设置主轴方向

• row：主轴沿着inline方向延伸(inline：文字书写方向，汉字自左向右)
• row-reverse：inline反方向，自右向左
• column：主轴沿着block排列的方向(display: block的块盒，自上而下)
• column-reverse：block的反方向，自下而上

1. 反转的不只是位置的变化，还包括子项目顺序的反转
2. 不设置item元素的宽高：
   不设置宽高的情况下，子项目在主轴方向的尺寸为内容撑开的大小，在侧轴方向会撑满整个空间

当属性设置为：row
不设置宽高：

设置宽高：

width: 100px;
height: 50px;
复制代码

当属性设置为：column
不设置宽高：

设置宽高：

width: 100px;
height: 50px;
复制代码