Jaka jest różnica między display: inline-flex a display: flex?

Question

Jaka jest różnica między display: inline-flex a display: flex?

Próbuję wyrównać pionowo elementy wewnątrz opakowania ID. Podałem właściwość display:inline-flex; do tego identyfikatora, ponieważ wrapper ID jest kontenerem flex.

Ale nie ma różnicy w prezentacji. Spodziewałem się, że wszystko w ID opakowania zostanie wyświetlone inline. Dlaczego nie?

#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>

382

css flexbox

Author: Sumit, 2014-12-11

Source

9 answers

OK, wiem, że na początku może być trochę mylące, ale {[2] } mówi o elemencie nadrzędnym, więc kiedy mówimy: display: flex;, chodzi o element, a kiedy mówimy display:inline-flex;, robi również sam element inline...

It ' s like make a div inline lub block, Uruchom poniższy fragment i zobacz, jak display flex rozkłada się do następnej linii:

.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>

Również szybko utworzyć obrazek poniżej, aby pokazać różnicę w rzut oka:

88

Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-21 15:21:01

flex i inline-flex stosują układ flex do potomków kontenera. Kontener z display:flex zachowuje się jak element blokowy, podczas gdy display:inline-flex sprawia, że kontener zachowuje się jak element wbudowany.

68

Author: Leo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-13 13:17:31

Różnica między "flex " i"inline-flex"

Krótka odpowiedź:

Jeden jest inline, a drugi w zasadzie odpowiada jak element blokowy (ale ma pewne własne różnice).

Dłuższa odpowiedź:

Inline-Flex-wbudowana wersja flex pozwala elementowi i jego potomkom na posiadanie właściwości flex, pozostając w regularnym przepływie dokumentu / strony internetowej. Zasadniczo można umieścić dwa wbudowane kontenery flex w ten sam rząd, jeśli szerokości były wystarczająco małe, bez nadmiaru stylizacji, aby mogły istnieć w tym samym rzędzie. Jest to dość podobne do "inline-block."

Flex-kontener i jego dzieci mają właściwości flex, ale kontener rezerwuje wiersz, ponieważ jest wyjęty z normalnego przepływu dokumentu. Reaguje jak element blokowy, jeśli chodzi o przepływ dokumentów. Dwa kontenery flexbox nie mogłyby istnieć w tym samym rzędzie bez nadmiernej stylizacji.

Problemem może być mając

Ze względu na elementy wymienione w twoim przykładzie, choć zgaduję, myślę, że chcesz użyć flex, aby wyświetlić elementy wymienione w sposób równomierny wiersz po wierszu, ale nadal zobaczyć elementy obok siebie.

Prawdopodobnie występują problemy, ponieważ flex i inline-flex mają domyślną właściwość " Flex-direction "ustawioną na" row."To wyświetli dzieci obok siebie. Zmiana tej właściwości na "column" pozwoli Twoim elementom na układanie i rezerwowanie spacja (szerokość) równa szerokości jego rodzica.

Poniżej kilka przykładów, aby pokazać, jak działa flex vs inline-flex, a także szybkie demo, jak działają elementy inline vs block...

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

Również, wielki dokument odniesienia: kompletny przewodnik po Flexbox-css triki

30

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-10 09:08:13

Display: flex Zastosuj układ flex tylko do elementów flex lub dzieci kontenera. Tak więc sam kontener pozostaje elementem blokowym, a tym samym zajmuje całą szerokość ekranu.

Powoduje to, że każdy kontener flex przenosi się do nowej linii na ekranie.

Display: inline-flex Zastosuj układ flex do elementów flex lub dzieci, a także do samego kontenera. W rezultacie kontener zachowuje się jak element flex inline, podobnie jak dzieci i tym samym zajmuje szerokość wymaganą tylko przez jego elementy / dzieci, a nie całą szerokość ekranu.

Powoduje to, że dwa lub więcej kontenerów flex jeden po drugim, wyświetlanych jako inline-flex, wyrównują się obok siebie na ekranie, aż do uzyskania całej szerokości ekranu.

16

Author: Noor Jahan Mukammel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-10 15:43:13

Używanie składni dwuwartościowej `display` dla jasności

Właściwość display CSS ustawia dwie rzeczy na raz: zewnętrzny typ wyświetlania i wewnętrzny typ wyświetlania. Zewnętrzny typ wyświetlacza wpływa na sposób wyświetlania elementu (który działa jak kontener) w jego kontekście. Wewnętrzny typ wyświetlacza wpływa na sposób ułożenia dzieci elementu (lub dzieci kontenera).

Jeśli używasz składni display o dwóch wartościach, która jest obsługiwana tylko w niektórych przeglądarkach, takich jak Firefox, różnica między nimi jest znacznie bardziej oczywista:

display: block jest równoważne display: block flow
display: inline jest równoważne display: inline flow
display: flex jest odpowiednikiem display: block flex
display: inline-flex jest odpowiednikiem display: inline flex
display: grid jest równoważne display: block grid
display: inline-grid jest równoważne display: inline grid

Typ wyświetlacza zewnętrznego: `block` lub `inline`:

