CSS----利用flex 圣杯布局双飞翼布局

最新推荐文章于 2024-10-28 09:57:32 发布

关润开

最新推荐文章于 2024-10-28 09:57:32 发布

阅读量157

点赞数

分类专栏： CSS 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_44201963/article/details/115641565

版权

本文探讨了CSS中的flex布局特性，如order属性用于元素排序，box-grow用于元素扩展。详细介绍了如何运用这些属性实现圣杯布局和双飞翼布局的效果，分别展示了两种经典布局解决方案。

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

介绍两个布局中使用的flex属性
order: 根据值来进行排序可为负值
box-grow: grow意为成长可以使 items增长
flex: (flex-grow||flex-shrink||flex-basis)
圣杯布局：

  <style>
        .container{
    
            width: 100%;
            display: flex;
        }
        .left,.right,.center{
    
            min-height: 150px;
        }
        .left{
    
              background-color: blue;
              width: 200px;
              order: -1;
        }
        .right
        {
     
               background-color: antiquewhite;
               width: 300px;
        }