flex布局笔记

flex布局语法

容器指定为flex布局
.box{
    display: flex;
}
内联元素指定flex布局
.box{
    display: inline-flex;
}
wbekit浏览器内核必须加上 -webkit 前缀
.box{
    display: -webkit-flex;
    display: flex;
}

容器的属性

采用flex布局的元素，称为flex容器，所有的子元素自动成为容器的成员；

有六个属性设置在容器上，分别是：
    1，flex-direction 容器内成员排列方向
        row 默认值 主轴为水平方向，起点在左端。
        row-reverse 主轴为水平方向，起点在右端。
        column 主轴为垂直方向，起点在上沿。
        column-reverse 主轴为垂直方向，起点在下沿。
    2，flex-wrap属性默认情况下，项目都排在一条线
        nowrap（默认）：不换行。
        wrap：换行，第一行在上方。
        wrap-reverse：换行，第一行在下方。
    3，flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
        flex-flow: 默认值为row nowrap;