Почему flex-direction: элементы рендеринга строк в столбце?

Question

Надеюсь, что кто-то может пролить свет на этот мой вопрос.

У меня есть гибкий контейнер, который имеет 2 гибких контейнера с flex-direction: column.

Однако все это отображается в 1 столбце .

Изначально он отображался в 2 столбцах, но не начинался с одной и той же высоты, а теперь он находится только в одном столбце.

Рекомендуем посоветовать здесь.

<!-- ***** finding container ***** -->

section.finding-container {
  top: 180px;
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content: space-between;
  align-items: center;
  /* height: 100% */
  /* margin-right: 215px; */
}

.find-agent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 350px;
  margin-bottom: auto;
  margin-left: 50px;
}

.find-agent img,
h1,
p,
button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.find-agent h1 {
  font-weight: 550;
  color: #1E95EE;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

.find-agent p {
  color: #3A3C3E;
  font-weight: 350;
  width: 445px;
  height: 71px;
  text-align: center;
  opacity: 1;
}

.try {
  border: 2px solid #1E95EE;
  border-radius: 5px;
  opacity: 1;
  color: #1E95EE;
  font-size: 18px;
  font-weight: Regular;
  height: 50px;
  width: 143px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  justify-content: center;
}

.agent-profiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: auto;
}

.agent-profiles h2,
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.agent-profiles h2 {
  font-weight: 350;
  color: #1E95EE;
  text-align: center;
  width: 182px;
  height: 44px;
  letter-spacing: 0;
  opacity: 1;
}

```

<!-- ***** finding container ***** -->
<section class="finding-container">
  <div class="find-agent">
    <img src="./images/search.svg" alt="search">
    <h1>Find the perfect agent</h1>
    <p>
      No more browsing through thousands of applications. Each week, we'll send you a fresh batch of hand-picked, personally-vetted candidates.
    </p>
    <button type="button" class="try">Try today</button>
  </div>

  <div class="agent-profiles">
    <h2>
      Selections from the Overpass Marketplace
    </h2>
    <img src="./images/profiles.svg" alt="profiles">
  </div>

</section>

Answer 1

У меня есть flex-контейнер, в котором есть 2 flex-контейнера с flex-direction: column.

В вашем CSS есть недопустимый комментарий, который нарушает вашу первую строку кода:

<!-- ***** finding container ***** -->

section.finding-container {
  top: 180px;
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content:space-between;
  align-items: center;
  /* height: 100% */
  /* margin-right: 215px; */
}

Это HTML синтаксис комментариев. В CSS он недействителен, поэтому следующий селектор section.finding-container считается ошибкой и игнорируется. Затем контейнер возвращается к своей модели макета по умолчанию display: block, которая укладывает дочерние элементы по вертикали. (Вы можете увидеть правильный CSS комментирующий синтаксис внизу вашего правила.)

Подробнее о CSS комментирующем синтаксисе и обработке ошибок:

• Почему некоторые из моих CSS правил не работают?

---

Изначально он отображался в 2 столбцах, но не начинался на одной высоте ...

У вас есть всевозможные поля и свойства выравнивания (например, justify-content) для элементов и контейнера, поэтому они отрисовываются на разной высоте.

section.finding-container {
  /* top: 180px; */
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content: space-between;
  /* align-items: center; */
  border: 2px dashed red; /* for illustration purposes */
  padding: 10px; /* for illustration purposes */

}

.find-agent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* margin-top: 350px; */
  /* margin-bottom: auto; */
  /* margin-left: 50px; */
  border: 1px solid green; /* for illustration purposes */  
}

.find-agent img,
h1,
p,
button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.find-agent h1 {
  font-weight: 550;
  color: #1E95EE;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

.find-agent p {
  color: #3A3C3E;
  font-weight: 350;
  width: 445px;
  height: 71px;
  text-align: center;
  opacity: 1;
}

.try {
  border: 2px solid #1E95EE;
  border-radius: 5px;
  opacity: 1;
  color: #1E95EE;
  font-size: 18px;
  font-weight: Regular;
  height: 50px;
  width: 143px;

  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  justify-content: center;
}

.agent-profiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  /* margin-bottom: auto; */
  border: 1px solid black; /* for illustration purposes */    

}

.agent-profiles h2,
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.agent-profiles h2 {
  font-weight: 350;
  color: #1E95EE;
  text-align: center;
  width: 182px;
  height: 44px;
  letter-spacing: 0;
  opacity: 1;

}

<section class="finding-container">
  <div class="find-agent">
    <img src="./images/search.svg" alt="search">
    <h1>Find the perfect agent</h1>
    <p>
      No more browsing through thousands of applications.
      Each week, we'll send you a fresh batch of hand-picked,
      personally-vetted candidates.
    </p>
    <button type="button" class="try">Try today</button>
  </div>
  <div class="agent-profiles">
    <h2>
      Selections from the
      Overpass Marketplace
    </h2>
    <img src="./images/profiles.svg" alt="profiles">
  </div>
</section>