带有flexbox的垂直中心不起作用答案

【问题标题】：Vertical center with flexbox not working带有flexbox的垂直中心不起作用
【发布时间】：2017-06-08 12:58:57
【问题描述】：

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

}

【问题讨论】：

标签： html css twitter-bootstrap sass flexbox

【解决方案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>

【讨论】：