Question

我有三列想要排成一行的文本。我使用flex box来做到这一点，但是当我将浏览器缩小到某个点时，它们只是消失而不是缩小？我尝试将它们设置为flex-shrink：1;但它也不起作用。我对此非常陌生，因此将不胜感激。

.flex-container{
  display: flex; 
  flex-direction: row; 
  justify-content: space-around; 
  align-items: center;
  height: 350px;
  min-width: 0; 
  
}

.flex-container div { 
  max-width: 200px; 
  min-width: 0;
  font-size: 18px; 
  flex-shrink: 1; 

}

<div class="flex-container">
<div class="reviews-text1">"about 1-2 sentences"
   <p class="reviews-buyername1">-Name</p></div>
<div class="reviews-text2">"about 1-2 sentences"
   <p class="reviews-buyername2">-Name</p></div>
<div class="reviews-text3">"about 1-2 sentences"
   <p class="reviews-buyername3">-Name</p></div>
</div>

Answer 1

当浏览器窗口非常狭窄时，文本会消失，因为您将flex项目设置为min-width: 0，这使它们可以缩小到零宽度。删除该规则。或将其替换为min-width: auto（默认设置），以防止项目缩小到其内容大小以下。

.flex-container{
  display: flex; 
  justify-content: space-around; 
  align-items: center;
  height: 350px;
  border: 1px dashed black; /* for demo only */
}

.flex-container div { 
  flex: 0 1 200px;  /* fb: 0, fs: 1, fb: 200px (same as max-width in this case) */
  font-size: 18px; 
  background-color: lightgreen;  /* for demo only */
}

<div class="flex-container">
  <div class="reviews-text1">"about 1-2 sentences"
    <p class="reviews-buyername1">-Name</p>
  </div>
  <div class="reviews-text2">"about 1-2 sentences"
    <p class="reviews-buyername2">-Name</p>
  </div>
  <div class="reviews-text3">"about 1-2 sentences"
    <p class="reviews-buyername3">-Name</p>
  </div>
</div>

jsFiddle demo

此处有更多详细信息：Why don't flex items shrink past content size?

Flexbox没有响应

1 个答案:

jsFiddle demo