Столбец Flexbox выравнивает себя на дно

Я пытаюсь использовать Flexbox. http://css-tricks.com/almanac/properties/a/align-content/ показывает хорошие параметры выравнивания; но я бы действительно хотел ситуацию Top-top-bottom.

Я хочу, чтобы div придерживался нижней части родительского div, используя Flexbox. С помощью flex-direction: column и align-content: Space-between я могу это сделать, но средний div будет выравниваться по центру, я хочу, чтобы средний тоже был прикреплен к вершине.

[наверх]

[средний]

[снизу]

align-self: flex-end заставит его плавать вправо, а не снизу.

complete flexbox docs: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ответ 1

Я немного опаздываю на вечеринку, но может быть уместен для других, пытающихся выполнить то же самое, что вы должны сделать:

margin-top: auto

на рассматриваемом элементе, и он должен идти на дно. Должен сделать трюк для firefox, chrome и safari.

Ответ 2

Я нашел свое собственное решение, я добавлю его здесь для значения документации;

Если вы дадите средний блок height: 100%, он займет место в середине посередине. Таким образом, нижний блок будет на фактическом дне, а верхний и средний будут сверху.

UPDATE: это не работает для Chrome...

UPDATE: нашел способ, который работает для FF/Chrome: установка Flex-рост на большее число (1 достаточно) для [среднего] сделает его полным среднего размера. Дополнительная информация: http://css-tricks.com/almanac/properties/f/flex-grow/

Ответ 3

В принципе, ответ заключается в том, чтобы дать последнему из средних элементов гибкость вырастить 1 код следующим образом:

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

Спасибо, T04435.