Html Flexbox:无法使用容器项目之间的空间_Html_Css_Sass_Flexbox

Html Flexbox:无法使用容器项目之间的空间

html css sass

Html Flexbox:无法使用容器项目之间的空间,html,css,sass,flexbox,Html,Css,Sass,Flexbox,大家好，我的lil页面有问题，我正在处理：（这个代码有一个codesandbox，假设它更舒适还添加了一张图片，让您了解我的目标）我试图做的是在侧边栏容器块内的项目之间创建一个空间布局： .container { max-width: 100rem; margin: 8rem auto; box-shadow: var(--shadow-dark); min-height: 90rem; //page lenght } .sidebar {

大家好，我的lil页面有问题，我正在处理：

（这个代码有一个codesandbox，假设它更舒适还添加了一张图片，让您了解我的目标）

我试图做的是在侧边栏容器块内的项目之间创建一个空间

布局：

.container {
    max-width: 100rem;
    margin: 8rem auto;

    box-shadow: var(--shadow-dark);
    min-height: 90rem; //page lenght

}

.sidebar {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    background-color: rgba(219, 219, 219, 0.685);
    
}

.content {
    display: flex;
}

.cv-view{
    background-color: #fff;
    height: 90rem;
    flex:1 ;
}

基数：

组成部分：

**.sidebar-containers {
    flex-direction: column;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    &__item{
        display:flex;
        flex-direction: column;
        align-items: center;
        border-bottom: solid 1px ;
        padding: 5px;
        list-style: none;
        &__title {
            font-weight: 400;
            font-size: 2.5rem;
            
        }
    }
    
}**

Index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
    </head>
    <body>
       <div class="container">
           <div class="content">
                    <div class="sidebar">
                        <div class="sidebar-containers">
                            <ul class="sidebar-containers__item">
                                <h1 class="sidebar-containers__item__title">Contact :</h1>
                                <li>Email : help@meplz.com</li>
                                <li>Phone : 555-5555</li>
                                <li>Address: Cluelessland</li>
                            </ul>
                            <ul class="sidebar-containers__item">
                                <h1 class="sidebar-containers__item__title">Education:</h1>
                                <li>Udemy</li>
                                <li>Udemy</li>
                            </ul>
                            
                            <ul class="sidebar-containers__item">
                                <h1 class="sidebar-containers__item__title">Skills:</h1>
                                <li>Helpmestackover</li>
                                <li>Asking questions</li>
                                <li>Please</li>
                            </ul>
                    </div>
                </div>
            <main class="cv-view">
                CV View
            </main>
           </div>
       </div>
    </body>
</html>



联系人：
电邮：help@meplz.com
电话：555-5555
地址：Cluelessland


教育：
乌德米
乌德米


技能：
助攻
提问
请

CV视图

提前感谢您的帮助

您需要为

.sidebar

设置

高度

，否则它将与它的内容要求一样高，导致

之间的空间没有任何效果。
您需要根据需要将高度
添加到。sidebar containers
类中，例如
height:100%;

或
或者，您也可以以像素、rems等为单位给出高度。图片的空间大小和位置。我找不到链接图片在codesandbox链接的示例文件夹中
height:100%;

height:100vh;