Różnica między display: inline-flex I display: flex
Mam trudności ze zrozumieniem właściwości display:inline-flex;.
Jaka jest różnica między display:inline-flex; a display:flex;?
Próbuję wyrównać pionowo niektóre elementy wewnątrz opakowania ID. Dlatego podałem właściwość display:inline-flex; do tego ID; ponieważ owijarka ID jest kontenerem flex.
Ale nie ma różnicy w prezentacji. Spodziewałem się, że wszystko w ID opakowania zostanie wyświetlone 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>Jaka jest różnica?
6 answers
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.1
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).
1róż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.
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
2018-03-21 15:23:38
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.
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;
display: flex; flex-direction: row;
display: inline-flex; flex-direction: column;
display: flex; flex-direction: column;
display: inline;
display: block
Również, wielki dokument odniesienia: kompletny przewodnik po Flexbox-css triki
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
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:
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
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.
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
Potrzebujesz trochę więcej informacji, aby przeglądarka wiedziała, czego chcesz. Na przykład dzieci kontenera muszą być poinformowane " jak " zginać.
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.
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