Question

我想使用flexbox在div中间框内将段落分为4部分（2行，2列）。

不知道该如何进行。

display: flex;
flex-direction: column;
flex-wrap: wrap;

<div class="mid-box"> 
<p><strong>Learn</strong>Get the facts about this issue and how we're helping.</p>
<p><strong>Volunteer</strong>Find out about upcoming events that need your help.</p>
<p><strong>Share</strong>Let your social media networks know about this important cause.</p>
<p><strong>Donate</strong>Help us raise money to make a big difference with this issue.</p>
</div>

我想按以下方式划分和对齐

标签-

| Learn | Volunteer |
|-------------------|
| Share | Donate    |

Answer 1

应用于父元素flex-wrap: wrap;和子元素flex-basis: 50%属性。

结果

.mid-box {
  display: flex;
  flex-wrap: wrap;
}

p {
  flex-basis: 50%;
}

p:nth-child(1) {
  background: orange;
}

p:nth-child(2) {
  background: lightblue;
}

p:nth-child(3) {
  background: lightcoral;
}

p:nth-child(4) {
  background: lightgreen;
}

<div class="mid-box">
  <p><strong>Learn</strong>Get the facts about this issue and how we're helping.</p>
  <p><strong>Volunteer</strong>Find out about upcoming events that need your help.</p>
  <p><strong>Share</strong>Let your social media networks know about this important cause.</p>
  <p><strong>Donate</strong>Help us raise money to make a big difference with this issue.</p>
</div>

如何使用flexbox将<div>内的<p>分为2行2列的框？

1 个答案: