弹性布局flex-grow和flex-shrink

蓓蕾心晴

发布于 2020-07-29 14:55:15

1.1K0

发布于 2020-07-29 14:55:15

一、背景

弹性布局使用了很久了，一直停留在基本的用法，比如横向布局，竖向布局，垂直居中，水平居中，着实非常好用，当然，超低版本安卓有一些兼容性问题，但是总会出现一些奇奇怪怪的问题，比如横向排列的时候，其中的一个icon 元素会被截断，因为没有设固定宽度，之前是通过设定min-width，max-width来解决的，今天重新理了下flex 相关语法，发现以下三个属性简直是好用啊！

二、基本概念理解

flex-grow：控制剩余空间是否放大，默认0，剩余也不放大，适合不确定文字数量自适应宽度

flex-shrink：控制空间不够的时候是否缩小，默认1，即如果空间不够则缩小，可以正常展示全该展示的东西，比如icon、图片等，如果设为0，则会出现超出截断的问题

flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

flex属性：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

**速记方法**

0：false，即不会缩小/不会放大

1：true，即会缩小/会放大

三、实现

如果实现左侧文字长度不确定，右侧展示icon和不确定长度的标识文案的banner, 且文案超出一定宽度会自动换行，且希望icon始终展示在右侧，写法如下：

/*外层盒子*/
.container{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-around;
}
/*左侧文字*/
.left{
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      white-space: nowrap;
      word-wrap: break-word;
      word-break: break-all;
      /* 弹性布局，空间有剩余，允许占用剩余空间，如果要收缩，也可以收缩，因为会切换为两行，auto则代表宽度始终为实际宽度*/
      flex: 1 1 auto;
   
}
/*右侧icon和标识文字盒子*/
.right{
      /*弹性布局，icon及其他标识文案，宽度不固定，则flex-basis:auto，始终为实际宽度，但是不能被截断，也不要占用多余的空间，多余的给文字使用，即不允许占用多余空间，也不允许收缩*/
      flex:0 0 auto;
}

参考链接且推荐好文：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-07-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

auto