cssflexbox

Line separators between elements in flexbox

I am trying to make a line of elements using display:flex; in CSS with the same spacing for text.

Here is what i got, i achived it using display: inline-block; and spacing differences between text - which i would want to make the same for every text.

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>

I need those funny elements between text and when i try to use display:flex; those are going out of bounds.

Solution

  • Here's a simplified way of doing it.

    .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>

    A few notes: