无法理解为什么弹性框容器内的这些元素没有正确对齐

Question

我试图组织这些元素，如图片和textBox均匀，从边界相等的距离，但它看起来像div与图片里面占用太多的空间，并推动textBox向右。我试过flex-grow:1;还有很多其他的想法，在另一节我自己的SVG中，它似乎工作得很好，但由于某些原因，这里不是。我知道我的代码很潦草和业余，我还在学习基础。

* {
margin: 0;
padding: 0;
}
body {
background-color: #4a4e69;
color: #f2e9e4;
font-family: "Manrope", sans-serif;
}
main {
padding: 5%;
}
section {
height: 40rem;
padding: 1%;
padding-top: 5%;
}
.wrapper {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
margin: 0 auto;
max-width: 80%;
flex-wrap: wrap;
flex-direction: column;
}
.textBox {
margin: 0 auto;
display: flex;
flex-direction: column;
text-align: center;
row-gap: 50px;
justify-content: center;
align-items: center;
max-width: 40%;
height: fit-content;
}
.text {
border: 1px solid white;
margin: 5%;
padding: 5%;
text-align: center;
text-indent: 1ch;
}
.image {
border: 1px solid white;
padding: 2%;
max-width: 50%;
}
.sloganSmall {
padding: 2%;
text-align: center;
display: block;
position: relative;
margin: 0 auto;
}
.shit {
margin: 0 auto;
max-width: fit-content;
text-align: center;
}

<section id="intro" class="wrapper">
<h2 class="sloganSmall">Our mission</h2>
<div class="shit">
<img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" />
</div>
<div class="textBox">
<p class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum.
Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere
fugiat officiis voluptates esse fuga suscipit soluta unde.</p>
</div>
</section>

Answer 1

你的编码太复杂了。对于这个问题与您的amrup，我建议使用CSS-grid。只需创建一个2列的网格，让标题跨两个列:

* {
margin: 0;
padding: 0;
}
body {
background-color: #4a4e69;
color: #f2e9e4;
font-family: "Manrope", sans-serif;
}
.wrapper {
max-width: 80%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
}
.wrapper > h2 {
grid-column: 1 / -1;
text-align: center;
}
.wrapper > .shit {
display: flex;
align-items: center;
}
.wrapper > .shit > img {
width: 100%;
}

<section id="intro" class="wrapper">
<h2 class="sloganSmall">Our mission</h2>
<div class="shit">
<img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" />
</div>
<div class="textBox">
<p class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum.
Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere
fugiat officiis voluptates esse fuga suscipit soluta unde.</p>
</div>
</section>

Answer 2

另一种方法，你需要调整…

* {
margin: 0;
padding: 0;
}
body {
background-color: #4a4e69;
color: #f2e9e4;
font-family: "Manrope", sans-serif;
}
main {
padding: 5%;
}
section {
height: 40rem;
padding: 1%;
padding-top: 5%;
}
.wrapper {
display: inline-block;
margin: 0 auto;
max-width: 80%;
}
.textBox {
margin: 0 auto;
display: block;
text-align: center;
width: 50%;
float: left;
}
.text {
border: 1px solid white;
margin: 5%;
padding: 5%;
text-align: center;
text-indent: 1ch;
}
.image {
border: 1px solid white;
padding: 2%;
max-width: 50%;
}
.sloganSmall {
padding: 2%;
text-align: center;
display: block;
position: relative;
margin: 0 auto;
}
.shitblock {
margin: 0 auto;
float: left;
width: 50%;
display: block;
}
.shit {
margin: 0 auto;
text-align: center;
}

<section id="intro" class="wrapper">
<div class="shitblock">
<h2 class="sloganSmall">Our mission</h2>
<div class="shit">
<img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" />
</div>
</div>
<div class="textBox">
<p class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum.
Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere
fugiat officiis voluptates esse fuga suscipit soluta unde.</p>
</div>
</section>