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;
}