为什么我的弹性物品在容器外面转向？

Posted 2021-04-03

我正在使用弹性框来显示不同长度的小文本。

但是，当它们在flex-direction: column;中包装时，它们会在屏幕外方向上移动。我希望它们被包装在容器内，以便在一个页面上可见。

为什么他们向右转（你必须在codepen窗口向右滚动才能看到'测试服务5'，'6'和'7'），什么是解决方案？

.content {
  background-color: #ffa676;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-heading {
  width: 100%;
}

.content-main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: 750px;
  width: 100%;
  background-color: #c5dda9;
}

.content-main>div {
  display: inline-block;
  background-color: #f2c888;
  margin: 3px;
  padding: 5px;
  max-width: 50%;
}

<div class="content">
  <div class="content-heading">
    <p class="pagetitle-pretext">My</p>
    <h1 class="pagetitle">Services</h1>
    <hr>
  </div>
  <div class="content-main">
    <div>
      <h2>Test Service 1</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum </p>
    </div>
    <div>
      <h2>Test Service 2</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad
        eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 3</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad
        eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 4</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinpopulo integre adipiscing
        ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinpopu lo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinax
        vituperatoribus. Ad eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 5</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populan his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad eripuit concludaturque eum. Ne eirmo integre adipiscing ei, no habeo aeque
        soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 6</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat olor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cucum. Nominati
        argumentum an his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 7</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius onestatis, nec id pertinax vituperatoribus. Ad eripuit
        concludaturque eum. Ne eirm</p>
    </div>
  </div>
</div>

codepen

答案

如果我已正确理解您的问题，问题就在于此

.content-main > div {
   max-width: 50%;
}

如果你把它改成width: 50%它可以解决你的问题。

注意：使用此方法，每个元素将始终为宽度的50％（即使没有足够的元素可以包裹），因此它可能不是一个完美的解决方案。