flex布局

一、flex布局原理

flex是flexible box的缩写，意为“弹性布局”，用来为和盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设置flex布局后，子元素的float，clear，vertical-align属性将失效

总结：就是给父盒子添加flex属性，来控制子盒子的位置和排列方式

二、常见父级属性

1.flex-direction设置主轴方向

默认主轴（x轴）水平向右，侧轴（y轴）垂直向下，可以通过下面的属性进行设置

如果把y轴设置为主轴，那么x轴就成为了侧轴

div {
            display: flex;
            flex-direction: column;
        }

2.justify-content设置主轴上子元素的排列方式

注意是主轴上的子元素，一定要确定好主轴是哪个，主轴是x就横着排，是y就竖着排

3.align-items设置侧轴上的子元素排列方式（单行）

注意，在子项为单行的时候使用，如果有多行，那怎么实现居中呢？见第5条

4.flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线上，默认是不换行的

5.align-content设置侧轴子元素排列方式（多行）

这个属性只能用于子项出现换行的情况下，也就是必须要多行，单行是没有效果的。

6.align-content和align-items的区别

7.flex-flow属性是flex-direction和flex-wrap属性的复合属性

比如下面这两个

			flex-direction: row;
            flex-wrap: wrap;

可以合在一起写，简写就是：

flex-flow: row wrap;

三、flex布局子项常见属性

1.分配剩余空间

语法 flex：number； 意思是占剩余部分的几份，如果是平均分，就是每个占1份（flex：1；），如果其中一个占的多点，可以flex:2;或者更大，但是注意这个比例一定是按照剩余的部分瓜分的
比如一个div里有三个span，第三个span固定的，前面剩余的部分，第一个span占2份，第二个span占1份
当然啊，这里flex：1，也可以写百分之多少，比如说一共5个盒子，每个占一份，就可以写flex:20%;

 div {
            display: flex;
            width: 1000px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }

        div span:nth-child(1) {
            flex: 2;
            background-color: red;
        }

        div span:nth-child(2) {
            flex: 1;
            background-color: skyblue;
        }

        div span:nth-child(3) {
            height: 100%;
            width: 100px;
            background-color: blue;
        }

2.控制自己

3.order排列顺序

使用order属性来控制排列的顺序，数值越小越靠前，默认为0

四、常见flex布局思路

前面做上图下字这种效果一般会很麻烦，但是用到flex布局，就很简单了（而且flex布局不会出现外边距合并的问题）