显示 flex 不是居中对齐

Question

#footer, #container:after{

 height: 150px;
}


#footer{

 background-color: #006699;
 clear: both;
}

#wrap {
 margin: 0 auto;
 width: 100%;
 display: flex;
 align-items: center;
 flex-wrap: nowrap;
}

#sub {

 padding: 12px;
 width: 32%;
 height: 40px;
 color: white;
 border-right: solid white 1px;
}

.sub:last-child{

 border: 0px;
}

<div id="footer">
 <div class="wrap">
  <div class="sub">Lorem Ipsum</div>
  <div class="sub">Lorem Ipsum </div>
  <div class="sub">Lorem Ipsum </div>
 </div>
</div>

好的，所以我昨天刚做了这个，将 display flex 放在页脚的 wrap id 上效果很好。今天我的布局略有变化，所以可能是因为这个原因，但是，我无法让页脚 ID 中的 div 并排排列。基本上我希望每个 div 沿我的页脚中的一个轴均匀分布，但目前它们是垂直堆叠的，而不是水平的。

每个sub是40个，所以40 X 3(3 sub divs)总计120，这与页脚的总高度相去甚远，为150px。我什至制作了 flex-wrap nowrap。任何人都可以帮助我为什么会遇到这个问题？

<div id="footer">
    <div class="wrap">
        <div class="sub">Lorem Ipsum</div>
        <div class="sub">Lorem Ipsum </div>
        <div class="sub">Lorem Ipsum </div>
    </div>
</div>

Answer 1

这是一个简单的例子，您在 CSS 而不是类中引用 ID。

#wrap / #sub 而不是 .wrap / .sub

* {
  box-sizg:border:box;
  }

#footer {
  height: 150px;
  background-color: #006699;
}
.wrap {
  display: flex;
  align-items:center;
}
.sub {
  padding: 12px;
  width: 32%;
  height: 40px;
  color: white;
  border-right: solid white 1px;
}

<div id="footer">
  <div class="wrap">
    <div class="sub">Lorem Ipsum</div>
    <div class="sub">Lorem Ipsum</div>
    <div class="sub">Lorem Ipsum</div>
  </div>
</div>

显示 flex 不是居中对齐

Display flex not center aligning

css

centering

flexbox