Flex布局

一、主轴对齐方式

属性名:justify-content

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

重点: space-between

        .box{
            /* 弹性容器 */
            width: 1200px;
            height: 400px;
            border: 5px solid pink;
            margin: 0 auto;
            display: flex;
            /* 2边靠边中间距离自适应*/
            justify-content: space-between;
            
        }
        /* 弹性盒子 */
        .box div{
            width: 300px;
            height: 200px;
            background-color: aqua;
        }

 二、侧轴对齐方式

属性名:align-items

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

 常用    align-items:center配和 justify-content: center;让盒子水平和垂直居中

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

 

三、设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值	作用
row	行, 水平(默认值)
column	列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

常用:flex-direction：column;

修改完毕，主轴是Y轴， 侧轴是X轴。

四、多行侧轴对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

注意:

1. align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐

2. content 主轴 justify-content align-content 侧轴多行对齐

 

五、弹性盒子换行

特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。

语法:flex-wrap: wrap;

        .box{
            width: 900px;
            height: 500px;
            border: 5px solid #000;
            margin: 0 auto;
            /* 弹性容器 */
            display: flex;

            /* 弹性盒子换行 */
            flex-wrap: wrap;
            /* 两边边靠边中间距离自适应*/
            justify-content: space-between;
        }
        .box div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }