html - flexbox的垂直中心不起作用

我正在尝试在引导网格中使用flexbox来制作一个带有垂直居中项的瘦菜单，但是它不起作用。我尝试使用this demo中提供的样式，但是显然我仍然有一些错误。

标记

  <section class="container secondary-header">
    <div class="row">
      <div class="col-xs-6">
        <nav class="secondary-header__nav">
          <ul class="secondary-nav__list-items">
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="col-xs-6">&nbsp;</div>
    </div>
  </section>

SCSS

.secondary-header {
  height: 60px;
  background-color: #2bf;
}
.secondary-nav {

  &__list-items {
    display: flex;
      align-items: center;
    justify-content: space-between;

  }

  &__nav {
    height: 60px;
    display: flex;
  }

  &__list-items {
    list-style-type: none;
  }

  &__list-item {
    border: 1px solid;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    // height: 60px;
  }

  &__list-item {
    display: inline;
    color: #fff;
  }

}

最佳答案

问题是.secondary-nav__list-items是您的flex-parent，但它的高度不消耗具有蓝色背景的.secondary-header的高度，而是您希望将.secondary-nav__list-items中的项居中的位置。

您可以确保.secondary-header和.secondary-nav__list-items之间的所有内容的高度均为100％，以使.secondary-nav__list-items的高度与.secondary-header相同，或者仅将高度/背景移动到.secondary-nav__list-items。

.secondary-nav__list-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.secondary-nav__nav {
  height: 60px;
  display: flex;
}
.secondary-nav__list-items {
  list-style-type: none;
  height: 60px;
  background-color: #2bf;
}
.secondary-nav__list-item {
  border: 1px solid;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.secondary-nav__list-item {
  display: inline;
  color: #fff;
}

<section class="container secondary-header">
    <div class="row">
      <div class="col-xs-6">
        <nav class="secondary-header__nav">
          <ul class="secondary-nav__list-items">
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="col-xs-6">&nbsp;</div>
    </div>
  </section>

关于html - flexbox的垂直中心不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41816143/