一、flex 弹性布局原理
----
flex 英文全称是 " flexible box " , flexible 含义是灵活的柔韧的 , 灵活柔韧的盒子 即 弹性布局 , flex 布局又称为 伸缩布局...flex 容器中 横向排列 , 也可以在 flex 容器中 纵向排列 ;
通过为 父容器标签元素 设置 display: flex flex 弹性布局样式 , 可以达到 控制 子元素盒子 位置 和 排列方式...: flex-flow ;
三、设置主轴方向 flex-direction 样式
----
1、主轴与侧轴
flex 弹性布局中 , 存在 主轴 和 侧轴 两个概念 ,
主轴 : x 方向 , 水平向右...样式 改变的 ;
设置主轴方向 flex-direction 样式取值 :
默认样式 : row , 从左到右 ;
从右到左 : row-reverse ;
从上到下 : column ;
从下到上...: column-reverse ;
3、代码示例 - 默认主轴方向: 从左到右
下面的代码是 默认的主轴方向 , 没有做任何修改 , 作为参照案例使用 ;
当前状态下 , 与设置 flex-direction