如何实现双标题自适应排列：同行5px间距，换行18px间距

直接给title-wrapper分别设置行间距和列间距的不同值，就能精准实现需求：

.title-wrapper {
  display: flex;
  flex-wrap: wrap;
  color: #FFFFFF;
  border-left: 1px solid white;
  padding-left: 2.2%;
  /* 并排显示时的左右间距 */
  column-gap: 5px;
  /* 换行后的上下间距 */
  row-gap: 18px;
}

对应的HTML结构保持不变：

<div class="title-wrapper">
  <div class="upper-title">
    DYNAMICALLY ADDING TITLE
  </div>
  <div class="lower-title">
    DYNAMICALLY ADDING TITLE
  </div>
</div>

原理说明 #

• flex布局的column-gap仅作用于同一行的元素间，也就是标题并排时，左右间距为5px；
• row-gap仅作用于换行后的不同行元素间，标题换行后自动使用18px的上下间距；
• 容器高度会跟随内容自动调整，左侧边框自然和容器高度保持一致，不会出现单行显示时多余间距的问题。

之前用grid布局如果统一设置gap值，就会导致并排时间距也变成18px，现在通过flex分开定义行、列间距，直接解决了这个问题。

内容的提问来源于stack exchange，提问作者dean89