Vertically centering objects in flexbox

Question

I have to align the elements vertically in flexbox. Here is my code: http://pastebin.com/1YKrYxA3

Code snippet:

.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>

Run codeHide result

I tried to use align-content, it does not seem to work.

Answer 1

align-contentaffects only multi-line flexible containers; it aligns the contained lines.

You want align-itemsone that affects the actual flex items.

Answer 2

When viewing the code, there is no property align-content. It does not exist in your code.

align-content 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 flex, flex.

- ul colone1, display: flex, flex flex.

- .colone1, align-items: center flex (.flex-conteneur).

. . , , . : Flexbox