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

最新推荐文章于 2024-04-27 10:05:36 发布

AAA_CHAO

最新推荐文章于 2024-04-27 10:05:36 发布

阅读量1k

点赞数

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

版权

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

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

<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">我是