flexbox中的对象垂直居中

Question

我必须在 flexbox 中垂直对齐项目。这是我的代码： http://pastebin.com/1YKrYxA3

代码片段：

.flex-conteneur {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 1026px;
  height: 300px;
  background-color: gray;
  font-color: white;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-around;
}
.colone1 {
  width: 180px;
  height: 100px;
  background-color: black;
  color: white;
  font-family: arial;
  font-size: 0.9em;
  align-items: center;
}
.colone2 {
  width: 400px;
  height: 150px;
  background-color: black;
  color: white;
  font-style: italic;
  font-family: arial;
  font-size: 0.9em;
}
.colone3 {
  width: 200px;
  height: 100px;
  background-color: black;
  color: white;
  font-style: italic;
  font-family: arial;
  font-size: 0.9em;
}
.titre {
  width: 1024px;
  height: 20px;
  background-color: gray;
  color: white;
  font-family: arial;
  font-size: 1.5em;
  font-family: "Arial Black"
}

<div class="flex-conteneur">
  <div class="titre">
    Programmation Web : INF2005
  </div>
  <ul class="colone1">
    <li>
      <a href "#">Acceuil</a>
    </li>
    <li>
      <a href "#">Notes de cours</a>
    </li>
    <li>
      <a href "#">Atelirs</a>
    </li>
    <li>
      <a href "#">Travaux Pratiques</a>
    </li>
  </ul>

  <div class="colone2">
    Ce gabarit doit être structuré avec des div et mise en forme avec CSS
  </div>

  <div class="colone3">
    Colone 3 : contenu secondaire
  </div>
</div>

我尝试使用align-content 似乎不起作用。

Answer 1

在查看您的代码时，任何地方都没有 align-content 属性。它在您的代码中不存在。

align-content 属性管理多行 flex 项目沿 flex 容器的横轴的对齐方式。此属性对 flex 容器中的单行没有影响。

虽然没有align-content，但有一个align-items 声明。

.colone1 {
    width: 180px;
    height: 100px;
    background-color: black;
    color: white;
    font-family: arial;
    font-size: 0.9em;
    align-items: center;
}

然而，问题在于您将align-items 属性应用于弹性项目，而它仅适用于弹性容器。

如果您的目标是将ul 的内容与colone1 类垂直居中，那么您还必须应用display: flex，这样弹性项目也将成为弹性容器。

如果您的目标是将.colone1 垂直居中，那么您需要将align-items: center 应用于弹性容器（.flex-conteneur）。

一些弹性属性只适用于弹性项目。其他仅在弹性容器上。有关按父项和子项划分的属性列表，请参阅这篇文章：A Complete Guide to Flexbox

Answer 2

align-content 只影响多行 flex 容器；它对齐包含的行。

你想要align-items，这会影响实际的弹性项目。