2

На форумах и в статьях я читал, что разница между flex и inline-flex контейнерами такая же как и между block и inline-block контейнерами, то есть в лишь в том, что block растягивается на всю оставшуюся ширину, а inline занимает лишь необходимое ему место.

Вопрос: Так почему же если Flex-контейнер (display: flex) является блочным элементом, тогда он не растягивается на всю свободную ширину автоматически?

1
  • а почему ты решил, что он не растягивается на всю свободную ширину автоматически?
    – Grundy
    21 апр 2020 в 14:05

2 ответа 2

2

Вопрос:

Так почему же если Flex-контейнер (display: flex) является блочным элементом, тогда он не растягивается на всю свободную ширину автоматически?

Ответ:

.flex {display: flex; background-color: lightblue;}
.block {display: block; background-color: beige;}
<div class="flex">flex</div>
<div class="block">block</div>

Но это в том случае, если в блоке будет содержимое.

А если содержимого нет, то:

.flex {display: flex; background-color: lightblue;}
.block {display: block; background-color: beige;}
<div class="flex"></div>
<div class="block"></div>

Добавим высоту:

.flex {display: flex; background-color: lightblue; height: 20px;}
.block {display: block; background-color: beige; height: 20px;}
<div class="flex"></div>
<div class="block"></div>

Вывод:

В нашем случае никакой разницы между display: block и display: flex нет.

1
  • Но почему flex элемент не растягивается на всю ширину если, например, слева от него находится какой-то flex элемент. К примеру, у меня есть левый sidebar определенной ширины и контентная часть. Контент не будет растягиваться на всю оставшуюся ширину, если не прописать flex-grow: 1. Почему так?
    – JustLearn
    24 апр 2020 в 19:26
0

Flex это для flexible page design, и он растягивается, вот пруф.

По моему опыту, flex удобно использовать, например, при выравнивании блоков одного размера при адаптивном дизайне, например чтобы 2 divs были одной высоты и т.д. Вообще для каждого свойства display есть свое назначение. Прикол flex в том, что он подстаивается под контент, который в нем.

  • есть еще flex-direction проверь тут

P.S. не эксперт, но довольно часто пользуюсь flex. И кстати, в safari он display:-webkit-flex

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.