Блог

Главная - Вопросы по программированию - Почему мои divs исчезают, когда я использую display: flex?

Почему мои divs исчезают, когда я использую display: flex?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я пытаюсь расположить разделы divs рядом друг с другом (по горизонтали). Однако они исчезают, когда я использую flex в качестве дисплея. Я использую div контейнера в качестве контейнера и div разделов, в котором есть 2 раздела. Тогда в каждом из этих разделов есть блоки. Я пытался сделать так, чтобы эти разделы отображались рядом, но они продолжают находиться друг над другом, и когда я пытаюсь изменить отображение на flex или попытаться переместить их, они просто становятся невидимыми. Есть идеи?

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

Ответ №1:

Вам нужно указать ширину .section . Нравится

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

Codepen: https://codepen.io/manaskhandelwal1/pen/mdrGVLd

Ответ №2:

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

display: flex означает, что контейнер позиционирует свои дочерние элементы в соответствии с моделью flexbox, но вам все равно нужно сказать дочерним элементам, чтобы они занимали доступное пространство, установив для них flex значение 1 (или любое другое число, и в этом случае пространство будет распределено между дочерними элементами пропорционально их значению).

Ответ №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>