Question

我试图使用display: flex，但有些inline-block永远不应该缩小。我不确定如何做到这一点。

这是我的情况的重演：

＆＃13;

.marker {
  width: 2em;
  height: 2em;
  background-color: #cef;
  border: 1px solid gray;
  margin-right: 5px;
}

label {
  display: flex;
  align-items: flex-start;
}

＆＃13;

<div class="container" style="width: 200px; border: 1px solid #ccc; padding: 10px;">
  <p>The blue boxes should be 2em wide!</p>
  <label>
    <span class="marker"></span>
    <span class="text">Some rather long text which is the whole reason for using flexbox.</span>    
  </label> 
  <label>
    <span class="marker"></span>
    <span class="text">Short text.</span>    
  </label> 
</div>

＆＃13;

问题是.marker不是指定的width: 2em，而是相当狭窄。

我已阅读css-tricks' helpful Guide to Flexbox。唯一看似有用的属性是flex-shrink（我期待的是＃34;永不收缩＆＃34;属性），但发现无法将其用于我的目的。我已经撇去了the MDN flex pages，但也找不到解决办法。最后，我还仔细阅读了重复的＃34;建议Stack Overflow在我写这个问题时给了我，但也没有解决方案。

如何指定弹性项目永远不会超出某个最小宽度？

Answer 1

您可以使用flex-basis和flex-shrink属性。

CSS flex-basis属性指定了flex基础弹性项目的初始主要大小。该属性决定了大小除非使用box-sizing指定，否则将使用内容框。

按如下方式更改.marker：

＆＃13;

.marker {
  flex: 0 0 2em;
  height: 2em;
  background-color: #cef;
  border: 1px solid gray;
}

label {
  display: flex;
  align-items: flex-start;
}

＆＃13;

<div class="container" style="width: 200px; border: 1px solid #ccc; padding: 10px;">
  <p>The blue box should be 2em wide!</p>
  <label>
    <span class="marker"></span>
    <span class="text">Some rather long text which is the whole reason for using flexbox.</span>    
  </label>  
</div>

＆＃13;

或者你可以继续使用width: 2em并使用这个flex-shorthand：

.marker
{
    flex: 0 0 auto;
}

您遇到的问题是由flex属性的默认值引起的。 flex-container的每个子节点都变成了一个弹性项目：flex-grow:1; flex-shrink: 1; flex-basis: 0%;（See here for more info）。

此属性允许您的flex项缩小，这在您的实现中是不需要的。

Answer 2

请确保在您的展示广告代码上使用自动换行代码：

display:flex;
flex-wrap:wrap;

否则，min-width：xxx无效。

如何指定弹性项目具有一定的最小宽度？

2 个答案: