flexbox中元素之间的行分隔符

时间:2017-12-15 00:58:32

标签: css css3 flexbox

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

这是我得到的,我使用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>
&#13;
&#13;
&#13;

我需要在文本之间使用那些有趣的元素,当我尝试使用display:flex;这些元素超出范围时。

3 个答案:

答案 0 :(得分:4)

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>

答案 1 :(得分:3)

这是一种简化的方法。

.footer-texts {
  display: flex;
  color:rgb(124,134,205);
  font-family: sans-serif;
}
.footer-texts > span {
  position: relative;
  padding: .5rem 1rem;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex: 0 1 25%;
}
.footer-texts > span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 25%;
  width: 2px;
  height: 50%;
  background-color:rgb(0, 146,247);
}
<div class="footer-texts">
  <span>First Line</span>
  <span>ABC</span>
  <span>Third Line<br />two lines</span>
  <span>DEFG</span>
</div>

一些注意事项:

  • 而不是将同一个类添加到所有子项,只需使用.someClassName > span向父项和样式添加一个类(其中someClassName是类名,span是子选择器。< / LI>
  • 尽可能使用伪元素而不是DOM元素将分隔符或任何其他类型的装饰器添加到标记中。在这种特殊情况下,border-right也是一个很好的候选人。

答案 2 :(得分:0)

我理解你的问题(“间隔”)每个“文本块”应该具有相同宽度(?)的方式。为此,您可以使用固定宽度和text-align: center(无边距):

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);
  display: inline-block;
  text-align: center;
  width: 100px;
}
<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>