如何分解 flex 的元素
How do I break out a element of flex
我有一个 h2 和一个按钮，用于我正在处理的投资组合的“关于我”页面
我正在努力使“关于我”的 h2 位于页面顶部，“更多 ->”按钮位于“关于文本”的底部 div
我将父元素设置为 flex 行，我还有一个媒体查询，因此它在较小的屏幕上变为一列。
.about-me {
width: 100%;
height: 100vh;
background-color: #f5a962;
display: flex;
flex-direction: row;
align-items: center;
}
.about-text {
height: 85%;
width: 45%;
overflow: hidden;
border: 2px solid red; /* will be removed when pushed to AWS */
}
.about-text h3 {
font-family: 'Titillium Web', sans-serif;
color: white;
font-size: clamp(2em, 1vw, 4em);
padding: 1%;
}
.about-text p {
font-family: 'Titillium Web', sans-serif;
padding: 1em;
color: white;
font-size: clamp(1em, 1vw, 4em);
text-indent: 2em;
}
.about-text input {
border-radius: 35%;
flex: none;
}
.about-img {
border-radius: 50%;
}
@media only screen and (max-width: 600px) {
.about-me {
flex-direction: column;
}
.about-text {
flex-direction: column;
width: 90%;
}
}
<div class="about-me">
<h2>About Me</h2>
<div class="about-text">
<h3>Hello,</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
</div>
<form action="#">
<input type="submit" value="More →" />
</form>
<img class="about-img"src="img.jpg" alt="A image">
</div>
我不是 100% 确定这会奏效，但我记得有
align-self: flex-start; // For top of the container
和
align-self: flex-end; //For the bottom of the container
您必须将这些样式应用到特定元素，以及您希望它们排列的方式。所以这里 align-self flex-start on h2 和 align-self flex-end on form
您可以继续将 <h2>About Me</h2> 放在 <div class="about-me"> 之外。
将您的代码更改为：
<h2>About Me</h2>
<div class="about-me">
<div class="about-text">
<h3>Hello,</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
</div>
<form action="#">
<input type="submit" value="More →" />
</form>
<img class="about-img"src="img.jpg" alt="A image">
</div>
问题是您的 about-me div 中有 flex-direction: row ，这会导致其中的所有元素排成一行，因此您所要做的就是放置about-me div 之外的 h2 航向，一切顺利。
我有一个 h2 和一个按钮，用于我正在处理的投资组合的“关于我”页面
我正在努力使“关于我”的 h2 位于页面顶部，“更多 ->”按钮位于“关于文本”的底部 div
我将父元素设置为 flex 行，我还有一个媒体查询，因此它在较小的屏幕上变为一列。
.about-me {
width: 100%;
height: 100vh;
background-color: #f5a962;
display: flex;
flex-direction: row;
align-items: center;
}
.about-text {
height: 85%;
width: 45%;
overflow: hidden;
border: 2px solid red; /* will be removed when pushed to AWS */
}
.about-text h3 {
font-family: 'Titillium Web', sans-serif;
color: white;
font-size: clamp(2em, 1vw, 4em);
padding: 1%;
}
.about-text p {
font-family: 'Titillium Web', sans-serif;
padding: 1em;
color: white;
font-size: clamp(1em, 1vw, 4em);
text-indent: 2em;
}
.about-text input {
border-radius: 35%;
flex: none;
}
.about-img {
border-radius: 50%;
}
@media only screen and (max-width: 600px) {
.about-me {
flex-direction: column;
}
.about-text {
flex-direction: column;
width: 90%;
}
}
<div class="about-me">
<h2>About Me</h2>
<div class="about-text">
<h3>Hello,</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
</div>
<form action="#">
<input type="submit" value="More →" />
</form>
<img class="about-img"src="img.jpg" alt="A image">
</div>
我不是 100% 确定这会奏效，但我记得有
align-self: flex-start; // For top of the container
和
align-self: flex-end; //For the bottom of the container
您必须将这些样式应用到特定元素，以及您希望它们排列的方式。所以这里 align-self flex-start on h2 和 align-self flex-end on form
您可以继续将 <h2>About Me</h2> 放在 <div class="about-me"> 之外。
将您的代码更改为：
<h2>About Me</h2>
<div class="about-me">
<div class="about-text">
<h3>Hello,</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
</div>
<form action="#">
<input type="submit" value="More →" />
</form>
<img class="about-img"src="img.jpg" alt="A image">
</div>
问题是您的 about-me div 中有 flex-direction: row ，这会导致其中的所有元素排成一行，因此您所要做的就是放置about-me div 之外的 h2 航向，一切顺利。