CSS篇——伸缩布局

伸缩布局的基本概念

伸缩容器：某个标签添加了"display:flex"属性，他就是伸缩容器。
伸缩项：伸缩容器的子元素为伸缩项
主轴：伸缩容器从左到右的方向称为主轴
侧轴：从上到下称为侧轴

主轴的对齐方式

在伸缩布局中, 默认情况下水平方向是主轴, 默认情况下主轴的起点在伸缩容器的最左边, 默认情况下所有的伸缩项都是从主轴的起点开始排版的，但是我们也可以通过属性来修改主轴的起点的位置。
flex-direction: 用于修改主轴起点的位置，取值：

• row: 起点在伸缩容器的最左边, 终点在伸缩容器的最右边. 从左至右的排版, 默认的取值

• row-reverse: 起点在伸缩容器的最右边, 终点在伸缩容器的最左边, 从右至左的排版

• column: 起点在伸缩容器的最顶部, 终点在伸缩容器的最底部, 从上至下的排版

• column-reverse: 起点在伸缩容器的最底部, 终点在伸缩容器的最顶部, 从下至上的排版

       **注意点: 在伸缩布局中主轴和侧轴永远都是十字交叉的, 只要主轴的方向发生了变化, 侧轴也会发生变化**
  

在设置好主轴方向后，要设置伸缩项的对齐方式:justify_content

            flex-direction: row; 主轴起点的默认值
            justify-conten