Как сделать вертикальное выравнивание с flexbox?

Question

[relows]

Мне нужно чтобы строки равномерно распределялись в контейнере и расстояние между ними было одинаково.



Родительскому элементу я задал:

.flex01 {
	display: flex;
  flex-direction: column;
  align-content: space-between;
  height: 100%;
}

Answer 1

[Максим]

какой результат должен быть ?

Comments

[relows]

Вот так должно получиться:
Уже сделал это:

[Максим]

relows, согласен - покажите ваш код желательно с картинками ... в песочнице jsfiddle.net или codepen.io и сохраните и сюда ссылку

[relows]

Максим Ленский, https://yadi.sk/d/wCJIzgdq-U_3oQ

[Максим]

relows, в общем смотри - надо не соменно делать по другому но для примера я покажу хотя можно потренироваться сделать по другому : https://codepen.io/topicstarter/pen/WLwqvN

[relows]

Максим Ленский, а как при помощи флексов сделать чтобы строки равномерно распределялись в контейнере и расстояние между ними было одинаково?

Прямо сейчас я никак не успею понять что и как делать в скинутом вами примере, т.к. мне нужно уже сегодня сделать этот блок

[relows]

Максим Ленский, В том что я сделал осталось только сделать вертикальное выравнивание

[Максим]

relows, заверни в архив закинь куда то в облако и скинь мне ссылку

[relows]

Максим Ленский, выше кидал ( https://yadi.sk/d/wCJIzgdq-U_3oQ )

[Максим]

relows, ты пользуешься boootstrap ? извени я не смогу вам помочь так как я первый враг этого фреймворка

[relows]

Максим Ленский, Чем он вам так не нравится?

[Johny Smith]

relows, ничего плохого в фреймворках нет, они цепляются из кеша и уже есть практически в каждом телефоне/компьютере, так что смело можно тащить за проектом их хоть целую дюжину

[relows]

Olek1, Спасибо, просто я начал заниматься веб дизайном месяц назад, а про фреймворки узнал толкьо 4 дня назад.
А вы не знаете как выровнять объекты по вертикали при помощи флексов или с бутстрапом (align-content: space-between; не помогает)?

[relows]

Olek1, А, всё, у меня получилось

[Максим]

relows, там надо было просто 3 блока - родительскому flex и space-around и в средний вставлять надо уже вашу картинку - почему я не люблю фреймворки - а лишь потому что для меня много лишнего там ...то мчто пишется в ручную в трёх строках в фрейворке много лишнего ... в общем не любитель я их ...

[Johny Smith]

Максим Ленский, и вы за Vanilla JS также?

[Максим]

Olek1, я редко вообще ванилином пользуюсь - jquery больше люблю и это единственная библиотека ..во всех остальных случаях велосипедю

Answer 2

[Александра]

Равномерно распределить по горизонтали и вертикали с равными отступами?

Comments

[relows]

Это совсем не то, и решение я уже нашёл

Answer 3

[Leo]

Дочерние, надеюсь, раздельные?

flex для дочерних для указания размера и/или margin:auto