Question

我正在尝试使 section div 彼此相邻（水平）。但是，当我使用 flex 作为显示器时，它们消失了。我使用容器 div 作为容器和具有 2 个部分的部分 div。然后每个部分都有块。我一直试图让这些部分并排显示，但它们一直在彼此之上，当我尝试将显示更改为弯曲或尝试浮动它们时，它们只会变得不可见。有什么想法吗？

* {
  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>

Answer 1

.sections {
  display: flex;
}
.section {
  margin-top: 100px;
  max-width: 500px; 
  flex: 1; /* You need this property */
}

display: flex 表示容器根据 flexbox 模型定位其子项，但您仍然必须通过将其 flex 设置为 1（或任何其他数字，在这种情况下，空间将按孩子的价值按比例分配）。

Answer 2

您需要为 .section 提供宽度。喜欢

  .section {
    margin-top: 100px;
    width: 100%;
    max-width: 500px;
  }

<块引用>

代码笔：https://codepen.io/manaskhandelwal1/pen/mdrGVLd

Answer 3

我希望这就是您所期望的。

在您的 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>

当我使用 display: flex 时，为什么我的 div 消失了？

3 个答案: