为什么是弹性方向：在列中呈现行的项目？

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

我有一个伸缩容器，其中有2个带有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注释语法和错误处理的更多详细信息：

• Why are some of my CSS rules not working?

---

最初显示为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>