Flex布局

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

.box{
    display:flex;
}


// 行内元素也可以使用Flex布局
.box{
    display:inline-flex;
}

每个容器都存在水平、垂直交叉的两个轴。

该容器下的所有子元素都会自动成为容器成员，每个子元素称之为 flex项目，所有子元素默认按照主轴排列

容器的属性

### flex-direction
    该属性决定了主轴的方向，既项目的排列方向，可能有四个值:
        ### row   该值为默认值，起点在左端
        ### row-reverse  主轴为水平方向，起点在右端
        ### column  主轴为垂直方向，起点在顶部
        ### column-reverse  主轴垂直方向，起点在底部
        ps：只需要记得 row 与 column 即可 其余两个均为反转方向

### flex-wrap
     该属性是用来判断 容器排列不下时如何换行的
         ### nowrap  该值为默认值，不换行
        ### wrap  换行 第一行在上方
        ### wrap-recerse  换行 第一行在下方

### flex-flow
    该属性为 flex-direction 与 flex-wrap 的缩写
    ### 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  默认值，如果未设置高度或设置为 auto 占满整个容器高度

### align-content
    该属性定义了多根轴线，如果只有一根轴线 则不起作用
        ### flex-start：与交叉轴的起点对齐。
        ### flex-end：与交叉轴的终点对齐。
        ### center：与交叉轴的中点对齐。
        ### space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
        ### space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
        ### stretch（默认值）：轴线占满整个交叉轴。

上面的属性均为容器的属性，也就是容器内的项目的排列的规则

项目属性

### order
    定义项目的排序顺序，数值越小越靠前，默认为0 可为负值

### flex-grow
    当前项目的放大比例，默认为零，既如果存在空间剩余，也不进行放大

### flex-shrink
    可使项目等比例缩小，默认为1，如果不为1，则该项目不缩小，负值无效

### flex-basis


### flex
    该属性是上面三个的简写

### align-self
    该属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch

该文章仅为大致整理，详细的请前往 Flex 布局语法教程 进行查看