一、flex-direction用于设置主轴的方向

1.主轴和侧轴

在flex布局中分为主轴和侧轴两个方向，也可称为 行和列、x轴和y轴

  • 其中默认主轴方向为x轴，水平向右
  • 默认侧轴方向为y轴，水平向下

2.属性值

flex-direction属性值用于决定主轴的方向

flex-direction
属性值 说明
row 从左到右，默认值
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

3.案例

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
<style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            color: white;
            
        }
        div span{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>

页面效果展示

（1）首先为父级赋值flex属性

div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            color: white;
            /* 父级添加flex属性 */
            display: flex;
        }

页面效果展示 - 从左到右（默认值）

  

（2）设置flex-direction属性值：row

div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            color: white;
            /* 父级添加flex属性 */
            display: flex;
            /* flex-direction默认值row */
            flex-direction: row;
        }

页面效果展示 - 从左到右，与无特别设置属性值时相同

 （3）设置flex-direction属性值：row-reverse

flex-direction: row-reverse;

页面效果展示 - 从右到左

 （4）设置flex-direction属性值：column

flex-direction: column;

页面效果展示 - 从上到下

 （5）设置flex-direction属性值：column-reverse

flex-direction: column-reverse;

页面效果展示 - 从下到上

# vscode
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

可控与可进化：现代企业为何离不开 IT 资产与配置管理

如果一个企业连自己的IT资产都无法清晰描述，就无法判断投资是否合理、风险是否集中、资源是否浪费。公有云、私有云、SaaS、远程协作工具、移动办公终端、IoT设备、AI平台、容器集群……当某台服务器宕机时，CMDB能告诉你它关联的数据库、影响的应用、波及的用户群体；这种由数据驱动的自治式管理，让企业的IT基础架构第一次具备了“自我感知”的能力。在这种体系下，企业的每一项资源、每一个节点、每一条依赖关

avatar 2048 AI社区
cover

中年程序员如何应对挑战，抓住机遇，实现职业转型升级？

avatar 2048 AI社区

AI大模型基础：预训练与微调（迁移学习与微调策略）e之800篇

假设你想喝一杯咖啡。你自己去种咖啡豆。你自己去烘焙、研磨。你自己用咖啡机冲泡。你喝到咖啡。->你控制了所有环节，非常繁琐，高度耦合。你走进一家咖啡馆（IoC容器）。你直接向服务员点单：“我要一杯拿铁”。服务员（容器）去后厨（创建并组装对象）让咖啡师（Bean）用咖啡机（另一个Bean）和牛奶（另一个Bean）做好一杯拿铁。服务员把这杯做好的拿铁（组装好的对象）递给你。->你不再关心制作过程，只关心

avatar 2048 AI社区