前端学习日记（十）：css中伸缩盒布局的简单应用

最新推荐文章于 2022-08-18 17:57:09 发布

VIP文章孤月儿

最新推荐文章于 2022-08-18 17:57:09 发布

阅读量267

点赞数

分类专栏： VS code css 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_46364332/article/details/104757179

版权

一、伸缩盒布局（ Flexbox ）
【CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。】

三列布局(一行中有3列)
【修饰后，三列在一行中显示，高度相等，宽度动态调整，当调整浏览器宽度的时候，每一列的宽度会动态调整。】
例如：【flex设定在子元素上，用来设置在主轴上的大小占容器剩余空间的比例每个项目占一份，也就是每个项目占三分之一】

 <style>
        /* 实现三列布局 */
        .container{
   
            display: flex;
            border: 1px solid blue;
            height: 200px;
        }
        .item{
   
            flex: 1;
        }
        .one{
   
            background-color: pink;
            flex: 2;
        }
        .two{
   
            background-color: