flex布局（弹性布局）

pc端页面布局,推荐传统布局方式；移动端或者是不考虑兼容的pc则采用flex
flex：flexible Box 的缩写。
注意：当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和vertical-align 属性将失效。
小概念：
①Flex 容器（flex container）
采用 Flex 布局的元素
②Flex 项目（flex item）
Flex容器的所有子元素

如果给某个行内元素的父级元素设置了 display:flex 属性，那么这个行内元素也变成了行内块？（可以设置宽高）

如：给span的父级元素div设置display:flex前：span作为行内元素，宽高不起作用。

<style type="text/css">
    div {
        width: 500px;
        height: 300px;
        background-color: pink;
    }
    
    span {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        border: 1px solid red;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

给span的父级元素div设置display:flex后：

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

举例1：使三个子元素平分剩余空间？

在给父盒子设置display:flex的基础上，给父盒子设置justify-content: space-around;

div {
   width: 500px;
    height: 300px;
    background-color: pink;
    display: flex;
    justify-content: space-around;
}

span {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border: 1px solid red;
}

举例2：使三个子元素平分空间？

div {
   width: 500px;
    height: 300px;
    background-color: pink;
    display: flex;
}

span {
    flex: 1;
    height: 100px;
    background-color: skyblue;
    border: 1px solid red;
}