Flex布局常见父项属性（一）- flex-direction

最新推荐文章于 2024-10-03 05:45:00 发布

JHY97

最新推荐文章于 2024-10-03 05:45:00 发布

阅读量1.7w

点赞数 6

分类专栏： Flex布局笔记文章标签： vscode flex

本文链接：https://blog.csdn.net/JHY97/article/details/122313985

版权

Flex布局笔记专栏收录该内容

9 篇文章 10 订阅

订阅专栏

本文详细介绍了Flex布局中的flex-direction属性，用于设置主轴方向，包括row（默认，从左到右）、row-reverse（从右到左）、column（从上到下）和column-reverse（从下到上）四个值。通过示例代码展示了不同值下的页面效果，帮助读者深入理解这一CSS属性。

摘要由CSDN通过智能技术生成

一、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;
        }

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