伸缩布局flex

伸缩盒子的特点:

只有伸缩盒子才有主轴和侧轴

主轴：默认水平从左向右

   默认按照主轴方向排列

侧轴：始终垂直主轴

   伸缩盒子的子元素默认不换行

1.首先呢，要给直接父容器（亲爹）设置为伸缩盒子，也就是display:flex;

2.调整主轴方向：

flex-direction:row; //行，从左向右

     row-reverse; //行，从右向左

     column; //列，从上向下

      column-reverse; //列，从下向上

inherit;

3.调整元素在主轴方向的对齐方式：

justify-content:center; //居中对齐

flex-end; //右对齐

flex-start; //左对齐

space-around; //元素周边间隙环绕

space-between; //两端对齐

4.调整元素在侧轴对齐方式

align-items:center; //中间对齐

flex-end; //侧轴结束位置对齐

flex-start: //侧轴开始位置对齐

stretch; //默认值，拉伸

5.设置子元素是否换行

flex-wrap:nowrap; //默认不换行

wrap; //换行

6.设置元素换行后的对齐方式

flex-content:stretch; //默认

    flex-start;

    center;

   flex-end;

   space-around;

  space-between

注意：该属性必须配合flex-wrap使用；

设置的是元素换行后再侧轴对齐方式。

7.伸缩盒子中的对齐方式（子元素）

align-self:center;

flex-start;

flex-end;

stretch;

order设置元素显示顺序:

值越大，显示顺序越靠后；

写法：order:1;

flex设置子元素在父元素中的缩放比例（只能给子元素设置）

例子：

flex:1;

假如有3份，每一份都设置成flex:1;会把盒子平均分成3份，每个占三分之一。

注意：<img>标签必须要包裹在一个标签里，才可以用，比如包在<a>里，给<a>设置flex才可以

8.多列布局

column-count:; //设置列数

column-count:2; //2列

column-gap:10px; //设置列与列之间的宽度

column-rule:1px solid red; //设置列与列之间的样式

column-span: ； //一般用于文章的标题

1; //默认值

all; //跨所有列