В чем разница между дисплеем: inline-flex и display: flex?

230

Я пытаюсь вертикально выровнять элементы в оболочке идентификатора. Я дал свойство display:inline-flex; к этому идентификатору, поскольку оболочкой идентификатора является гибкий контейнер.

Но нет никакой разницы в представлении. Я ожидал, что все в идентификаторе оболочки будет отображаться в inline. Почему не так?

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>

Пример JSFiddle

Теги:
flexbox

6 ответов

273
Лучший ответ

display: inline-flex не заставляет flex-элементы отображать inline. Это делает дисплей гибкого контейнера встроенным. В этом единственная разница между display: inline-flex и display: flex. Аналогичное сравнение можно сделать между display: inline-block и display: block, и практически любым другим типом отображения, имеющим встроенный аналог. 1

Там нет абсолютно никакой разницы в эффекте на гибкие элементы; Компоновка flex одинакова для контейнеров на уровне блоков или на уровне строк. В частности, сами flex-элементы всегда ведут себя как блоки уровня блока (хотя у них есть некоторые свойства inline-блоков). Вы не можете отображать гибкие элементы встроенными; в противном случае у вас нет гибкого макета.

Непонятно, что именно вы подразумеваете под "выравниванием по вертикали" или почему именно вы хотите отображать содержимое в строке, но я подозреваю, что flexbox не является подходящим инструментом для всего, что вы пытаетесь достичь. Скорее всего, то, что вы ищете, это просто старая встроенная компоновка (display: inline и/или display: inline-block), для которой flexbox не является заменой; Flexbox - это не универсальное решение для макетов, как все утверждают (я утверждаю, что это неправильное представление, возможно, именно поэтому вы рассматриваете flexbox в первую очередь).

1Различия между макетом блока и встроенным макетом выходят за рамки этого вопроса, но больше всего выделяется автоматическая ширина: блоки уровня блока растягиваются горизонтально, чтобы заполнить содержащий их блок, в то время как блоки встроенного уровня уменьшаются, чтобы соответствовать их размеру. содержание.На самом деле, только по этой причине вы почти никогда не будете использовать display: inline-flex если у вас нет очень веских причин для показа встроенного контейнера flex.

Поделиться
  • 12
    Улучшенная демонстрация скрипки для различения inline-flex и flex : jsfiddle.net/mgr0en3q/1 Оригинальная скрипка от @ fish-graphics и @astridx
  • 0
    Абсолютно полезный ответ. Я запутался в первый раз. Когда я применяю встроенное изгибание, элемент flex не изменяется, когда я применяю также с отображением flex. На самом деле это применимо в flex-контейнере :)
44

flex и inline-flex оба применяют гибкую схему для дочерних элементов контейнера. Контейнер с display:flex ведет себя как сам элемент уровня блока, а display:inline-flex делает контейнер, как встроенный элемент.

Поделиться
23

Разница между "flex" и "inline-flex"

Короткий ответ:

Один из них встроен, а другой в основном отвечает как элемент блока (но имеет некоторые из его собственных отличий).

Более длинный ответ:

Inline-Flex - встроенная версия flex позволяет элементу и его дочерним элементам иметь свойства гибкости, сохраняя при этом постоянный поток документа/веб-страницы. В принципе, вы можете разместить два встроенных гибких контейнера в одной строке, если ширина была достаточно маленькой, без какого-либо избыточного стиля, чтобы позволить им существовать в той же строке. Это очень похоже на "встроенный блок".

Flex. Контейнер и его дети имеют свойства гибкости, но контейнер резервирует строку, поскольку она вынимается из нормального потока документа. Он реагирует как элемент блока с точки зрения потока документов. Два контейнера flexbox не могли существовать в одной строке без лишнего стилей.

Проблема, с которой вы можете столкнуться

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

Причина, по которой у вас возникают проблемы, заключается в том, что flex и inline-flex имеют свойство по умолчанию "flex-direction", заданное как "row". Это отобразит детей бок о бок. Изменение этого свойства на "столбец" позволит вашим элементам стекаться и резервировать пространство (ширину), равное ширине его родительского элемента.

Ниже приведены некоторые примеры, показывающие, как работает flex vs inline-flex, а также краткое описание того, как работают встроенные и блокирующие элементы...

display: inline-flex; flex-direction: row;

Fiddle

display: flex; flex-direction: row;

Fiddle

display: inline-flex; flex-direction: column;

Fiddle

display: flex; flex-direction: column;

Fiddle

display: inline;

Fiddle

display: block

Fiddle

Кроме того, отличный справочный документ: Полное руководство по flexbox - css трюкам

Поделиться
21

Хорошо, я знаю, что сначала это может немного сбить с толку, но display говорит о родительском элементе, поэтому мы имеем в виду следующее: display: flex; , это об элементе и когда мы говорим display:inline-flex; также делает сам элемент inline...

Это как сделать div inline или block, запустите фрагмент ниже и вы увидите, как display flex разбивается на следующую строку:

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}
<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>

Также быстро создайте изображение ниже, чтобы сразу увидеть разницу:

Изображение 6084

Поделиться
  • 1
    Что вы используете для этой картины? Этот шрифт очень хороший.
13

Дисплей: flex примените гибкую компоновку только к элементам flex или дочерним элементам контейнера. Таким образом, сам контейнер остается элементом уровня блока и, следовательно, занимает всю ширину экрана.

Это приводит к тому, что каждый контейнер гибких дисков перемещается в новую строку на экране.

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

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

Поделиться
  • 0
    "применить гибкий макет [...] к самому контейнеру" [цитата нужна]
1

Вам нужна дополнительная информация, чтобы браузер знал, чего вы хотите. Например, детям контейнера нужно сказать "как" сгибаться.

Обновлен скрипт

Я добавил #wrapper > * { flex: 1; margin: auto; } в ваш CSS и изменил inline-flex на flex, и вы можете увидеть, как элементы теперь равномерно размещаются на странице.

Поделиться
  • 2
    Спасибо за ваш ответ, но я знал, что смогу сделать это таким образом. Я только неправильно понял свойство display: inline-flex; - Я думал, что это свойство - более простой способ достижения моей цели. Но в последние дни я узнал, что это свойство только делает контейнер встроенным. Теперь с добавленным фоном я вижу разницу между свойствами отображения: inline-flex; и дисплей: гибкий; на flexbox. jsfiddle.net/vUSmV/101

Ещё вопросы

Сообщество Overcoder
Наверх
Меню