css平均分布五个div

在网页设计中，时常需要平均分布若干个div，以使页面更加美观。如何用CSS实现这个需求呢？下面带大家一起看一下实现方法。

    div class="container">
            div class="item item1">
    /div>
            div class="item item2">
    /div>
            div class="item item3">
    /div>
            div class="item item4">
    /div>
            div class="item item5">
    /div>
        /div>
        style>
        .container {
                display: flex;
                justify-content: space-between;
        }
        .item {
                width: 100px;
                height: 100px;
                background-color: purple;
        }
        /style>
    

以上代码中，我们首先创建了一个容器div，并在其中创建了5个class为item的子元素div。

接着，在CSS中我们设置了容器元素的display属性为flex，这样它的子元素就可以在水平方向上自动平均分配空间了。我们还设置了容器元素的justify-content属性为space-between，意为使子元素等间隔排列，这样就达到了平均分布的效果。

此外，为了方便展示效果，我们在CSS中还为子元素设置了背景色、宽度和高度属性。

当然，每个网页的需求不同，具体实现方法可能略有差异。但是基于CSS属性的灵活性，我们可以根据实际需要做出相应的调整。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！