弹性盒使用问题 1-右侧自适应

最新推荐文章于 2023-02-13 17:38:33 发布

原创最新推荐文章于 2023-02-13 17:38:33 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

样式问题专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用CSS Flex布局实现的盒子模型案例。该案例中，一个包含多个子元素的父容器利用Flex布局来分配和排列空间，使得其中一个子元素能够根据其最小宽度属性自适应地扩展。文章通过具体代码展示了如何设置Flex容器及项目的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="box1">
    <div class="box2"></div>
    <div calss="box3">
        <div calss="box4">
            我是一个有最小宽度的盒子    
        </div>
    </div>
</div>
<style>
    .box1{
        display: flex;
        border: 1px solid #000000;
        }
        .box2{
            width:200px;
            border: 1px solid #333333;
        }
        .box3{
            flex:1;
            /*overflow: hidden; 如果不加，x轴会出现滚动条，页面混乱*/
            border: 1px solid #0086B3;
        }
        .box4{
            height:400px;
            width:100%;
            min-width: 400px;
            border: 1px solid #55A532;
        }
</style>