CSS3中的flex布局

通过设定外部盒子为flex布局，并设定flex规则，来实现对内部元素排列的控制

flex相关的属性有以下几点

display: flex  必须属性
flex-direction 决定flex的轴向
justify-content 主轴的对其方式
align-items  交错轴的对其方式
align-self 盒子内某一元素的对其方式
flex-wrap 决定换行的属性
order 排序

主轴和交错轴

flex容器内存在相互垂直的两条轴，主轴和交错轴，默认情况下横向的为主轴，纵向的为交错轴

image.png

默认情况下排列从主轴开始依次向后面排列

对齐方式

先指定主轴和交错轴如下

image.png
justify-content 用来指定主轴的对其方式, 也可以理解为容器内元素的间隔方法。有以下取值
image.png

align-items用来指定交错轴的对其方式，有以下取值

image.png

align-self 是内元素本身垂直主轴的对其方式，不会影响到其他元素

image.png

主轴和交错轴的确定

通过指定flex-direction的值可以指定主轴的方向以及起始位置
flex-direction有以下四个属性

• row 默认值 横向 从左到右
• row-reverse 横向 从右向左
• column 纵向 从上到下
• column-reverse 纵向 从下向上
  例如指定flex-direction: column-reverse;后其主轴方向以及起始点会变成如下
  image.png