Flexbox "Justify Content" not working

I have a simple Flexbox footer. When the screen gets below 580px, the layout changes as you can see below.

I have two primary issues:

The justify-content property on the <ul> doesn't seem to kick in. If I've made the <ul> a display: flex item, surely the child elements should be flex items, no? On the mobile version of the footer, the <li> items stay stuck to the righthand side.

Why is the righthand side container (that switches to being the bottom item on the mobile view) so much bigger in height than its sibling at the mobile size? There is no extra padding or height value added to this item.

** Note - I've put a 1px border around every element to make it easier to see what is going on.

* {
  border: 1px solid black;
}

body {
  margin: 0;
  padding: 0;
}

footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: red;
  box-sizing: border-box;
  padding: 1rem;
}

.footer-inner {
  background: blue;
  width: 30%;
  display: flex;
  align-items: center;
  padding: 1rem;
  color: white;
}

#footerright {
  display: flex;
  justify-content: flex-end;
}

#footerright ul {
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
}

#footerright ul li {
  padding: 0px 10px;
  color: white;
}

@media screen and (max-width: 580px) {
  footer {
    flex-direction: column;
    align-items: center;
  }
  .footer-inner {
    justify-content: center;
    min-width: 240px;
  }
  #footerright {
    justify-content: center;
  }
  #footerright ul {
    justify-content: center;
  }
}

<footer>
  <div class="footer-inner" id="footerleft">&copy<span id="footer-year">Year</span>&nbspThe Company</div>
  <div class="footer-inner" id="footerright">
    <ul>
      <li id="facebook">Twi</li>
      <li id="instagram">Fac</li>
      <li id="twitter">Ins</li>
    </ul>
  </div>
</footer>

---

Why is the righthand side container so much bigger in height than its sibling at the mobile size?.

Because when in non-mobile size, the default value of flex row items's align-items kicks in, which is stretch , and make items on the same row equally high, which is not the case when wrapped, or using flex column direction, where they instead collapse to their own height, based on margin, border, padding and content.

In this case, if you remove the preset padding/margin from the ul , it will collapse to the li 's size, where they appear to have an equal height, though based on eg different font size, etc., they might become unequal again.

---

Flexbox “Justify Content” not working

The margin/padding reset ( ul {margin: 0; padding: 0;} ) will also take care of the small left offset the ul suffer from, in both mobile and non-mobile view, though in mobile view it is more obvious, which I also guess is what you meant with justify-content doesn't seem to kick in.

---

Concerning the "right-alignment" in mobile view: Add padding-left: 0; to the ul to avoid the default padding of ul s which causes a horizontal offset from the centered position.

And concerning the size of the second container: Add padding: 0 to .footer-inner and margin: 0 to #footerright ul to reset the default paddings and margins:

https://codepen.io/anon/pen/GOQwBV

---

您可以通过添加基本的CSS浏览器重置（等高问题）并将#footerright > ul内的justify-content: center属性替换为align-items: center来解决您的问题

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid black;
}

html, body {
  width: 100%;
}

footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: red;
  box-sizing: border-box;
  padding: 1rem;
}

.footer-inner {
  background: blue;
  width: 30%;
  display: flex;
  align-items: center;
  padding: 1rem;
  color: white;
}

#footerright {
  display: flex;
  justify-content: flex-end;
}

#footerright ul {
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
}

#footerright ul li {
  padding: 0px 10px;
  color: white;
}

@media screen and (max-width: 580px) {
  footer {
    flex-direction: column;
    align-items: center;
  }
  .footer-inner {
    justify-content: center;
    min-width: 240px;
  }
  #footerright {
    justify-content: center;
  }
  #footerright > ul {
    /*justify-content: center;*/
    align-items: center; /* because of the changed direction this is now horizontal alignment / centering */
  }
}

<footer>
  <div class="footer-inner" id="footerleft">&copy<span id="footer-year">Year</span>&nbspThe Company</div>
  <div class="footer-inner" id="footerright">
    <ul>
      <li id="facebook">Twi</li>
      <li id="instagram">Fac</li>
      <li id="twitter">Ins</li>
    </ul>
  </div>
</footer>

链接地址: http://www.djcxy.com/p/75684.html

上一篇: 如何写一个：悬停在内联CSS？

下一篇: Flexbox“证明内容”不起作用