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

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

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

[наверх]

[средний]

[нижний]

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

полные Flexbox документы: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

источник

2014-07-11 Laurens Kling

[Этот сайт может помочь] (http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&flex-direction=column&flex-wrap=nowrap&justify-content=flex-start&align-items=center&align -компонента = простирания & порядка% 5B% 5D = 0 & прогибается вырастали% 5B% 5D = 0 & прогибается термоусадочные% 5B% 5D = 1 & Flex-базис% 5B% 5D = 200px и выравнивать-я% 5B% 5D = авто & порядок% 5B% 5D = 0 & Flex-расти % 5B% 5D = 0 & прогибается термоусадочные% 5B% 5D = 1 & Flex-базис% 5B% 5D = 100% 25 и выравнивать-я% 5B% 5D = авто & порядок% 5B% 5D = 0 & прогибается вырастали% 5B% 5D = 0 & прогибается термоусадочные% 5B % 5D = 1 & Flex-базис% 5B% 5D = 200px и выравнивать-я% 5B% 5D = авто). – misterManSam

Тангенциальный вопрос, но кажется абсурдным, что такой вид макета нелегко решить ни одним из свойств гибкой коробки – coffeecola

@coffeecola не говорит, что это непросто решить, когда у вас нет знаний. Flex действительно мощный, спасибо проверить мой ответ ниже. – T04435

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

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

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

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

источник

2014-07-14 09:31:48

Я не следую вашему ответу, но это точная проблема, с которой у меня возникают проблемы прямо сейчас. Не могли бы вы поделиться своей фактической разметкой и CSS, используемыми для решения? – corradomatt

Я постараюсь опубликовать его в ближайшее время, любые подсказки от steoveroverflow? Добавляю ли я его в свой вопрос? –

Использование 'flex-grow: 1;' работает в IE11. – philk

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

margin-top: auto

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

источник

2016-02-01 07:41:36

Да, чтобы подтолкнуть один элемент до конца, это сделает трюк. Flexbox относится к маржи немного отличается –

Это сделало трюк для меня через пару часов WTF. Он также работает в IE (11 в любом случае, я еще должен проверить в другой версии) –

Может кто-нибудь объяснить, почему он работает? – PlusA

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

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

Спасибо, T04435.

источник

2017-01-19 07:35:32 T04435

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

ответ

Смежные вопросы