[分享]CSS3怎么把页面平分三等分

今天我们来讲一下如何使用CSS3来把页面平分为三等份。首先我们需要了解一下CSS3中新加入的flexbox布局，它可以让我们通过很少的CSS代码灵活地控制页面布局。 我们可以先给父元素设置displa...

今天我们来讲一下如何使用CSS3来把页面平分为三等份。首先我们需要了解一下CSS3中新加入的flexbox布局，它可以让我们通过很少的CSS代码灵活地控制页面布局。
我们可以先给父元素设置display: flex，然后使用flex-grow属性来控制子元素的宽度。如果我们想把页面分为三等份，那么我们就可以把flex-grow的值设置为1，这样每个子元素的宽度就会被均分为三等份。
让我们看一下具体的代码实现：

  <style>
            .container {
                display: flex;
            }
<br>
            .item {
                flex-grow: 1;
            }
        </style> 

然后，在页面中我们需要把要均分的内容放入三个子元素中，这里我们使用p标签来表示，代码如下：

  <div class="container">
            <p class="item">第一等份</p>
            <p class="item">第二等份</p>
            <p class="item">第三等份</p>
        </div> 

这样，我们就可以轻松实现把页面平分为三等份的效果了。当然，这种方法也适用于把页面平分为其他等分数。
总结一下，通过使用CSS3中的flexbox布局，我们可以轻松地实现页面的等分布局。希望这篇文章可以帮助大家更好地掌握CSS3的布局技巧。