垂直中心，Flexbox无法正常工作

Question

我试图在引导网格中使用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;
  }

}

Answer 1

问题是.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>