Flexbox -display：flex-我的内容显示在一行中

Question

我现在正在学习flexbox，但遇到了问题。 我想在框内添加两个段落，但是这些段落出现在同一行中，并且两者合而为一？ 为什么会发生？显示：flex将内容放在一行吗？ 我尝试了.boxes1的flex-direction：列（并在.mainbox1中创建为.boxes1，它可以工作，但想知道上述问题的解决方案。

.mainbox1 {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #00a400;
  color: #00a400;


}

.boxes1 {
  display: flex;
  border: 1px solid black;
  flex: 1;
  height: 100px;
}

<div class="mainbox1">

      <div class="boxes1">
        <p>KALUKA</p>
        <p>AKULA</p>
      </div>

      <div class="boxes1">
        <p>KALUKA</p>
        <p>AKULA</p>
      </div>
      
 </div>     

Answer 1

默认情况下，flex个项目位于flex-direction: row中-您需要将flex-direction: column添加到您的boxes1类中

.mainbox1 {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #00a400;
  color: #00a400;


}

.boxes1 {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  flex: 1;
  height: 100px;
}

<div class="mainbox1">

      <div class="boxes1">
        <p>KALUKA</p>
        <p>AKULA</p>
      </div>

      <div class="boxes1">
        <p>KALUKA</p>
        <p>AKULA</p>
      </div>
      
 </div>    

Answer 2

如果您需要将boxes1设为display: flex，那么我只需在boxes1 div中添加另一个div并将所有内容放在其中。

.mainbox1 {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #00a400;
  color: #00a400;


}

.boxes1 {
  display: flex;
  border: 1px solid black;
  flex: 1;
  height: 100px;
  flex-wrap: wrap;
}

<div class="mainbox1">

      <div class="boxes1">
        <div class="box-content">
          <p>KALUKA</p>
          <p>AKULA</p>
        </div>
      </div>

      <div class="boxes1">
        <div class="box-content">
          <p>KALUKA</p>
          <p>AKULA</p>
        </div>
      </div>
      
 </div>

Answer 3

.mainbox1 {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #00a400;
  color: #00a400;


}

.boxes1 {
  /* display: flex; remove this! */
  border: 1px solid black;
  flex: 1;
  height: 100px;
}

<div class="mainbox1">

      <div class="boxes1">
        <p>KALUKA</p>
        <p>AKULA</p>
      </div>

      <div class="boxes1">
        <p>KALUKA</p>
        <p>AKULA</p>
      </div>
      
 </div>

Answer 4

display: flex在将元素推到下一行之前总是尽可能地缩小元素。

对于flex-wrap: wrap元素，您忘记的是width: 100%和p。这样做可以达到您想要的效果（解决方案1）。

另一种方法（解决方案2）是将flex-direction: column用于boxes1。

如果您是Flexbox的新手，我建议this guide。

解决方案1 ​​

.mainbox1 {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #00a400;
  color: #00a400;
}

.boxes1 {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  flex: 1;
  height: 100px;
}

.boxes1 p {
  width: 100%;
}

<div class="mainbox1">

  <div class="boxes1">
    <p>KALUKA</p>
    <p>AKULA</p>
  </div>

  <div class="boxes1">
    <p>KALUKA</p>
    <p>AKULA</p>
  </div>

</div>

解决方案2

.mainbox1 {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #00a400;
  color: #00a400;
}

.boxes1 {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  flex: 1;
  height: 100px;
}

<div class="mainbox1">

  <div class="boxes1">
    <p>KALUKA</p>
    <p>AKULA</p>
  </div>

  <div class="boxes1">
    <p>KALUKA</p>
    <p>AKULA</p>
  </div>

</div>