弹性盒子的理解

最新推荐文章于 2024-10-11 08:32:11 发布

weixin_33862993

最新推荐文章于 2024-10-11 08:32:11 发布

阅读量1.6k

点赞数

文章标签： php 爬虫

原文链接：http://www.cnblogs.com/PHP0222wangdong/p/10514789.html

版权

本文深入讲解CSS中的弹性盒子布局，包括display:flex属性的作用，方向控制(direction)，子元素排列方式(flex-direction)，对齐方式(justify-content和align-items)，以及换行处理(flex-wrap)。通过实例代码和效果对比，帮助读者理解并掌握弹性盒子的各种布局技巧。

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

弹性盒子：

　　display: flex; ：是把设置此属性的这块区域（设置此属性的元素）变为弹性盒子，使得此元素的直接子元素按照从左到右的顺序一行排列

　　　　　　　　　如果盒子变小（比子元素的宽度或高度小），里面的直接子元素会随着盒子的变化而变化，同时一直保持从左往右一行排列的布局

direction ：rtl 属性为 rtl (right-to-left) 此属性是设置盒子内的直接子元素 从右往左，一行排列，盒子内的直接子元素遵循上面的变化规律

　　以下为示例：　　蓝色：弹性盒子　　灰色：弹性盒子直接子元素　　紫色：弹性盒子间接子元素（弹性盒子子元素的子元素）

HTML代码：

<body>
     <div class="hz">               <!--弹性盒子-->
        <div class="l_1">           <!--直接子元素1-->
            1:
            <div class="l_a">a</div>       <!--间接子元素a-->
            <div class="l_b">b</div>       <!--间接子元素b-->
            <div class="l_c">c</div>        <!--间接子元素c-->
        </div>
        
        <div class="l_2">           <!--直接子元素2-->
            2:
        </div>
        
        <div class="l_3">          <!--直接子元素3-->
            3:
        </div>
    </div>
</body>

View Code

CSS代码：

/*弹性盒子*/

.hz{
    direction: rtl;
    display: flex;
    width: 160px;
    height: 500px;
    background-color: aquamarine;
}



.l_1,.l_2,.l_3{
    width:200px;
    height: 200px;
    background-color: #ccc;
    margin: 10px;
}



.l_a,.l_b,.l_c{
    width: 50px;
    height: 50px;
    background-color: blueviolet;
    margin: 5px;
}