Flex 弹性布局

** flex弹性布局**
flex弹性布局，给盒状模型提供最大的灵活性。任何一个盒装模型都可以指定为flex布局。
flex-direction属性

 .z{
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid black;
            display: flex;
            flex-direction: row;

        }
        .z>div{
            width: 100px;
            height: 100px;
            background-color:yellow;
            border: 1px solid red;
            box-sizing: border-box;
        }

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;
flex-wrap属性

 .z{
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid black;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

        }
        .z>div{
            width: 100px;
            height: 100px;
            background-color:yellow;
            border: 1px solid red;
            box-sizing: border-box;
        }

flex-wrap:nowrap;

flex-direction:wrap-reverse;

justify-content属性

 .z{
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid black;
            display: flex;
            flex-direction: row;
            justify-content: center;

        }
        .z>div{
            width: 100px;
            height: 100px;
            background-color:yellow;
            border: 1px solid red;
            box-sizing: border-box;
        }

justify-content:flex-end;

justify-content:flex-start;

justify-content:space-around;

justify-content:space-between;

align-items属性

align-items:flex-end;

align-items:flex-start;

align-items:center;

.z{
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid black;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items:baseline;
            text-align: center;

        }
        .z>div{
            background-color:yellow;
            border: 1px solid red;
            box-sizing: border-box;

        }
        .z>div:nth-child(1){
            width: 100px;
            height: 100px;
            font-size: 10px;
            line-height: 100px;
        }
        .z>div:nth-child(2){
            width: 150px;
            height: 150px;
            font-size: 20px;
            line-height: 150px;


        }
        .z>div:nth-child(3){
            width: 200px;
            height: 250px;
            font-size: 30px;
            line-height: 250px;

        }

align-content属性只对多根轴线起作用，单根不起作用。

 .z{
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            flex-direction:row;
            align-content: flex-end;

            text-align: center;

        }
        .z>div{
            background-color:yellow;
            border: 1px solid red;
            box-sizing: border-box;

        }
        .z>div:nth-child(1){
            width: 100px;
            height: 100px;
            font-size: 10px;
            line-height: 100px;
        }
        .z>div:nth-child(2){
            width: 150px;
            height: 150px;
            font-size: 20px;
            line-height: 150px;


        }
        .z>div:nth-child(3){
            width: 200px;
            height: 100px;
            font-size: 30px;
            line-height: 100px;

        }
        .z>div:nth-child(4){
            width: 100px;
            height: 100px;
            font-size: 10px;
            line-height: 100px;
        }
        .z>div:nth-child(5){
            width: 150px;
            height: 150px;
            font-size: 20px;
            line-height: 150px;


        }
        .z>div:nth-child(6){
            width: 200px;
            height: 100px;
            font-size: 30px;
            line-height: 100px;

        }
        .z>div:nth-child(7){
            width: 100px;
            height: 100px;
            font-size: 10px;
            line-height: 100px;
        }
        .z>div:nth-child(8){
            width: 150px;
            height: 150px;
            font-size: 20px;
            line-height: 150px;


        }
        .z>div:nth-child(9){
            width: 200px;
            height: 100px;
            font-size: 30px;
            line-height: 100px;
        }


    </style>

align-content:flex-start;

align-content:center;

align-content:space-around;

align-content:space-between;

align-content:stretch;

flex属性-子元素按比例分配

.z{
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid black;
            display: flex;
            flex: 1;
            flex-direction:row;
            text-align: center;

        }
        .z>div{
            background-color:yellow;
            border: 1px solid red;
            box-sizing: border-box;

        }
        .z>div:nth-child(1){
            flex: 1;
            height: 100px;
            font-size: 10px;
            line-height: 100px;
        }
        .z>div:nth-child(2){
           flex: 2;
            height: 150px;
            font-size: 20px;
            line-height: 150px;


        }
        .z>div:nth-child(3){
          flex: 3;
            height: 100px;
            font-size: 30px;
            line-height: 100px;

        }