flex-direction设置主轴的方向

周百万.

已于 2022-03-20 22:02:00 修改

阅读量357

点赞数

分类专栏： html CSS 编程文章标签： html css3

于 2022-03-20 22:00:05 首次发布

本文链接：https://blog.csdn.net/m0_45142186/article/details/123622551

版权

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

编程

19 篇文章 1 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

本文介绍了flex-direction属性的四个方向，包括默认的row，从右到左的row-reverse，列(column)和从下到上的column-reverse，通过实例演示了如何改变元素排列顺序。

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

flex-direction：row:从左到右（默认属性）

flex-direction：row-reverse;

注意盒子中的数字！盒子第一个在右边开始排！

flex-direction：column;

flex-direction：column-reverse;

注意盒子中的文字！盒子第一个在下边开始排！

.box {
            display: flex;
            width: 800px;
            height: 500px;
            background-color: skyblue;
            flex-direction: row-reverse;
        }
 .box div {
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 10px;
            font-size: 35px;
            text-align: center;
            line-height: 100px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>新</div>
        <div>年</div>
        <div>好</div>
    </div>
</body>