flex布局- flex-direction

最新推荐文章于 2025-04-30 01:11:37 发布

浪豪

最新推荐文章于 2025-04-30 01:11:37 发布

阅读量150

点赞数 1

分类专栏：前端文章标签： Flexbox 布局 flex-direction CSS 前端开发

本文链接：https://blog.csdn.net/Chinachenh/article/details/126425454

版权

前端专栏收录该内容

12 篇文章

订阅专栏

   		/*浏览器默认 从左到右*/
        flex-direction: row;
        /*浏览器默认 从右到左*/
        flex-direction: row-reverse;
        /*浏览器默认 从上到下*/
        flex-direction: column;
        /*浏览器默认 从下到上*/
        flex-direction: column-reverse;
       
		
		示例：

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: orange;
        display: flex;
        /*浏览器默认 从左到右*/
        flex-direction: row;
        /*浏览器默认 从右到左*/
        flex-direction: row-reverse;
        /*浏览器默认 从上到下*/
        flex-direction: column;
        /*浏览器默认 从下到上*/
        flex-direction: column-reverse;
    }
    .item {
        width: 100px;
        height: 100px;
    }
    .item1 {
        background-color: red;
    }
    .item2 {
        background-color: pink;
    }
    .item3 {
        background-color: green;
    }
    .item4 {
        background-color: purple;
    }
</style>

<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>