Flex布局

1：找个容器：

.container {
    display: flex | inline-flex;       //可以有两种取值：块元素，行内元素
}

 

2：容器的设置：

.container {
    flex-direction: row | row-reverse | column | column-reverse;                              //主轴的方向
    flex-wrap: nowrap | wrap | wrap-reverse;                                                  //主轴是否允许折行
    flex-flow: <flex-direction> || <flex-wrap>;                                               //简写
    justify-content: flex-start | flex-end | center | space-between | space-around;           //主轴对齐方式
    align-items: flex-start | flex-end | center | baseline | stretch;                         //辅轴对齐方式
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;   //主轴折行的场合，多个主轴在辅轴方向上的对齐方式
}

 

3：子元素的设置：

.item {
    order: <integer>;　　　　　　                        //子元素的相对顺序　　　　　　　　　　　　　　　　　
    flex-basis: <length> | auto;                       //调整前的实际大小
    flex-grow: <number>;                               //扩展比例
    flex-shrink: <number>;                             //缩小比例
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];            //简写
    align-self: auto | flex-start | flex-end | center | baseline | stretch;       //独特的设置
}