1

I am having a bit of a problem with css flex alignment. I am trying to make a footer with 3 columns. I want the middle column to be aligned in the center of the container instead of having an equal distance between the first column and the third column. The first column should be aligned to the left side of the container and the third column should be aligned to the right side of the container. How can I achieve this?

Here is a jsFiddle to demonstrate. I added a red line down the middle to further demonstrate how the social links are aligned off center.

<footer>
  <div class="container">
    <p>
    &copy; 2019 Company Name. All rights reserved.
    </p>
    <ul>
      <li><a href="#"><i class="fab fa-facebook"></i></a></li>
      <li><a href="#"><i class="fab fa-instagram"></i></a></li>
      <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    </ul>
    <ul>
      <li><a href="#">Legal</a></li>
      <li><a href="#">Privacy</a></li>
    </ul>
  </div>
</footer>

footer {
  background: #666;
  z-index: 1;
}
footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
}
ul {
  display: flex;
  list-style: none;
}
ul li {
  padding: 0 0.5em;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
ShoeLace1291
  • 4,551
  • 12
  • 45
  • 81
  • add this in your css `.container p, .container ul:last-child { flex-basis: 0%; flex-grow: 1; }` – Nisharg Shah Apr 26 '19 at 20:01
  • fiddle based on [this answer](https://stackoverflow.com/questions/43211390/aligning-elements-left-center-and-right-in-flexbox): https://jsfiddle.net/jvzk6usr/ – kukkuz Apr 27 '19 at 04:05

0 Answers0