css将屏幕三行三等分

CSS是用于改变HTML文档样式的一种语言，可以使网页更加美观。

在实际项目中，经常需要将页面布局分为若干等分，例如将屏幕分为三行三列进行布局。

    /* 定义样式 */
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .Box {
        flex-basis: 33.33%;
        height: calc(100% / 3);
        background-color: #fff;
        border: 1px solid #ccc;
    }

对于上述代码，通过设置容器的高度为屏幕高度的100%，并设置为flexBox布局，并设置每个元素宽度为33.33%实现了屏幕分为三等分的布局效果。

如果想实现屏幕三行三列分割布局，只需要在每个Box元素中添加display: flex;即可。

    /* 实现三行三列分割布局 */
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .Box {
        flex-basis: 33.33%;
        height: calc(100% / 3);
        background-color: #fff;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }

在Box元素中添加了display: flex;和justify-content: center; align-items: center;使每个Box元素都成为了一个flex容器，内部元素可以通过justify-content: center; align-items: center;来实现屏幕三行三列的分割布局效果。