Css 调整嵌套div中的百分比，使其适合12列系统_Css_Flexbox_Grid

Css 调整嵌套div中的百分比，使其适合12列系统

css grid

Css 调整嵌套div中的百分比，使其适合12列系统,css,flexbox,grid,Css,Flexbox,Grid,我有以下站点结构，适合使用flexbox的12列系统：它基本上是一个菜单，侧边栏和内容类型的网站。12列系统中单个列的宽度为8.3333%。在content div中有两个嵌套的content left和content rightdiv 我的问题是，是否可以设置content left和content rightdiv的flex basis属性，使其完全适合12列系统（从项目菜单项开始的地方开始content rightdiv）尽管我尽了很大努力，但似乎还是做得不对。例如，设置.conte

我有以下站点结构，适合使用flexbox的12列系统：

它基本上是一个菜单，侧边栏和内容类型的网站。12列系统中单个列的宽度为8.3333%。在content div中有两个嵌套的

content left

和

content right

div

我的问题是，是否可以设置

content left

和

content right

div的

flex basis

属性，使其完全适合12列系统（从项目菜单项开始的地方开始

content right

div）

尽管我尽了很大努力，但似乎还是做得不对。例如，设置

.content left{flex basis:25%}

和

.content right{flex basis:50%}

不会得到所需的结果，因为这些div嵌套在content div中，其大小为75%，而不是宽度的100%

任何帮助都将不胜感激

PHP:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="page">
        <div class="menu">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Projects</li>
                <li>Contact</li>
            </ul>
        </div>
        <div class="main">
            <div class="sidebar">
            </div>
            <div class="content">
                <div class="content-left">
                </div>
                <div class="content-right">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

.page {
    max-width: 1440px;
    margin: 0 auto;
}

.menu ul {
    display: flex;
}

.menu li {
    flex-basis: 25%;
}

.main {
    display: flex;
}

.sidebar {
    flex-basis: 25%;
}

.content {
    display: flex;
    flex-basis: 75%;
}

.content-left {
    flex-basis: ???%;
}

.content-right {
    flex-basis: ???%;
}

它应该是

1/3

和

2/3

（9列，分为3列和6列）

.page{
最大宽度：1440px；
保证金：0自动；
}
.菜单ul{
显示器：flex；
填充：0；
}
李先生{
弹性基准：25%；
列表样式：无；
轮廓：1px纯红；
}
梅因先生{
显示器：flex；
}
.侧边栏{
弹性基准：25%；
背景：粉红色；
}
.内容{
显示器：flex；
弹性基准：75%；
高度：50px
}
.剩下的内容{
弹性基准：计算成本（1/3*100%）；
背景：红色；
}
.内容权{
弹性基准：计算成本（2/3*100%）；
背景：蓝色；
}



家
关于
计划
接触