关于display:flex的使用

最新推荐文章于 2024-09-14 13:04:57 发布

原创最新推荐文章于 2024-09-14 13:04:57 发布 · 397 阅读

0 ·

CC 4.0 BY-SA版权

原创珍贵，转载请声明出处。

文章标签：

#css

CSS 专栏收录该内容

7 篇文章

订阅专栏

博客探讨了未使用和使用display:flex的情况，重点分析了使用display:flex时，子div宽度小于和大于父div这两种情形下的表现，属于前端开发中CSS布局相关内容。

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

未使用display:flex

未使用display:block

    <style>
        .c-1{
            width: 600px;
            height:100px;
            background-color: pink;
            /* display:flex' */
        }
        .c-2{
            width: 200px;
            height:100px;
            background-color: gray;
            margin-top: 1px;
            color:#fff
        }
    </style>

    <div class="c-1">
        <div class="c-2">1</div>
        <div class="c-2">2</div>
        <div class="c-2">3</div>
    </div>

使用display：flex

1、当子div的宽度小于父div时，也就是父div大，子div放在父div里绰绰有余。

在这里插入图片描述

    <style>
        .c-1{
            width: 900px;
            height:100px;
            background-color: pink;
             display:flex   /* 新加 */
        }
        .c-2{
            width: 200px;
            height:100px;
            background-color: gray;
            margin-top: 1px;
             margin-left: 1px;   /*新加 */
            color:#fff
        }
    </style>

    <div class="c-1">
        <div class="c-2">1</div>
        <div class="c-2">2</div>
        <div class="c-2">3</div>
    </div>

2、当子div宽度大于父div时，也就是父容器装不下子div时

在这里插入图片描述

    <style>
        .c-1{
            width: 900px;
            height:100px;
            background-color: pink;
             display:flex   /* 新加 */
        }
        .c-2{
            width: 320px;
            height:100px;
            background-color: gray;
            margin-top: 1px;
             margin-left: 1px;   /*新加 */
            color:#fff
        }
    </style>

    <div class="c-1">
        <div class="c-2">1</div>
        <div class="c-2">2</div>
        <div class="c-2">3</div>
    </div>