На форумах и в статьях я читал, что разница между flex и inline-flex контейнерами такая же как и между block и inline-block контейнерами, то есть в лишь в том, что block растягивается на всю оставшуюся ширину, а inline занимает лишь необходимое ему место.
Вопрос: Так почему же если Flex-контейнер (display: flex) является блочным элементом, тогда он не растягивается на всю свободную ширину автоматически?
-
а почему ты решил, что он не растягивается на всю свободную ширину автоматически?– Grundy ♦21 апр 2020 в 14:05
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
нет.
-
Но почему flex элемент не растягивается на всю ширину если, например, слева от него находится какой-то flex элемент. К примеру, у меня есть левый sidebar определенной ширины и контентная часть. Контент не будет растягиваться на всю оставшуюся ширину, если не прописать flex-grow: 1. Почему так? 24 апр 2020 в 19:26
Flex это для flexible page design, и он растягивается, вот пруф.
По моему опыту, flex удобно использовать, например, при выравнивании блоков одного размера при адаптивном дизайне, например чтобы 2 divs были одной высоты и т.д. Вообще для каждого свойства display
есть свое назначение.
Прикол flex
в том, что он подстаивается под контент, который в нем.
- есть еще
flex-direction
проверь тут
P.S. не эксперт, но довольно часто пользуюсь flex
. И кстати, в safari он display:-webkit-flex