html - 具有不同列宽的响应式 flexbox 网格

Question

我做了一个时间选择器，但我在使数值位于中心时遇到了问题。

<div class="selector-wrap">
  <div>
    <span>12</span>
    <div class="control-wrap">
      <div class="caret-wrap">
        <span class="caret">&#9650;</span>
      </div>

      <div class="caret-wrap">
        <span class="caret">&#9660;</span>
      </div>
    </div>
  </div>

  <div>
    <span>30</span>
    <div class="control-wrap">
      <div class="caret-wrap">
        <span class="caret">&#9650;</span>
      </div>

      <div class="caret-wrap">
        <span class="caret">&#9660;</span>
      </div>
    </div>
  </div>

  <div>
    <span>AM</span>
  </div>
</div>

演示 https://jsfiddle.net/h6fLzkop/

此外，我使用固定高度和调节器，可以吗？如果插入符号的字体大小被更改，那么它将中断。

Answer 1

尝试像这样在另一个 div 中分隔数字

  <div>
   <span>20</span>
  </div>

参见:https://codepen.io/navdeepsingh/pen/bvYRyM