Разница между дисплеем: inline-flex и дисплеем: flex

мне трудно понять свойство display:inline-flex;.
В чем разница между display:inline-flex; и display:flex;?



Я пытаюсь вертикально выровнять некоторые элементы в оболочке ID. Вот почему я дал свойство display:inline-flex; к этому идентификатору; потому что оболочка идентификатора-это контейнер 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



в чем разница?

1126   6  

6 ответов:

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

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

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

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

257  
2018-03-21 17:23:38

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

41  
2014-12-13 15:17:31

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

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

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

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

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

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

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

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

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

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

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 tricks

24  
2016-12-10 11:08:13

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

как сделать div inline или блок, выполнить код ниже и вы можете увидеть, как 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>

и быстро создать изображение ниже, чтобы показать разницу с первого взгляда:

display flex vs display inline-flex

19  
2017-10-21 18:21:01

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

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

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

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

12  
2017-01-10 17:43:13

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

Обновленный Скрипку

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

1  
2014-12-11 20:22:03

Comments

    Ничего не найдено.
Click here to cancel reply.