flex-basis

1. flex-basis 表示 items 被放入 flex 容器前的大小，也就是 items 的理想大小，不是真实大小（item 真实大小取决于 flex 容器的宽度）
2. flex-basis 与 width 同时存在时，width 不生效，宽度取自flex-basis
3. 只存在 width 或者 flex-basis，同时 items 的宽度和大于 flex 的宽度时，items 默认等比缩小（flex-shrink: 1）

应用准则： content -> width -> flex-basis (limited by max|min-width)

画分割线

1. 使用伪元素和绝对定位

<div class="box">
  <div class="box-content">左</div>
  <div class="box-content">右</div>
</div>

.box {
  display: flex;
  align-items: center;
  width: 200px;
  height: 30px;
  background: #f27722;
  color: #fff;
}
.box-content {
  width: 50%;
  text-align: center;
}
/* 分割线 */
.divider {
  position: relative;
}
.divider::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  /* 画线 */
  width: 0;
  height: 20px;
  border-left: 1px solid #e8e8e8;
}