第五天弹性盒布局之弹性容器-第九期线上

实例

    /*设置属性为块级弹性容器*/
    display: flex
    /*设置属性为行内块级弹性容器*/
    display: inline-flex;
    /*主轴排序方向默认，从左到右, 水平排列*/
    flex-direction: row;
    /*主轴排序方向横向从右到左, 水平排列*/
    flex-direction: row-reverse;
    /*主轴排序方向从上到下, 垂直排列*/
    flex-direction: column;
    /*主轴排序方向纵向从下到上, 垂直排列*/
    flex-direction: column-reverse;
    /*默认不换行, 元素自动缩小填充容器*/
    flex-wrap: nowrap;
    /*换行, 弹性元素超出容器边界的换到下一行显示*/
    flex-wrap: wrap;
    /*换行, 弹性元素反转排列*/
    flex-wrap: wrap-reverse;
    /*flex-flow可综合换行和方向样式*/
    flex-flow: row nowrap;
    /*主轴起点开始排列*/
    justify-content: flex-start;
    /*主轴终点开始排列*/
    justify-content: flex-end;
    /*弹性元素做一个整体居中显示*/
    justify-content: center;
    /*首尾元素紧贴起止点,其它元素平分剩余空间*/
    justify-content: space-between;
    /*每个元素二边空间相等,相邻元素空间累加*/
    justify-content: space-around;
    /*每个元素, 以及元素到与起止点的空间全部相等*/
    justify-content: space-evenly;