Flexbox -display: flex - мое содержимое отображается в одну строку

Question

Я изучаю flexbox и столкнулся с проблемой. Я хотел добавить два фараграфа в свои коробки, но фараграфы появляются в одной строке, и эти два стали одним? Почему так случилось? display: flex помещает содержимое в одну строку? Я попробовал flex-direction: column для .boxes1 (и был создан для .boxes1 в .mainbox1, он работал, но хочу узнать решение для вышеуказанной проблемы.

.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

display: flex всегда сжимайте элементы настолько сильно, насколько это возможно, прежде чем нажимать их на следующую строку.

То, что вы забыли, это flex-wrap: wrap и width: 100% для p элементов. В результате достигается желаемый эффект (решение 1).

Другой подход (решение 2) заключается в использовании flex-direction: column для boxes1.

Если вы новичок в flexbox, я рекомендую это руководство .

Решение 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>

Answer 2

По умолчанию 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 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

Если вам нужно, чтобы boxes1 было display: flex, тогда я бы просто добавил еще один div внутри boxes1 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>