Jaka jest różnica między wyświetlaniem: inline-flex a wyświetlaniem: flex?

331

Próbuję wyrównać w pionie elementy w opakowaniu identyfikatora. Dałem właściwość display:inline-flex;do tego identyfikatora, ponieważ opakowanie identyfikatora to elastyczny pojemnik.

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

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

Rozwiń fragment kodu

css flexbox

— astridx
źródło

407

display: inline-flexnie powoduje wyświetlania elementów elastycznych w linii. To sprawia, że elastyczny pojemnik wyświetla się w linii. To jedyna różnica między display: inline-flexi display: flex. Podobnego porównania można dokonać pomiędzy display: inline-blocki display: block, i prawie każdym innym typem wyświetlacza, który ma wbudowany odpowiednik . ¹

Nie ma absolutnie żadnej różnicy w wpływie na przedmioty elastyczne; układ flex jest identyczny bez względu na to, czy kontener flex ma poziom blokowy czy wbudowany. W szczególności same elementy flex zawsze zachowują się jak pola na poziomie bloku (chociaż mają pewne właściwości bloków wbudowanych). Nie można wyświetlać elementów elastycznych w linii; w przeciwnym razie nie masz układu elastycznego.

Nie jest jasne, co dokładnie rozumiesz przez „wyrównanie w pionie” lub dlaczego dokładnie chcesz wyświetlać zawartość w linii, ale podejrzewam, że Flexbox nie jest odpowiednim narzędziem do wszystkiego, co próbujesz osiągnąć. Szanse są tym, czego szukasz, to po prostu stary, wbudowany układ ( display: inlinei / lub display: inline-block), dla którego Flexbox nie jest zamiennikiem; Flexbox nie jest uniwersalnym rozwiązaniem układowym , jak twierdzą wszyscy (twierdzę to, ponieważ błędne przekonanie jest prawdopodobnie powodem, dla którego rozważasz Flexbox).

¹ _{Różnice między układem bloku a układem wbudowanym są poza zakresem tego pytania, ale najbardziej wyróżnia się automatyczna szerokość: pola na poziomie bloku rozciągają się w poziomie, aby wypełnić swój zawierający blok, podczas gdy pola na poziomie kurczą się, aby dopasować do ich zawartość. W rzeczywistości tylko z tego powodu prawie nigdy display: inline-flexnie będziesz używać, chyba że masz bardzo dobry powód, aby wyświetlać swój elastyczny pojemnik w linii.}

— BoltClock
źródło

14

Ulepszone demo skrzypce, aby odróżnić inline-flexi flex: jsfiddle.net/mgr0en3q/1 Oryginalne skrzypce autorstwa @ fish-graphic i @astridx

— Kevin Law

Absolutnie pomocna odpowiedź. Po raz pierwszy się zdezorientowałem. Kiedy zastosuję flex wbudowany, element flex nie zmieni się, gdy zastosuję również Flex display. Właściwie to dotyczy elastycznego pojemnika :)

— Faris Rayhan

68

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

To jest jak div wstawienie wiersza lub bloku , uruchom fragment kodu poniżej, a zobaczysz, jak display flexrozkłada się do następnego wiersza:

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

Rozwiń fragment kodu

Również szybko utwórz obraz poniżej, aby pokazać różnicę na pierwszy rzut oka:

— Alireza
źródło

3

Czego używasz do tego zdjęcia? Ta czcionka jest bardzo ładna.

— shu

5

Na powyższym obrazku jest mała literówka. „display: flex-inline” powinien być „display: inline-flex” podobny do „inline-block” itp.

— AlienKevin

62

flexi inline-flexoba stosują układ elastyczny do elementów podrzędnych kontenera. Kontener z display:flexzachowuje się jak sam element na poziomie bloku, a jednocześnie display:inline-flexsprawia, że zachowuje się jak element wbudowany.

— Lew
źródło

29

Różnica między „flex” a „inline-flex”

Krótka odpowiedź:

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

Dłuższa odpowiedź:

Inline-Flex - wbudowana wersja flex pozwala elementowi i jego dzieciom na posiadanie właściwości flexu, pozostając jednocześnie w regularnym przepływie dokumentu / strony internetowej. Zasadniczo można umieścić dwa wbudowane elastyczne kontenery w tym samym rzędzie, 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 „bloku wbudowanego”.

Flex - kontener i jego elementy podrzędne mają właściwości flex, ale kontener rezerwuje wiersz, ponieważ jest on wyjęty z normalnego przepływu dokumentu. Pod względem przepływu dokumentów reaguje jak element blokowy. Dwa kontenery Flexbox nie mogłyby istnieć w tym samym rzędzie bez nadmiernej stylizacji.

Problem, który możesz mieć

Z powodu elementów wymienionych w twoim przykładzie, choć zgaduję, myślę, że chcesz użyć flex, aby wyświetlić elementy wymienione w sposób równomierny rząd po rzędzie, ale nadal widzieć elementy obok siebie.

Prawdopodobnie występują problemy, ponieważ flex i inline-flex mają domyślną właściwość „flex-direction” ustawioną na „row”. Spowoduje to wyświetlenie dzieci obok siebie. Zmiana tej właściwości na „kolumna” pozwoli na układanie elementów w stos i rezerwowanie miejsca (szerokości) równego szerokości jego elementu nadrzędnego.

Poniżej znajduje się kilka przykładów pokazujących, jak działają flex vs inline-flex, a także krótka prezentacja tego, jak działają elementy inline vs block ...

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

Skrzypce

display: flex; flex-direction: row;

Skrzypce

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

Skrzypce

display: flex; flex-direction: column;

Skrzypce

display: inline;

Skrzypce

display: block

Skrzypce

Również świetny dokument referencyjny: Kompletny przewodnik po Flexbox - sztuczki css

15

Wyświetlanie: Flex stosuje układ Flex tylko do elementów Flex lub elementów podrzędnych kontenera. Tak więc sam pojemnik pozostaje elementem poziomu bloku, a zatem zajmuje całą szerokość ekranu.

Powoduje to, że każdy elastyczny pojemnik przechodzi do nowej linii na ekranie.

Wyświetlanie: inline-flex stosuje układ flex do elementów flex lub dzieci, a także do samego pojemnika. W wyniku tego pojemnik zachowuje się jak element elastyczny w linii, tak jak robią to dzieci, a zatem zajmuje szerokość wymaganą tylko przez jego elementy / dzieci, a nie całą szerokość ekranu.

Powoduje to, że dwa lub więcej pojemników elastycznych jeden po drugim, wyświetlanych jako inline-flex, ustawiają się obok siebie na ekranie, aż zostanie zajęta cała szerokość ekranu.

— Noor Jahan Mukammel
źródło

1

„zastosuj układ elastyczny [...] do samego kontenera” [potrzebne źródło]

— BoltClock

1

Potrzebujesz nieco więcej informacji, aby przeglądarka wiedziała, czego chcesz. Na przykład dzieciom kontenera należy powiedzieć „jak” zginać.

Zaktualizowano skrzypce

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

— GRAFIKA FiSH
źródło

2

Dziękuję za odpowiedź, ale wiedziałem, że mogę to zrobić w ten sposób. Nie zrozumiałem tylko wyświetlania właściwości: inline-flex; - Myślałem, że ta właściwość jest łatwiejszym sposobem na osiągnięcie mojego celu. Ale między ostatnimi dniami dowiedziałem się, że ta właściwość powoduje tylko wyświetlanie kontenera w linii. Po dodaniu tła widzę teraz różnicę między wyświetlanymi właściwościami: inline-flex; i wyświetlanie: flex; w Flexbox. jsfiddle.net/vUSmV/101

— astridx

-1

Otwórz na całej stronie 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>

Rozwiń fragment kodu

— Pawan Gangwani
źródło