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

331

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

css  flexbox 
— astridx
источник

Ответы:

407

display: inline-flexне заставляет гибкие элементы отображаться встроенными. Это делает дисплей гибкого контейнера встроенным. Это единственная разница между 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не будете использовать, если у вас нет веских оснований для показа встроенного контейнера.

— BoltClock
источник
14
Улучшенная скрипку демка дифференцируется inline-flexи flex: jsfiddle.net/mgr0en3q/1 Оригинала скрипки на @ рыба-графике и @astridx
— Кевин закон
Абсолютно полезный ответ. Я запутался в первый раз. Когда я применяю встроенное сгибание, элемент flex не изменяется, когда я применяю с отображением flex. На самом деле это применимо в flex-контейнере :)
— Фарис Райхан
68

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

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

дисплей flex против дисплея inline-flex

— Алиреза
источник
3
Что вы используете для этой картины? Этот шрифт очень хороший.
— Шу
5
На изображении выше есть небольшая опечатка. «display: flex-inline» должен быть «display: inline-flex» аналогично «inline-block» и т. д.
— AlienKevin
62

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

— Лео
источник
29

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

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

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

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

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

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

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

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

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

Ниже приведены некоторые примеры, показывающие, как работает flex vs-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

15

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

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

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

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

— Нур Джахан Мукаммель
источник
1
"применить гибкий макет [...] к самому контейнеру" [цитата необходима]
— BoltClock
1

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

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

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

— ФИШ ГРАФИКА
источник
2
Спасибо за ваш ответ, но я знал, что смогу сделать это таким образом. Я только неправильно понял свойство display: inline-flex; - Я подумал, что это свойство - более простой способ достижения моей цели. Но между последними днями я узнал, что это свойство только делает контейнер встроенным. Теперь с добавленным фоном я вижу разницу между свойствами отображения: inline-flex; и дисплей: гибкий; на flexbox. jsfiddle.net/vUSmV/101
— astridx
-1

Открыть в полной странице для лучшего понимания

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}
<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>
Развернуть фрагмент

— Паван Гангвани
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.