响应式按钮组件-基础版

在近期的一次项目开发中，由于要建设公司内部的UI组件库，设计师产出了一套UI规范，在响应式方面，针对按钮组件提出了以下几点要求：

按钮文本字数<=4字时，按钮宽度固定为88px
按钮文本字数>4字时，每增加一个字符，按钮宽度就自动增加该字符的宽度
按钮的左右内边距不得小于16px

实现

/* css */
.button {
  display: inline-flex;
  align-items: center;
  min-width: 88px;
  height: 32px;
  font-size: 14px;
  color: #fff;
  background: #4E90FF;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
}
.button:hover {
  background: #71A6FF;
}
.button:active {
  background: #3C7DEB;
  border-radius: 1.92px;
}
.button-padding {
  flex: auto;

  min-width: 16px;
}

<!-- html -->
<div class="button">
  <div class="button-padding"></div>
  按钮
  <div class="button-padding"></div>
</div>

效果图

2字按钮

3字按钮

4字按钮

5字按钮

10字按钮

原理

4字以内时，button由于存在min-width: 88px，宽度可以固定为88px；button-padding则由于flex: auto的存在而去平分除文本以外的水平空间
当字数超过4字时，button-padding会因为水平空间不足而受到挤压，但由于min-width的存在，即使水平空间再不够，宽度也不会小于16px，这时button的宽度就会因为字符的增加而增加，即达到响应式的效果

原文链接：www.guoyunfeng.com/2018/06/12/…