我正在尝试使部分div彼此相邻(水平(。然而，当我使用flex作为显示器时，它们就会消失。我使用容器div作为一个容器和一个包含两个部分的sectionsdiv。然后这些部分中的每一个都有块。我一直试图让这些部分并排出现，但它们一直在彼此之上，当我试图改变显示以使其弯曲或浮动时，它们就会变得不可见。有什么想法吗？
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background: #59537E;
}
#navbar {
background: #382F6A;
display: flex;
justify-content: space-between;
padding: 25px;
position: sticky;
top: 0;
box-shadow: 0 10px 10px -2px rgba(0, 0, 0, .3);
height: 70px;
}
nav ul li {
display: inline-block;
font-size: 16px;
margin-left: 20px;
color: #D2CBF5;
font-weight: bold;
margin-top: 7px;
cursor: pointer;
}
nav ul li:hover {
color: white;
}
#links {
display: flex;
}
#links img {
margin-right: 13px;
}
.container {
height: 1000px;
margin: auto;
max-width: 1150px;
}
.row {
margin: 40px 20px 25px 20px;
display: flex;
justify-content: center;
}
.row a {
text-decoration: none;
color: white;
font-size: 20px;
}
.btn {
margin: 0px 20px;
border: 2px white solid;
padding: 7px 25px;
border-radius: 20px;
font-weight: bold;
}
.btn:hover {
background: white;
color: #59537E;
border-color: blanchedalmond;
}
.sections {
display: flex;
}
.section {
margin-top: 100px;
max-width: 500px;
}
.block {
background: white;
border-radius: 10px;
height: 300px;
margin-top: 25px;
display: block;
}<nav id="navbar">
<div id="links">
<img src="IMGS/logo-badge.svg" width="32px" height="32px">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Groups</li>
<li>Calender</li>
<li>Support</li>
<li>BAU</li>
<li>BAUGO</li>
<li>BAU Library</li>
</ul>
</div>
<div id="profile">
<ul>
<li>Noti</li>
<li>Msgs</li>
<li>Khaled</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<a href="" class="btn">Courses</a>
<a href="" class="btn">Updates</a>
</div>
<div class="sections">
<div class="section">
<div class="block">
</div>
<div class="block">
</div>
</div>
<div class="section">
<div class="block">
</div>
<div class="block">
</div>
</div>
</div>
</div>.sections {
display: flex;
}
.section {
margin-top: 100px;
max-width: 500px;
flex: 1; /* You need this property */
}
display: flex意味着容器根据flexbox模型定位其子级，但您仍然必须通过将其flex设置为1(或任何其他数字，在这种情况下，空间将按其值成比例分布在子级之间(来告诉子级占用可用空间。
您需要给.section宽度。像
.section {
margin-top: 100px;
width: 100%;
max-width: 500px;
}
代码笔：https://codepen.io/manaskhandelwal1/pen/mdrGVLd
我希望这是您所期望的。
在CSS中添加这些更改以实现预期结果：
.sections {
display: flex;
margin: 0px 5px;
justify-content: space-around;
}
.section {
margin-top: 100px;
flex-grow:1;
max-width: 500px;
}
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background: #59537e;
}
#navbar {
background: #382f6a;
display: flex;
justify-content: space-between;
padding: 25px;
position: sticky;
top: 0;
box-shadow: 0 10px 10px -2px rgba(0, 0, 0, 0.3);
height: 70px;
}
nav ul li {
display: inline-block;
font-size: 16px;
margin-left: 20px;
color: #d2cbf5;
font-weight: bold;
margin-top: 7px;
cursor: pointer;
}
nav ul li:hover {
color: white;
}
#links {
display: flex;
}
#links img {
margin-right: 13px;
}
.container {
height: 1000px;
margin: auto;
max-width: 1150px;
}
.row {
margin: 40px 20px 25px 20px;
display: flex;
justify-content: center;
}
.row a {
text-decoration: none;
color: white;
font-size: 20px;
}
.btn {
margin: 0px 20px;
border: 2px white solid;
padding: 7px 25px;
border-radius: 20px;
font-weight: bold;
}
.btn:hover {
background: white;
color: #59537e;
border-color: blanchedalmond;
}
.sections {
display: flex;
margin: 0px 5px;
justify-content: space-around;
}
.section {
margin-top: 100px;
flex-grow:1;
max-width: 500px;
}
.block {
background: white;
border-radius: 10px;
height: 300px;
margin-top: 25px;
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>itslearning</title>
</head>
<body>
<nav id="navbar">
<div id="links">
<img src="IMGS/logo-badge.svg" width="32px" height="32px">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Groups</li>
<li>Calender</li>
<li>Support</li>
<li>BAU</li>
<li>BAUGO</li>
<li>BAU Library</li>
</ul>
</div>
<div id="profile">
<ul>
<li>Noti</li>
<li>Msgs</li>
<li>Khaled</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<a href="" class="btn">Courses</a>
<a href="" class="btn">Updates</a>
</div>
<div class="sections">
<div class="section">
<div class="block">
</div>
<div class="block">
</div>
</div>
<div class="section">
<div class="block">
</div>
<div class="block">
</div>
</div>
</div>
</div>
</body>
</html>