Яка різниця між дисплеєм: вбудований-флекс та дисплей: флекс?

331

Я намагаюся вертикально вирівняти елементи в обгортці ідентифікатора. Я надав властивість display:inline-flex;цьому ідентифікатору, оскільки обгортка ID - це контейнер 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 
— астрідкс
джерело

Відповіді:

407

display: inline-flexне робить відображення гнучких елементів в рядку. Це робить дисплей з гнучким контейнером вбудованим. Це єдина різниця між display: inline-flexта display: flex. Аналогічне порівняння можна провести між display: inline-blockі display: block, і майже будь-який інший тип дисплея , який має вбудований аналог . 1

Немає різниці в впливі на гнучкі предмети; макет розгинання ідентичний, незалежно від того, чи є контейнер flex на рівні блоку чи вбудованого рівня. Зокрема, самі елементи flex завжди поводяться як блоки на рівні блоків (хоча вони мають деякі властивості вбудованих блоків). Ви не можете відображати вбудовані гнучкі елементи; в іншому випадку ви насправді не маєте гнучку компонування.

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

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

— BoltClock
джерело
14
Розширений демо- скрипт для розмежування inline-flexта flex: jsfiddle.net/mgr0en3q/1 Оригінальна скрипка від @ fish-graphics та @astridx
— Кевін Лоу
Абсолютно корисна відповідь. Я заплутався в перший раз. Коли я застосовую вбудований флекс, елемент flex не змінюється, коли я застосовую і з flex flex. Насправді це застосовується у flex контейнері :)
— Faris Rayhan
68

Гаразд, я знаю, спочатку це може бути дещо заплутано, але displayце говорить про батьківський елемент, тому означає, що коли ми говоримо:, display: flex;це про елемент, а коли ми говоримо display:inline-flex;, це також створює сам елемент inline...

Це як зробити div вбудований чи блокувати , запустіть фрагмент нижче, і ви можете побачити, як 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

— Аліреза
джерело
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 inline-flex, а також швидке демонстрація того, як працюють елементи вбудованого проти блоку ...

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 лише до предметів flex або дітей контейнера. Отже, сам контейнер залишається елементом рівня блоку і, таким чином, займає всю ширину екрану.

Це призводить до того, що кожен гнучкий контейнер переходить на новий рядок на екрані.

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

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

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

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

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

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

— ГРАФІКА ФІШ
джерело
2
Дякую за вашу відповідь, але я знав, що можу це зробити так. Я лише неправильно зрозумів відображення властивості: inline-flex; - Я думав, що ця властивість - це простіший спосіб досягти своєї мети. Але між останніми днями я дізнався, що ця властивість лише робить дисплей контейнера вбудованим. З доданим фоном я бачу тепер різницю між властивостями відображення: inline-flex; та дисплей: flex; у флексі. 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>
Розгорніть фрагмент

— Pawan Gangwani
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.