Размещение текста под флекс-элементами в флекс-боксе

Question

У меня есть два элемента div, которые расположены в контейнере flex box.Я хочу поместить текст под каждым div.У меня все получилось, но мне интересно, есть ли лучший способ сделать это или это даже правильное использование Flexbox.

Я сделал это, используя гибкий контейнер для позиционирования div,и затем я помещаю гибкий контейнер под тот, который использовался для размещения текста.Я сделал все div одинаковой ширины, а затем использовал word-wrap: break-word;, чтобы предотвратить переполнение текста за пределами div.

Вот моя цель:

* {
  margin: 0;
  padding: 0;
}

section h2 {
  text-align: center;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  word-wrap: break-word;
  /*Stop text from overflowing outside the div*/
}

.text-row div {
  border: 2px solid blue;
  width: 33%;
  height: 33%;
  word-spacing: initial;
}

.box {
  width: 33%;
  height: 250px;
}

.row .box-left {
  background-color: black;
}

.row .box-right {
  background-color: blue;
}

<section>

  <h2>HEADER</h2>

  <div class="row">
    <div class="box box-left"></div>
    <div class="box box-right"></div>
  </div>

  <div class="text-row">
    <div class="box-left-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. asdfasdffasdfadsfasdsdf
    </div>
    <div class="box-right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</section>

Вот кодекс: https://codepen.io/anon/pen/jdvWQr

Итак, мой последний вопрос: правильно ли я использую flex box, или лучше подходят поплавки?для этой цели?Спасибо.

Answer 1

Ваш метод работает, но здесь есть небольшое отклонение.

Вместо добавления еще одной строки создайте внутренний элемент div, содержащий как верхний, так и нижний вложенные контейнеры в каждой половине.

Это дает вам больше гибкости и позволяет рассматривать каждую половину какгруппа для некоторых целей. И код немного проще.

*{margin:0;padding:0;}
section h2{text-align:center;}
.row{display:flex;flex-direction:row;justify-content:space-between;}

.box{width:33%;}
.bl-top, .br-top{height:80px;display:flex;align-items:center;justify-content:center;}

.row .bl-top{background-color:palegreen;}
.row .br-top{background-color:lightblue;}

.bl-bot{border:1px solid palegreen;}
.br-bot{border:1px solid lightblue;}

<section>

  <h2>HEADER</h2>

  <div class="row">
    <div class="box box-left">
      <div class="bl-top"><div>Side Left</div></div>
      <div class="bl-bot">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. asdfasdffasdfadsfasdsdf</div>
    </div>
    <div class="box box-right">
      <div class="br-top"><div>Side Right</div></div>
      <div class="br-bot">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>
</section>

Answer 2

... но мне интересно, есть ли лучший способ сделать это или это даже правильное использование Flexbox ... Правильно ли я использую flex box, или поплавки лучше подходят дляэта цель?

Flexbox отлично подойдет для вашего макета.Но вы можете создать его с большей простотой и эффективностью, используя CSS Grid.

пересмотренный codepen

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 250px 1fr;
  height: 100vh;
  grid-template-areas: " header header header " 
                       "  black    .    blue  " 
                       " text-left . text-right";
}

h2 {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.box-left {
  grid-area: black;
  background-color: black;
}

.box-right {
  grid-area: blue;
  background-color: blue;
}

.box-left-text {
  grid-area: text-left;
}

.box-right-text {
  grid-area: text-right;
}

.box-right~div {
  align-self: start;
  border: 2px solid blue;
}

* {
  margin: 0;
  padding: 0;
}

<section>
  <h2>HEADER</h2>
  <div class="box box-left"></div>
  <div class="box box-right"></div>
  <div class="box-left-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. asdfasdffasdfadsfasdsdf
  </div>
  <div class="box-right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</section>