flex布局

一.元素display: flex;之后子元素的float vertical-align clear都会失效

二.常见

flex-direction:  row(默认)  ||  row-reverse ||  column  ||  column-reverse 
flex-wrap:  nowrap(默认)  ||  wrap ||  wrap-reverse
flex-flow:  row wrap
justify-content
align-items
align-content

order: 1 //  用来排序顺序小的在前面，注意子元素中有一个使用了order后其余元素都要使用order，否则不适用order的元素会排在使用order的元素前面
align-self  
flex-grow

order:-1 表示放在最前面

1.应用flex布局的场合
2.产品列表ul>li*9

            * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            border: 1px solid green;
            width: 350px;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
       }
        li {
            width: 100px;
            height: 100px;
            background-color: red;
        }

3.flex实现双飞翼

header {
            height: 100px;
            background-color: #ccc;
        }
        main {
            display: flex;
        }
        footer {
            height: 100px;
            background-color: #ccc;
        }
        .content {
            order: 2;
            flex-grow: 1;
            background-color: red;
        }
        .aside {
            order: 1;
            background-color: yellow;
            width: 200px;
            height: 200px;
        }
        .extra {
            order: 3;
            width: 200px;
            height: 200px;
            background-color: green;
        }

4.垂直水平居中

html,body {
            height: 100%;
        }
        .parent {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child {
            background-color: #ccc;
        }