Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Line separators between elements in flexbox

Tags:

css

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.

like image 267
HowToGo Avatar asked Dec 15 '17 00:12

HowToGo


People also ask

How do I add spaces between flexbox items?

To set space between the flexbox you can use the flexbox property justify-content you can also visit all the property in that link. We can use the justify-content property of a flex container to set space between the flexbox.

How do you align left and right items in Flex?

The flex columns can be aligned left or right by using the align-content property in the flex container class. The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container.


2 Answers

How about flex, with a left border on all elements except the first:

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>
like image 62
Michael Benjamin Avatar answered Sep 23 '22 11:09

Michael Benjamin


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:

  • rather than adding the same class to all children, just add one to the parent and style using .someClassName > span (where someClassName is the class name and span is the child selector.
  • whenever possible, use pseudo-elements instead of DOM elements to add separators or any other type of decorators to your markup. In this particular case border-right would have been a good candidate, too.
like image 40
tao Avatar answered Sep 21 '22 11:09

tao