将文本放置在弹性框中的弹性项目下方

Question

我有两个div位于flex盒容器中。我想把文字放在每个div下面。我得到了它的工作，但我想知道是否有更好的方法来做到这一点，或者这是否正确使用Flexbox。

我这样做的方法是使用一个flex容器来定位div，然后我将一个flex容器放在那个用于定位文本的容器下面。我使所有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>

这是一个codepen：https://codepen.io/anon/pen/jdvWQr

所以我的最后一个问题是：我是否正确使用柔性盒，或者浮子更适合这个目标？谢谢。

Answer 1

...但我想知道是否有更好的方法来做到这一点，或者这是否正确使用Flexbox ......我是否正确使用弹性盒，或者浮子更适合这个目标？

Flexbox适用于您的布局。但是您可以使用CSS Grid以更简单和高效的方式构建它。

revised 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>

Answer 2

你的方法有效，但这里有一点点变化。

而不是添加另一行，创建一个内部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>