Выравнивание блоков флексбоксом

Добрый день.

Подскажите, как правильно выравнивать блоки вертикально?
Я задаю флекс-контейнеру flex-direction: column и justify-content: space-between/around, но почти в 100% случаев без дополнительных margin/padding результат выглядит сомнительно и далек от оригинала(макета).
А с дополнительными margin/padding верстка ведет себя непредсказуемым образом. По крайней мере у меня.

И до кучи вопрос по min-heigth/max-height. Когда лучше использовать?

0

Czo, [del] Используйте align-item.

0

Если они в колонку будут, то align-item будет выравнивать колонку по-горизонтали. А мне нужно как-то вертикально это делать.

0

Czo, А почему Вы спецификацию не читаете? Разве это так сложно, пойти в гугле найти спецификацию и прочитать ее разок, что бы не задавать глупые вопросы или на ютубе уйма видео об этих флексах. А если Вам нужно будет что бы блоки находились в низу поперечной оси Вы тоже будете писать на форуме?
Приоткрою для Вас завесу и скажу что у свойства justify-content кроме этих двух свойств space-between/around есть еще и эти flex-start / flex-end / center / space-between / space-around и я думаю Вам не составит труда понять какой из них нужно применять.
Это на всякий случай, если Вы вдруг не поймете.

0

Приоткрою Вам завесу тайны: этот форум и существует для того чтобы новички могли задавать глупые вопросы. Если Вас это раздражает, то зачем Вы вообще здесь?

Про вышеупомянутые свойства justify-content я знаю, но мне их функционала НЕ ХВАТАЕТ, т.к. в макете, например, из ряда вертикальных блоков, одни блоки могут находиться почти впритык друг к другу, другие могут иметь приличный отступ и т.д.

Для того, чтобы расталкивать их друг от друга или компановать вместе, я использую внешние/внутренние отступы и дополнительные контейнеры, но мне кажется, что я делаю что-то неправильно или пытаюсь изобрести велосипед, поэтому я и хочу узнать, как опытные девелоперы справляются с такими задачами.

Возможно, я изначально недостаточно полно изложил суть вопроса, но это не повод впадать в истерику.

0

Czo,

Сообщение от Czo этот форум и существует для того чтобы новички могли задавать глупые вопросы

Да, но не на столько глупые что бы спрашивать: "как сделать блоки по центру если они стоят вертикально".

Сообщение от Czo но мне их функционала НЕ ХВАТАЕТ

Сообщение от Czo т.к. в макете, например, из ряда вертикальных блоков, одни блоки могут находиться почти впритык друг к другу, другие могут иметь приличный отступ и т.д

Это уже совсем другое решение, не то которое Вы описали изначально.
Сначала Вы спросили:

Сообщение от Czo Подскажите, как правильно выравнивать блоки вертикально?

, Вам ответили, но Вам это не подошло, Вам нужно было другое

Сообщение от Czo Если они в колонку будут, то align-item будет выравнивать колонку по-горизонтали. А мне нужно как-то вертикально это делать.

, а теперь Вы говорите

Сообщение от Czo Возможно, я изначально недостаточно полно изложил суть вопроса

что изначально недостаточно полно изложили суть вопроса, вы серьёзно?
А потому спрашиваете почему у людей истерика?
По Вашему следующему ответу я понял что при flex-direction: column; Вам нужно расположить их по центру поперечной оси, вот я Вам и предложил решение, а теперь Вы говорите что

Сообщение от Czo т.к. в макете, например, из ряда вертикальных блоков, одни блоки могут находиться почти впритык друг к другу, другие могут иметь приличный отступ и т.д

Так почему нельзя было сразу показать макет, что Вам нужно сделать и как Вы хотите это сделать.

Добавлено через 5 минут
Но что в итоге Вам нужно не понятно

0

Вот решение, которое Вы просили

Миниатюры

 

0

Не хочу спорить по каждому слову, которое я написал и на которое получил ответ. Это будет уже спор ради спора.

Так почему нельзя было сразу показать макет, что Вам нужно сделать и как Вы хотите это сделать.

Это было бы, конечно, проще, но я не знаю инструментов, как это сделать.
К примеру, как вы код копипастили выше, чтобы он так наглядно выгядел?
Или пикчу добавляли(мне вроде пока нельзя, до 20 сообщений правила запрещают).

Ну, вот почти конкретная ситуация из макета:
<sector>
<div class="flex-container">
<h2>about us</h2>
<p>lorem ipsum</p>
<div>какой-то блок</div>
</div>
</sector>

Задачи:
1)расположить блоки вертикально(делал через flex-direction: column)
2)отцентровать их по горизонтали(align-items:center)
3)отступы:
- внутренние отступы сверху и снизу контейнера: в макете 130px;
- h2 и p разделяется отступом: в макете 40px;
- p и нижележащий div разделяется отступом: в макете 130px;

Я не особо парился на тему pixel perfect, поэтому, чтобы создать отступы по верхнему/нижнему краю решил применить space-around на контейнер и посмотреть, что будет.
В этом случае, флекс раскидал всё равномерно, но h2 и p оказались слишком далеко друг от друга.
Я задал padding: 130px 0; для контейнера, обернул h2 и p в отдельный блок(чтобы сделать их одним флекс-элементом и "склеить") и применил space-between. Результат получился более-менее приемлимый, но "расклеивать" их пришлось дополнительным margin.
Кроме того, у меня почему-то возникали ошибки, если для контейнере указан min-height или max-height. Флекс почему-то вообще убирал вертикальные отступы и собирал блоки в кучу(визуально это выглядело, как justify-content: center или вроде того).
Зато с конкретной высотой(например, height:700px), флекс нормально растягивал блоки по контейнеру. Но меня терзают сомнения, не будет ли проблем с отображением, если, например, потребуется добавить еще несколько блоков в этот контейнер?

В макете подобных ситуаций, где у блоков были разные вертикальные отступы, было довольно много. Я привел самый простой пример.

Мой вопрос в сущности был не по конкретной ситуации, а скорее в общем, т.к. по факту с проблемами я разобрался, но мне кажется, что сделал я это достаточно криво.

Надеюсь, максимально подробно изложил суть вопроса.

0

Czo,

Сообщение от Czo К примеру, как вы код копипастили выше, чтобы он так наглядно выгядел?

Для этого есть специальные "форматирующие теги" (на скриншоте показал):
1. Вставляешь архивы, изображение и прочие файлы (там будет показан их список)
2. Выделение текста, пример: flex-direction: column;
3. Вставка ссылок
4. Смайлики
Сейчас посмотрю по Вашей проблеме.

Миниатюры

 

0

Czo, По Вашему вопросу у меня получилось так: Code Pen

Миниатюры

 

1

Ок, логику понял. И спасибо за терпение

0