FLex布局详解

1.Flex主轴方向

属性	属性值	介绍
flex-direction	row	设置主轴方向为x轴,也就是横轴
flex-direction	row-reverse	盒子从右往左排序(简单了解),就是上面的反转一下
flex-direction	column	设置主轴方向为y轴,也就是纵轴
flex-direction	column-reverse	盒子从下往上排序(简单了解)

Html

代码语言：javascript复制

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

CSS

代码语言：javascript复制

        div{
            /* 给父级盒子添加flex属性 */
            /* 默认主轴的方向是x轴  也就是行 flex-direction: row;*/
            flex-direction: row;
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        div span{
            width: 100px;
            height: 100px;
            background-color: rgb(9, 234, 255);
        }

效果图

其余效果图 可自行复制代码,到自己vscode进行演示,可以更快的了解到flex的强大之处