html - Flexbox - 显示 : flex - My contents appear in one line

Question

我现在正在学习 flexbox，但遇到了一个问题。我想在我的框中添加两个段落，但这些段落出现在同一行并且两个变成了一个？为什么会这样？ display: flex 把内容放在一行？我尝试了 flex-direction: column for .boxes1(并在 .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>