为什么 flex-direction: row 在列中渲染项目？

Question

Hope someone can shed light on this question of mine.

I have a flex container, which has 2 flex containers with flex-direction: column .

However, it all displays in 1 column.

Initially, it displayed in 2 columns but did not start at the same height, and now it is in one column only.

Advise here will be appreciated.

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

I have a flex container, which has 2 flex containers with flex-direction: column .

You've got an invalid comment in your CSS, which is breaking your first line of code:

<!-- ***** 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; */
}

That's HTML commenting syntax. In CSS, it's invalid, so the following section.finding-container selector is seen as an error and ignored. The container then falls back to its default layout model, display: block , which stacks child elements vertically. (You can see the proper CSS commenting syntax at the bottom of your rule.)

More details about CSS commenting syntax and error handling:

• Why are some of my CSS rules not working?

---

Initially, it displayed in 2 columns but did not start at the same height ...

You've got all sorts of margins and alignment properties (such as justify-content ) set on the items and container, so they're rendering at different heights.

 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>