单行布局

单行左右布局

.line-flex-start-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

dom结构示例：

<div className="line-flex-start-end">// 父元素
  <div>// 子元素
    // 左侧显示内容
  </div>
  <div>// 子元素
    // 右侧显示内容
    // 子元素中的元素表现与没有样式的div中表现一致
    // 块级元素占据子元素的一整行，行内元素不换行
  </div>
</div>

单行等分布局

强制等分，超出宽度的元素强制隐藏，如果某个元素需要的宽度更大，添加类名修改flex的值。

.line-flex-equal-divide {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;

  // >a是为了使Link标签和NavLink标签生效
  > div, > a {
    flex: 1;
    overflow: hidden;
  }
}

dom结构示例

<div className="line-flex-equal-divide">// 父元素
  <div>// 子元素
    // 内容1
    // 子元素中的元素表现与没有样式的div中表现一致
    // 块级元素占据子元素的一整行，行内元素不换行
    // 元素内容超出子元素宽度的部分将强制隐藏，且没有省略号
    // 使用省略号的样式不生效，未找到原因
  </div>
  <div>
    // 内容2
  </div>
  <div>
    // 内容3
  </div>
  ...
</div>

这两种布局的第一层子元素div是相对于父级(line-flex-start-end/line-flex-equal-divide)元素上下居中显示的，但是div的高度等于内容的高度，而不是父级元素的高度，所以如果有事件绑定在左右div上的话，可能会有事件触发区域较小的情况。

这两种布局可以混合嵌套使用。

<div className="line-flex-equal-divide">// 父元素
  <div className="line-flex-start-end">
  // 内容1和内容2左右排列且相对于父元素上下居中
    <div> // 内容1
      <svg className="icon" aria-hidden="true">
        <use xlinkHref="#icon-up" />
      </svg>
    </div>
    <div> // 内容2
      <div>EUR/USD</div>
      <div>0.00169</div>
      <div>0.23%</div>
    </div>
  </div>
  <div>
    <div>卖出价</div>
    <div>1.1345</div>
  </div>
  <div>
    <div>买出价</div>
    <div>1.1366</div>
  </div>
</div>

属性解读：

align-items: center;

center: 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。用于控制元素上下居中对齐。

这里提供一种样式，可以使子元素拉伸至父元素的高度，且子元素内的元素上下居中对齐：

.line-flex-start-end.line-flex-children-stretch,
.line-flex-equal-divide.line-flex-children-stretch {
  align-items: stretch; // 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度

  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

需要注意的是，使用了该样式后，子元素中需要一行显示的多个元素，需要在外层嵌套一个div，且line-flex-children-stretch的子元素不能再直接嵌套这两种布局，比如

<div className="line-flex-equal-divide">
  <div>
    <div>新元/美元</div>
    <div>flex-grow:1.5</div>
  </div>
  <div>
    <span>436.82</span>
    <svg className="icon" aria-hidden="true">
      <use xlinkHref="#icon-close" />
    </svg>
  </div>
</div>

需要变为

<div className="line-flex-equal-divide line-flex-children-stretch">
  <div>
    <div>新元/美元</div>
    <div>flex-grow:1.5</div>
  </div>
  <div>
    <div>// 这里多嵌套了一层
      <span>436.82</span>
      <svg className="icon" aria-hidden="true">
        <use xlinkHref="#icon-close" />
      </svg>
    </div>
  </div>
</div>