前言

flex: 0 1 auto 的效果是使元素保持自身内容的大小,可以收缩但不拉伸,并根据内容动态调整主轴大小。

一、具体解释

.item {  
flex-grow: 0; // 增长比例，子项合计宽度小于容器宽度，需要根据每个子项设置的此属性比例对剩下的长度进行分配  
flex-shrink: 1; // 回缩比例，子项合计宽度大于容器宽度，需要根据每个子项设置的此属性比例对多出的长度进行分配  
flex-basis: auto; // 设置了宽度跟宽度走，没设置宽度跟内容实际宽度走  
}

一、实际应用

<!DOCTYPE html>

Document

  <div style="display: flex;">
    <div style="padding: 10px;">
      <img style="flex: 0 1 auto;width: 100%;" src="../../../960a304e251f95ca077141e39dc6d7396609523c.jpeg" alt="转存失败，建议直接上传图片文件">
    </div>
    <div style="padding: 10px;">
      <img style="flex: 0 1 auto;width: 100%;" src=" ../../../960a304e251f95ca077141e39dc6d7396609523c.jpeg" alt="转存失败，建议直接上传图片文件">
    </div>
    <div style="padding: 10px;">
      <img style="flex: 0 1 auto;width: 100%;" src=" ../../../960a304e251f95ca077141e39dc6d7396609523c.jpeg" alt="转存失败，建议直接上传图片文件">
    </div>
  </div>

二、效果

三、总结

flex: 0 1 auto 的效果是使元素保持自身内容的大小,可以收缩但不拉伸,并根据内容动态调整主轴大小。这种灵活收缩的布局方式非常适合一些用户头像、图片等场景。

弹性盒模型中灵活的自适应布局属性 - flex: 0 1 auto

前言

一、具体解释

一、实际应用

二、效果

三、总结