弹性盒子display:flex flex详细举例超详细！

最新推荐文章于 2025-06-02 18:23:19 发布

AAA_CHAO

最新推荐文章于 2025-06-02 18:23:19 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_40248744/article/details/106787496

本文深入探讨了CSS弹性盒子（Flexbox）布局，通过详细的实例展示其使用方法，包括容器属性和子元素属性的设置，帮助读者全面理解flex布局在网页设计中的应用。

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

<div class="box">

        <!-- flex：等比分成10份 flex:1 就相当于占了10分之一-->
        <h2>flex：等比分成10份 flex:1 就相当于占了10分之一</h2>
        <div class="bigbox">
            <div class="small4 nick">我是flex:4 </div>
            <div class="small5 nick">我是flex:5</div>
            <div class="small6 nick">我是flex:1</div>
        </div>

        <!-- flex：使用百分比 -->
        <h2>flex：使用百分比</h2>
        <div class="bigbox">
            <div class="small1 nick">我是flex:30%</div>
            <div class