flex布局实战

最新推荐文章于 2025-04-10 17:21:46 发布

原创最新推荐文章于 2025-04-10 17:21:46 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍使用CSS Flex布局实现盒子的水平垂直居中、子元素水平排列一行并均分父元素宽度，以及左侧固定宽度右侧自适应布局的方法。通过具体代码示例，帮助读者掌握Flex布局在网页设计中的应用。

1.实现盒子的水平垂直居中

        .parent{
            width:200px;
            height:200px;
            display:flex;
            align-items: center;
            justify-content: center;
            border:1px solid black;
        }
        .child{width:100px;height:100px;background:yellowgreen}

    <div class="parent">
        <div class="child">
        </div>
    </div>

2.子元素水平排列一行，均分父元素宽度(如果采用百分比实现，当子元素个数变化时需要修改样式，用flex布局则不需要)

        .box{
            width:400px;
            display:flex;
            border:1px solid black;
        }
        .child{ margin:10px;flex:1;background:yellowgreen}

    <div class="box">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>

3.左侧固定宽度，右侧宽度随父容器宽度变化而变化布局

        .box{
            /* width:500px; */
            display:flex;
            border:1px solid black;
        }
        .left{
            width:100px;
            background:blue;
        }
        .right{
            flex:1;
            background:yellowgreen;
        }

        <div class="box">
                <div class="left">1</div>
                <div class="right">2</div>
        </div>