伸缩布局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;
//跨所有列