不能将主要内容放在中心答案

【问题标题】：Cannot put main content in the center不能将主要内容放在中心
【发布时间】：2021-05-11 01:59:06
【问题描述】：

我已经使用flexbox 制作了一个典型网站的布局，但我有几个问题和几个问题。我的第一个问题是如何改进这种布局？我遇到的问题是我无法将main__content 的颜色black 放在aside 之间。

*{

    margin: 0;
    padding:0;
    line-height: 1.3em;
    color: black;
    font-size: 40px;
}

body{
        background: lightslategray;
}

.header{

    display: flex;
}

.zero{
    height: 100vh;
    width: 200px;
    background: violet;
    
}

.one{

    height: 200px;
    width: 200px;
    background: blue;
    flex-grow: 2;}

.two{
    height: 200px;
    width: 200px;
    background: red;
    flex-grow: 2;

}

.aside {
    display: flex;
 
}

.three{
    height: 200px;
    width: 200px;
    background: green;

}

.four{
    height: 100vh;
    width: 200px;
    background: yellow;
    margin-left: auto;
    

}

.main .content{

    height: 50vh;
    width: 40vh;
    background-color: black;
}

<body>

    <div class="header">
        <div class="one">content</div>
        <div class="two">content</div>
        <div class="three">content</div>

    </div>
    <div class="aside">
        <div class="zero">sidebar</div>
        <div class="four">sidebar</div>
    </div>

    <div class="main">
        <div class="content">Main__content</div>
    </div>
</body>

【问题讨论】：

我们可以更改 HTML 吗？
是的，你想改变什么
尝试将侧边栏放在主div类中

标签： html css layout flexbox alignment

【解决方案1】：

您正在尝试将样式应用于主要和内容

.main .content{
    
        height: 50vh;
        width: 40vh;
        background-color: black;
    }

所以子 div（内容）的高度和宽度与其父 div（主）相同

尝试申请：

.main {

        height: 50vh;
        width: 40vh;
        background-color: black;
        }


.content {
    color: brown;
    height: 100px;
    font-size: 20px;
}

【讨论】：