在flex框中的flex项目下面放置文本

Question

我在弹性盒容器中放置了两个div。我想在每个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的正确使用...我是在正确使用flex box，还是浮点数更适合此目标？

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而不是添加另一行，该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>