Best way of spacing out flex items

Question

I'm trying to discover the best way of doing the following: I've created a load of navigation links, but when you shrink the screen size, either the space between the flex items can sometimes appear too distant, the '|' symbols that are supposed to go inbetween flex items can appear at the end of a row before the flex item drops to the next line, and (maybe it's my browser) flex items seem to wrap when making the browser wider after shrinking it (i.e. the text inside tags can be on separate lines.

Is there a good way to fix this? I presumed displaying as a flex with space-between as the content justification would space them out nicely, which it does, but there are a few minor imperfections.

Thanks

.footer-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: pink;
}
.footer-links > a {
  flex-wrap: nowrap;
  background: orange;
}
.footer-links > a:nth-child(n+2) {
  padding: 0 1%;
  background: lightgreen;
}
.footer-links > a:last-child {
  padding-right: 0;
  background: red;
}
.footer-links > a:first-child {
  padding-right: 1;
  background: lightblue;
}
@media (min-width: 1024px) {
  .footer-links { justify-content: center }
}

<div class='footer-links'>
  <a>Home</a> | <a>Terms &amp; Conditions</a> | <a>Contact Us</a> | <a>Apps</a> | <a>Some Link</a> | <a>Contact Us</a> | <a>Apps</a>
</div>

Answer 1

• In .footer-links I've added flex-direction: row; and removed

• I also spotted a mistake in .footer-links>a:first-child where it said padding-right: 1; without the%` sign.

.footer-links {
  display: flex;
  flex-direction: row; /* added */
  /* justify-content: space-between; */ /* removed */
  flex-wrap: nowrap; /* changed */
  background: pink;
}

.footer-links>a {
  flex-wrap: no-wrap;
  background: orange;
  white-space: nowrap; /* added */
}

.footer-links>a:nth-child(n+2) {
  padding: 0 1%;
  background: lightgreen;
}

.footer-links>a:last-child {
  padding-right: 0;
  background: red;
}

.footer-links>a:first-child {
  padding-right: 1%; /* added the % */
  background: lightblue;
}

@media (min-width: 1024px) {
  .footer-links {
    justify-content: center
  }
}

<div class='footer-links'>
  <a>Home</a> | <a>Terms &amp; Conditions</a> | <a>Contact Us</a> | <a>Apps</a> | <a>Some Link</a> | <a>Contact Us</a> | <a>Apps</a>
</div>

---

Also, please consider some changes I made that makes your design a lot nicer. Do with it as you please :)

JSFiddle demo

Answer 2

The flexbox is working the way you told it to work. It's great when robots listen to us!

Your media query explicity states that at anytime before 1024px width, only justify content space-between, since that is the value set in the parent class and its inherited. If you want them to be closer then just remove that media query for 1240px+ so it applies to all widths, change the justify-content property in the footer-links class to center and it will behave accordingly.

As far as the pipe symbol (|), if you don't want it to break lines prior to it's sibling, then don't make it a sibling, and include it with the sibling:

From:

<a>Home</a> |

To:

<a>Home |</a>

or better yet, use the :after || :before psuedo classes, as this is their intended use, and is inline by default. Or maybe restructure your code in away that makes more sense, where you use a <li> tag with children to display a list of things as you vision, so then it's not child of the parent div (footer-links) and becomes a child of a parent list item. Many opportunities for success here, mostly arbitrary of what you decide, but you should really think about structuring your code, for many reasons like accessibility. Screen readers won't know that your footer-links class is a navigation element by the way in which it's written.

For the sake of answering the question directly, here is an example with psuedo class and center justified content:

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: pink;
}

.footer-links>a {
  flex-wrap: nowrap;
  background: orange;
}

.footer-links>a:nth-child(n+2) {
  padding: 0 1%;
  background: lightgreen;
}

.footer-links>a:last-child {
  padding-right: 0;
  background: red;
}

.footer-links>a:first-child {
  padding-right: 1;
  background: lightblue;
}

/* new change, removed media query and added :after psuedo class for pipes*/
.footer-links a:not(:last-child):after {
  content: "|";
  background: pink;
  padding: 0 5px;
}

<div class='footer-links'>
  <a>Home</a><a>Terms &amp; Conditions</a><a>Contact Us</a><a>Apps</a><a>Some Link</a><a>Contact Us</a><a>Apps</a>
</div>

Please note, according to the documentation I linked above:

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

So you will have to change the background color accordingly in your circumstance