flex布局（flex-direction 主轴的方向 justify-content控制主轴上的排列方式）

flex布局

可以用父和子来区分felx

flex container容器 父

flex item项目 子

flex就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex-direction设置主轴的方向

​ row默认值从左到右

​ row-reverse从右到左

​ column从上到下

​ column-reverse从下到上

div {
            display: flex;
            /* 主轴默认是row 行 */
            flex-direction: row;
            /* row翻转 */
            flex-direction: row-reverse;
            /* 也可以设定为主轴是column 列 */
            flex-direction: column;
            /* 主轴column列翻转 */
            flex-direction: column-reverse;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
 div span {
            width: 150px;
            height: 150px;
            background-color: purple;
        }

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

justify-content控制设置父主轴上的子元素排列方式

​ flex-start默认值 从头部开始 如果主轴是X轴，则从左到右

​ flex-end从尾部开始排列

​ center在主轴居中对齐

​ space-around平均分剩余空间

​ space-between先两边贴边在平分剩余空间

div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认行 */
            flex-direction: row;
            /* 以x轴开始从左对齐 */
            justify-content: flex-start;
            /* 以x轴开始最后盒子以右对齐 */
            justify-content: flex-end;
            /* 以中间对齐 */
            justify-content: center;
            /* 平均分配了空间 */
            justify-content: space-around;
            /* 左右两侧 */
            justify-content: space-between; 
        }
        div span {
            width: 150px;
            height: 150px;
            background-color: purple;
        }

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>

flex-wrap设置子元素是否换行

alingn-content设置侧轴上的子元素的排列方式（多行）

align-items设置侧轴上的子元素排列方式（单行）

flex-flow复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction练习