Question

229560 просмотра

6 ответа

Я пытаюсь вертикально выровнять элементы в оболочке идентификатора. Я присвоил 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

Автор: astridx Источник Размещён: 12.11.2019 09:26

Answer 1

359 плюса

Решение

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

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

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

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

Автор: BoltClock Размещён: 13.12.2014 01:08

Answer 2

53 плюса

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

Автор: Leo Размещён: 13.12.2014 01:17

Answer 3

46 плюса

Хорошо, я знаю, что сначала это может немного сбить с толку, но 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>

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

Автор: Alireza Размещён: 21.10.2017 03:01

Answer 4

28 плюса

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

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

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

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

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

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

Проблема у вас может быть

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

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

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

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

скрипка

display: flex; flex-direction: row;

скрипка

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

скрипка

display: flex; flex-direction: column;

скрипка

display: inline;

скрипка

display: block

скрипка

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

Автор: Aaron Loften Размещён: 10.12.2016 09:08

Answer 5

13 плюса

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

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

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

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

Автор: Noor Jahan Mukammel Размещён: 09.01.2017 04:40

Answer 6

1 плюс

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

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

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

Автор: FiSH GRAPHICS Размещён: 11.12.2014 06:22

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

Ответы (6)

Вопросы из категории :