Question

我正在尝试使用Flexbox创建3行带有单独标题的段落。这些段落很好，但标题（h2）不在这些段落的顶部，而是有点模糊了每个段落的左侧。

已编辑以添加HTML。另外，我只是想在本地服务器上复制我喜欢的网站，所以这些措辞都不是我的。

.container {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

.container h2 {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: hsl(0, 11%, 16%);
}

.container p {
  position: block;
  margin: 25px;
  50px;
  75px;
  100px;
}

<div class="container">
  <h2>First visit? Don't be skittish.</h2>
  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>
  <h2>Boarding, Grooming & Doggie Daycare</h2>
  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.
  </p>
  <h2>Refill Prescriptions</h2>
  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>
</div>

Answer 1

如果出于某种原因您仅需为此使用flexbox，请按照以下步骤操作：

.container {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}

.container h2 {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: hsl(0, 11%, 16%);
  flex: 1 1 100%;
}

.container p {
  margin: 25px 50px 75px 100px;
  flex: 1 1 100%;
}

<div class="container">
  <h2>First visit? Don't be skittish.</h2>
  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>
  <h2>Boarding, Grooming & Doggie Daycare</h2>
  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.
  </p>
  <h2>Refill Prescriptions</h2>
  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>
</div>

但是，没有flexbox，您可以实现相同的目的。

paragraphs和headers是block level elements，默认情况下，它们将以这种方式显示。

.container h2 {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: hsl(0, 11%, 16%);
}

.container p {
  margin: 25px 50px 75px 100px;
}

<div class="container">
  <h2>First visit? Don't be skittish.</h2>
  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>
  <h2>Boarding, Grooming & Doggie Daycare</h2>
  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.
  </p>
  <h2>Refill Prescriptions</h2>
  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>
</div>

Answer 2

默认情况下，柔性方向：行将元素水平放置，将其更改为柔性方向：列可能会通过元素堆栈垂直。

Flexbox在行上格式化标题的问题

2 个答案: