Question

我正在使用flex-box来显示不同长度的小文本。

但是，当将它们包裹在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

Answer 1

如果我正确理解了您的问题，则问题出在

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

如果将其更改为仅width: 50%，则可以解决您的问题。

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

为什么我的弹性物品会出现在容器外？

1 个答案: