Flexibilní rozvržení CSS - CSS Flexible Box Layout
![]() | Tento článek má několik problémů. Prosím pomozte vylepši to nebo diskutovat o těchto otázkách na internetu diskusní stránka. (Zjistěte, jak a kdy tyto zprávy ze šablony odebrat) (Zjistěte, jak a kdy odstranit tuto zprávu šablony)
|
Flexibilní rozvržení CSS, běžně známý jako Flexbox,[1] je CSS 3 model webového rozložení.[2] Je to v W3C fáze doporučení kandidáta (CR).[3] Flexibilní rozložení umožňuje citlivý prvky v kontejneru, které mají být automaticky uspořádány v závislosti na velikosti obrazovky (nebo zařízení).
Kaskádové styly |
---|
Koncepty |
Filozofie |
Nástroje |
Srovnání |
Koncepty
Většina webových stránek je napsána kombinací HTML (Hypertext Markup Language) a CSS (Kaskádové styly). Stručně řečeno, HTML určuje obsah a logická struktura stránky, zatímco CSS specifikuje jak to vypadá: jeho barvy, písma, formátování, rozložení a styl.
Rozvržení flex-boxu CSS je zvláštní způsob, jak určit rozložení stránek HTML.
Jednou z nejvíce definujících funkcí flexibilního rozvržení je jeho schopnost přizpůsobit se tvaru na základě jeho prostředí pro prohlížení. Velikost rámečků Flex se může přizpůsobit - buď zmenšením, aby se zbytečně monopolizoval prostor, nebo zvětšením, aby se vytvořil prostor pro omezení obsahu uvnitř jeho hranic. Navíc je flexibilní rozložení méně omezující, pokud jde o tok obsahu, než ty, například u blokových a vložených typů zobrazení, které jsou obecně jednosměrné. Ve skutečnosti lze nejen specifikovat ohýbání směrového toku, na úrovni stylu, jako doprava, doleva, nahoru nebo dolů; jednotlivé položky v kontejneru flex lze také automaticky přeskupit a přeskupit tak, aby vyhovovaly dostupnému rozložení.[4]
Dějiny
V roce 2000 intenzivní používání webu mobilními agenty motivovalo k "likvidnímu uspořádání" a responzivní prvky pro rostoucí rozmanitost velikostí obrazovek.[5] V roce 2010 začalo intenzivní využívání populárních rámců pro rozvržení JavaScriptu, jako je Bootstrap, inspirované specifikacemi CSS flex-box a rozložení mřížky.[6] [7]
Moduly CSS 3 obsahovaly podobná řešení, jako je flexbox [8] a mřížka.[9]
Od září 2020[Aktualizace], 98,69% nainstalovaných prohlížečů (99,29% stolních prohlížečů a 100% mobilních prohlížečů) podporuje CSS Flexible Box Layout.[10]
Terminologie
Následuje několik výrazů spojených s modelem flexibilního rozložení
Flex kontejner
- Nadřazený prvek, který drží všechny flex položky. Pomocí vlastnosti zobrazení CSS lze kontejner definovat jako flex nebo inline-flex.
Flexovat položku
- Jakýkoli přímý podřízený prvek držený ve flex kontejneru je považován za flex předmět. Libovolný text v prvku kontejneru je zabalen do neznámé položky flexu.
Sekery
- Každý flex box obsahuje dvě osy: hlavní a příčnou osu. The hlavní osa je osa, na které se položky vzájemně srovnávají. The příčná osa je kolmá na hlavní osu.
Flex-směr
- Stanovuje hlavní osu. Možné argumenty: řádek (výchozí), řádek vzad, sloupec, vzad sloupec.
Zarovnat obsah
- Určuje, jak se obsah umístí na hlavní osu na aktuálním řádku. Nepovinné argumenty: vlevo, vpravo, uprostřed, mezerou, mezerou.
Zarovnat položky
- Určuje výchozí způsob, jakým se flex položky umístí na příčnou osu na každém řádku.
Zarovnat obsah
- Určuje výchozí způsob zarovnání čar příčné osy.
Align-self
- Určuje, jak je jedna položka umístěna podél příčné osy. Toto přepíše všechny výchozí hodnoty nastavené zarovnávacími položkami.
Pokyny
- The main-start / main-end strany určí, kde začít umisťovat položky flex do kontejneru flex, počínaje od hlavního začátku a přes hlavní konec. The cross-start / cross-end strany určují, kde se čáry flexu naplní položkami flexu od začátku do konce.
Objednat
- Umístí prvky do skupin a určí, do kterého pořadí mají být v kontejneru umístěny.
Flex-flow
- Zkratky flex-direction a flex-wrap k umístění obsahu flexu.
Čáry
- Položky Flex lze buď umístit na singulární čáru, nebo na více řádků, jak je definováno vlastností flex-wrap, která řídí jak směr příčné osy, tak způsob, jakým se řádky skládají v kontejneru.
Rozměry
- Hlavní velikost a velikost kříže jsou v podstatě výška a šířka pružného kontejneru, přičemž každá se týká hlavní a příčné osy.
Určete flex box
Označení prvku jako pružného prvku je relativně snadné. Vše, co je nutné, je nastavit vlastnost zobrazení na flex nebo inline-flex následujícím způsobem:
Zobrazit: flex;
Nebo:
Zobrazit: inline-flex;
Nastavením zobrazení na jednu ze dvou výše uvedených hodnot se prvek stane kontejnerem flex a jeho podřízenými položkami flex. Díky přizpůsobení displeje se nádoba a prvek na úrovni bloku, při nastavení displeje na inline-flex se kontejner stane vložený prvek.[11]
Zarovnat na střed
Jednou z výhod flexboxu je schopnost snadno zarovnat položky v kontejneru do středu stránky, a to svisle i vodorovně.
Zobrazit: flex;zarovnat položky: centrum;justify-content: centrum;
Reference
- ^ https://www.w3schools.com/csS/css3_flexbox.asp
- ^ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- ^ „CSS Flexible Box Layout Module Level 1“. www.w3.org. Citováno 2016-07-23.
- ^ „CSS Flexible Box Layout Module Level 1“. dev.w3.org. Citováno 2016-07-23.
- ^ https://www.ibm.com/developerworks/library/wa-cssqueries/index.html
- ^ https://github.com/kvdmolen/grid-flexbox-sass
- ^ https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/
- ^ https://www.w3schools.com/csS/css3_flexbox.asp
- ^ https://www.w3schools.com/css/css_grid.asp
- ^ „Flexibilní modul rozvržení CSS“. Mohu použít. Citováno 2020-09-03.
- ^ Používání flexibilních polí CSS - příručka pro vývojáře webu | MDN