css - flexbox 中元素之间的行分隔符

Question

我正在尝试使用 display:flex; 在 CSS 中使用相同的文本间距制作一行元素。

这就是我得到的，我使用 display: inline-block; 和文本之间的间距差异实现了它 - 我希望每个文本都相同。

element {
  border-width: 1px;
  border-style: solid;
  color: rgb(0, 146, 247);
  display: inline-block;
  height: 18px;
  border-radius: 30px;
  vertical-align: middle;
}

.footertext {
  font-family: 'Open Sans', sans-serif;
  color: rgb(124, 134, 205);
  margin-left: 20px;
  margin-right: 20px;
  display: inline-block;
  vertical-align: middle;
}

<div>
  <p class="footertext">
    First Line
  </p>
  <element></element>
  <p class="footertext">
    ABC
  </p>
  <element></element>
  <p class="footertext">
    Third Line
  </p>
  <element></element>
  <p class="footertext">
    DEFG
  </p>
</div>

我需要文本之间的那些有趣的元素，当我尝试使用 display:flex; 时，这些元素超出了界限。

Answer 1

flex 怎么样，除了第一个元素之外的所有元素都有左边框:

div {
  display: flex;
}

.footertext {
  padding-left: 20px;
  padding-right: 20px;
}

.footertext + .footertext {
  border-left: 3px solid rgb(0, 146, 247);
}

* { box-sizing: border-box; }

/* non-essential decorative styles */
.footertext {
  font-family: 'Open Sans', sans-serif;
  color: rgb(124, 134, 205);
}

<div>
  <p class="footertext">First Line</p>
  <p class="footertext">ABC</p>
  <p class="footertext">Third Line</p>
  <p class="footertext">DEFG</p>
</div>