Как вертикально выравнивать и растягивать содержимое с помощью CSS flexbox

Используя CSS flexbox, как я могу одновременно вертикально центрировать содержимое всех div в строке, сохраняя одну и ту же высоту на всех из них, не используя атрибут css height?

Ответы

Ответ 1

HTML

<div class='outer'>
    <div class='inner'>A</div>
    <div class='inner'>B</div>
    <div class='inner'>C</div>
</div>

CSS

.outer {
    align-items: stretch;
    display: flex;
}

.inner {
    align-items: center;
    display: flex;
}

Ответ 2

  .item-wrapper
    display: flex
    align-items: stretch
    justify-content: center

  .item
    width: 400px
    display: flex

Ответ 3

Нет причин для этого с помощью Flexbox. Свойства таблицы/таблицы-ячейки были в состоянии сделать это в течение длительного времени:

http://cssdeck.com/labs/qsirepkh

ul {
  display: table; /* optional */
}

li {
  display: table-cell;
  vertical-align: middle;
}

Это выглядит так: Flexbox:

http://codepen.io/cimmanon/pen/BfDAk

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}