我在一个容器/包装器中有三个独立的元素。我已经应用了flex，所以图像和文本是并排的。然而，我想要"；向下滚动"；div放置在其他两个元素下面，同时仍然使用Flex。是否有任何flex属性只在前两个元素上应用flex？
图像：https://gyazo.com/a391508e26aff2486103579134c051e1
<section class="home-section">
<div class="home-wrapper">
<div class="home-column">
<div class="home-row">
<h1>Centuries Gaming</h1>
<h2>Roleplay on a different level</h2>
<p>From the aspirations and dreams of others, we stand tall, proud, and loyal
to our visions and project. We provide the best and most immersive...</p>
<div class="home-buttons">
<div class="home-button home-button-left">
<a href="https://form.jotform.com/202344710763046">Apply</a>
</div>
<div class="home-button home-button-right">
<a href="#about">Read More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="home-row">
<div class="home-image">
<img src="images/home-image.png" alt="Vehicle Drifting">
</div>
</div>
</div>
</div>
<div class="home-scroll">
<button>
<span>Scroll Down</span>
<img src="icons/mouse.svg" alt="Mouse Scroll Icon">
</button>
</div>
</section>
/* Home Section */
.home-section {
height: 100vh;
display: flex;
align-items: center;
}
.home-column {
display: flex;
}
.home-row h1 {
font-size: 60px;
color: white;
font-weight: 700;
margin-bottom: 7x;
}
.home-row h2 {
font-weight: 500;
color: #ffffff80;
margin-bottom: 20px;
}
.home-row p {
color: #ffffff80;
font-size: 14px;
max-width:600px;
}
.home-row .home-buttons {
display: flex;
margin-top: 50px;
}
如果将flex-direction: column;添加到.home部分，则父元素将垂直显示其子元素。滚动元素将位于顺序元素下方。
您可以使用flex direction:column
.home-section {
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
}
默认值为row，但您可以更改该属性以垂直堆叠元素。https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction