布局原理：

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

任何一个容器都可以被指定为flex布局任何一个容器都可以指定为flex布局

1、父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效

2、伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

常见的父元素属性：

    flex-direction  设置主轴方向

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

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

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

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

    flex-flow       复合属性，同时设置flex-direction和flex-wrap

主轴和侧轴，

默认主轴方向是x轴方向，水平向右

默认侧周方向是y轴方向，竖直向下

元素跟着主轴来排列

flex-direction

    row             默认x轴

    row-reverse

    column

    column-reverse

justify-content

    flex-start  默认，从头部开始

    flex-end    从尾部开始排列

    center      在主轴居中对齐

    space-around 平分剩余空间

    space-between 先两边贴边再平分剩余空间

flex-wrap

    默认在一行显示，不换行，装不下，会缩小子元素宽度，放到父元素中

    nowrap  默认不换行

    wrap    换行

align-items

控制子元素在侧轴的排列方式。。控制侧轴上的排列方式

    flex-start  默认，从头部开始

    flex-end 从尾部开始排列

    center      在主轴居中对齐

    stretch     拉伸

align-content

侧轴上的排列方式并且只能用于子项出现换行的情况（多行，设置flex-wrap: wrap）

前提设置flex-wrap: wrap; 换行

    flex-start

    flex-end

    center      居中

    space-around

    space-between

    stretch     拉伸

flex-flow

设置flex-direction和flex-wrap复合属性

    column wrap;

    column nowrap;

    row wrap;

    row nowrap;

常见的flex布局子项属性

flex 份数，

定义子项目分配剩余空间，用flex设置占多少份

align-self

控制单个项目在侧轴上的排列方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。

order

定义项目的排列数据。数值越小，位置越靠前，默认为0。与z-index不同

flex子项份数示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        section {

          width: 60%;

          height: 60%;

          margin: 0 auto;

          background-color: pink;

          display: flex;

        }

        section div:nth-child(1){

            width: 100px;

            height: 150px;

            background-color: red;

        }

        section div:nth-child(3){

            width: 100px;

            height: 150px;

            background-color: blue;

        }

        section div:nth-child(2){

            flex: 1;

            background-color: green;

        }

        p {

            display: flex;

            width: 60%;

            height: 150px;

            margin: 100px auto;

            background-color: green;

        }

        p span {

            flex: 1;

        }

        p span:nth-child(2) {

            flex: 2;

            background-color: aqua;

        }

    </style>

</head>

<body>

    <section>

        <div></div>

        <div></div>

        <div></div>

    </section>

    <p>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </p>

</body>

</html>