Element z zewnętrznym wyświetlaczem typu block zajmie całą szerokość dostępne dla niego, jak <div> robi. Element z zewnętrznym wyświetlaczem typu inline zajmuje tylko potrzebną szerokość, przy zawijaniu, tak jak robi to <span>.

Wewnętrzny typ wyświetlacza: `flow`, `flex` lub `grid`:

Wewnętrzny typ wyświetlacza flow jest domyślnym typem wyświetlacza wewnętrznego, gdy nie podano flex lub grid. Jest to sposób układania elementów dziecięcych, do którego jesteśmy przyzwyczajeni na przykład w <p>. flex i grid to nowe sposoby układania dzieci, na które każdy zasługuje własne stanowisko.

Wniosek:

Różnica między display: flex i display: inline-flex jest zewnętrznym typem wyświetlacza, zewnętrznym typem wyświetlacza pierwszego jest block, a zewnętrznym typem wyświetlacza drugiego jest inline. Oba mają wewnętrzny typ wyświetlacza flex.

Bibliografia:

dwu-wartościowa składnia właściwości CSS Display na mozzilla.org

5

Author: Flimm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-30 09:26:51

Potrzebujesz trochę więcej informacji, aby przeglądarka wiedziała, czego chcesz. Na przykład dzieci kontenera muszą być poinformowane " jak " zginać.

Updated Fiddle

Dodałem #wrapper > * { flex: 1; margin: auto; } do twojego CSS i zmieniłem inline-flex na flex, i możesz zobaczyć, jak elementy rozmieszczone są teraz równomiernie na stronie.

0

Author: FiSH GRAPHICS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-11 18:22:03

Możesz wyświetlać elementy flex inline, pod warunkiem, że twoje założenie opiera się na oczekiwaniu elastycznych elementów inline na pierwszym miejscu. Użycie flex oznacza elastyczny element poziomu bloków.

Najprostszym podejściem jest użycie kontenera flex z jego dziećmi ustawionymi na właściwość flex. Pod względem kodu wygląda to tak:

.parent{
   display: inline-flex;
}

.children{
   flex: 1;
}

flex: 1 oznacza stosunek, podobny do procentów szerokości elementu.

Sprawdź te dwa linki, aby zobaczyć simple live Flexbox przykłady:

Jeśli użyjesz pierwszego przykładu:

Https://njbenjamin.com/flex/index_1.htm

Możesz bawić się konsolą przeglądarki, aby zmienić display elementu kontenera pomiędzy flex i inline-flex.

0

Author: Konkret,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-29 19:05:33

Otwórz pełną stronę dla lepszego zrozumienia

.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>

-2

Author: Pawan Gangwani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-04 15:03:05

score 469 · Accepted Answer

display: inline-flex nie powoduje wyświetlania elementów flex {[10] } w linii. Sprawia, że flex container wyświetla inline. Jest to jedyna różnica pomiędzy display: inline-flex i display: flex. Podobne porównanie można dokonać między display: inline-block i display: block, A praktycznie każdym innym typem wyświetlacza, który ma wbudowany odpowiednik.¹

Nie ma absolutnie żadnej różnicy w wpływie na elementy flex; układ flex jest identyczny, niezależnie od tego, czy kontener flex jest na poziomie bloku, czy na poziomie linii. W w szczególności, same elementy flex zawsze zachowują się jak pudełka na poziomie bloków (chociaż mają niektóre właściwości bloków wbudowanych). Nie można wyświetlać elementów flex w wierszu; w przeciwnym razie nie ma układu flex.

Nie jest jasne, co dokładnie rozumiesz przez "wyrównanie pionowe" lub dlaczego dokładnie chcesz wyświetlać zawartość w linii, ale podejrzewam, że flexbox nie jest odpowiednim narzędziem do tego, co próbujesz osiągnąć. Są szanse, że to, czego szukasz, jest po prostu zwykły stary układ inline (display: inline i/lub display: inline-block), dla którego flexbox jest, a nie zamiennikiem; flexbox jest , a nie uniwersalnym rozwiązaniem układu, które wszyscy twierdzą, że jest (stwierdzam to, ponieważ błędne przekonanie jest prawdopodobnie powodem, dla którego rozważasz flexbox w pierwszej kolejności).

¹_{różnice między układem bloków a układem liniowym wykraczają poza zakres tego pytania, ale najbardziej wyróżnia się automatyczna szerokość: pola na poziomie bloków rozciągają się poziomo, aby wypełnić ich zawierający blok, podczas gdy Pudełka na poziomie liniowym kurczą się, aby pasowały do ich zawartości. W rzeczywistości tylko z tego powodu prawie nigdy nie będziesz używać display: inline-flex, chyba że masz bardzo dobry powód, aby wyświetlić swój kontener flex inline.}

Jaka jest różnica między display: inline-flex a display: flex?

9 answers

Używanie składni dwuwartościowej display dla jasności

Typ wyświetlacza zewnętrznego: block lub inline:

Wewnętrzny typ wyświetlacza: flow, flex lub grid:

Wniosek:

Bibliografia:

Używanie składni dwuwartościowej `display` dla jasności

Typ wyświetlacza zewnętrznego: `block` lub `inline`:

Wewnętrzny typ wyświetlacza: `flow`, `flex` lub `grid`: