Een complete gids voor Flexbox - CSS-trucs

Achtergrond

De Flexbox Layout(Flexible Box) -module (een W3C Candidate Recommendation vanaf oktober 2017) heeft tot doel een efficiëntere manier te bieden om de ruimte tussen items in een container in te delen, uit te lijnen en te verdelen, zelfs als hun grootte onbekend en / of dynamisch is (dus de woord "flex").

Het belangrijkste idee achter de flexibele lay-out is om de container de mogelijkheid te geven om de breedte / hoogte (en volgorde) van de items te wijzigen om de beschikbare ruimte zo goed mogelijk te vullen (meestal voor alle soorten weergaveapparaten en schermformaten). Een flexibele container vergroot items om beschikbare vrije ruimte te vullen of verkleint ze om overlopen te voorkomen.

Het belangrijkste is dat de lay-out van de flexbox richting-agnostisch is in tegenstelling tot de reguliere lay-outs (blok dat verticaal is gebaseerd en inline dat horizontaal is gebaseerd). Hoewel die goed werken voor pagina's, missen ze flexibiliteit (geen woordspeling bedoeld) om grote of complexe toepassingen te ondersteunen (vooral als het gaat om het wijzigen van de oriëntatie, het vergroten of verkleinen, uitrekken, verkleinen, enz.).

Opmerking: de Flexbox-lay-out is het meest geschikt voor de componenten van een applicatie en voor kleinschalige lay-outs, terwijl de Grid-lay-out bedoeld is voor lay-outs op grotere schaal.

Basis en terminologie

Omdat flexbox een hele module is en geen enkele eigenschap, komt er veel bij kijken, inclusief de hele reeks eigenschappen. Sommigen van hen zijn bedoeld om op de container te worden geplaatst (bovenliggend element, bekend als “flexcontainer”), terwijl de anderen bedoeld zijn om op de kinderen te worden geplaatst (genoemde “flexitems”).

Als de "normale" lay-out is gebaseerd op zowel blok- als inline stroomrichtingen, is de flexibele lay-out gebaseerd op "flexstroomrichtingen". Bekijk deze figuur uit de specificatie, waarin het belangrijkste idee achter de flexlay-out wordt uitgelegd.

Items worden ingedeeld volgens de main axis(van main-starttot main-end) of de dwarsas (van cross-starttot cross-end).

hoofdas - De hoofdas van een flexcontainer is de primaire as waarlangs flexitems zijn opgesteld. Pas op, het is niet noodzakelijk horizontaal; het hangt af van het flex-directiononroerend goed (zie hieronder).
hoofdstart | main-end - De flex-items worden in de container geplaatst, beginnend bij main-start en gaand naar main-end.
hoofdmaat - De breedte of hoogte van een flexitem, afhankelijk van wat de hoofdafmeting is, is de hoofdmaat van het item. De belangrijkste eigenschap size van het flex-item is ofwel de eigenschap 'width' of 'height', afhankelijk van wat in de hoofddimensie is.
dwarsas - De as loodrecht op de hoofdas wordt de dwarsas genoemd. De richting hangt af van de richting van de hoofdas.
cross-start | Cross-end - Flexlijnen worden gevuld met items en in de container geplaatst, beginnend aan de cross-startzijde van de flexcontainer en richting de cross-end-zijde.
cross size - De breedte of hoogte van een flex-item, afhankelijk van de cross-dimensie, is de cross-size van het item. De eigenschap voor kruisgrootte is de 'breedte' of 'hoogte' die in de kruisafmeting staat.

Pak de poster!

Veel verwijzen naar deze gids? Pin een kopie op de kantoormuur.

Koop poster

Eigenschappen voor de ouder
(flexcontainer)

Scherm

Dit definieert een flexcontainer; inline of blok afhankelijk van de gegeven waarde. Het maakt een flexibele context mogelijk voor al zijn directe kinderen.

.container ( display: flex; /* or inline-flex */ )

Merk op dat CSS-kolommen geen effect hebben op een flexcontainer.

flex-richting

Hiermee wordt de hoofdas bepaald, waarmee de richting wordt bepaald waarin flexartikelen in de flexcontainer worden geplaatst. Flexbox is (afgezien van optionele verpakking) een ontwerpconcept in één richting. Beschouw flexitems als primair opgesteld in horizontale rijen of verticale kolommen.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(standaard): van links naar rechts in ltr; van rechts naar links inrtl
row-reverse: rechts naar links in ltr; van links naar rechts inrtl
column: hetzelfde als rowmaar van boven naar beneden
column-reverse: hetzelfde als row-reversemaar van onder naar boven

flex-wrap

Standaard proberen flex-items allemaal op één regel te passen. U kunt dat wijzigen en de items naar wens laten verpakken met deze eigenschap.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (standaard): alle flexitems staan op één regel
wrap: flex-items worden van boven naar beneden op meerdere regels gewikkeld.
wrap-reverse: flex-items worden van onder naar boven op meerdere regels gewikkeld.

Er zijn hier enkele visuele demo's van flex-wrap.

flex-stroom

Dit is een afkorting voor de flex-directionen flex-wrapeigenschappen, die samen de hoofd- en dwarsassen van de flexcontainer definiëren. De standaardwaarde is row nowrap.

.container ( flex-flow: column wrap; )

rechtvaardigen-inhoud

Dit definieert de uitlijning langs de hoofdas. Het helpt bij het verdelen van extra vrije ruimte die overblijft wanneer alle flexitems op een lijn niet flexibel zijn, of flexibel zijn maar hun maximale grootte hebben bereikt. Het oefent ook enige controle uit over de uitlijning van items wanneer ze over de lijn lopen.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (standaard): items worden verpakt in de richting van het begin van de flex-richting.
flex-end: items worden tegen het einde van de flexrichting verpakt.
start: items worden verpakt in de richting van het begin van de writing-moderichting.
end: items worden tegen het einde van de writing-moderichting verpakt .
left: items zijn verpakt richting de linkerrand van de container, tenzij dat niet klopt met de flex-direction, dan gedraagt het zich als start.
right: items zijn verpakt naar de rechterkant van de container, tenzij dat niet klopt met de flex-direction, dan gedraagt het zich als end.
center: items zijn gecentreerd langs de lijn
space-between: items worden gelijkmatig verdeeld over de regel; eerste item staat op de startregel, laatste item op de eindregel
space-around: items zijn gelijkmatig verdeeld in de regel met gelijke ruimte eromheen. Merk op dat de spaties visueel niet gelijk zijn, aangezien alle items aan beide zijden evenveel ruimte hebben. Het eerste item heeft één ruimte-eenheid tegen de rand van de container, maar twee eenheden tussen het volgende item omdat dat volgende item zijn eigen tussenruimte heeft die van toepassing is.
space-evenly: items worden zo verdeeld dat de afstand tussen twee willekeurige items (en de ruimte tot de randen) gelijk is.

Merk op dat de browserondersteuning voor deze waarden genuanceerd is. Ik heb bijvoorbeeld space-betweennooit ondersteuning gekregen van sommige versies van Edge en begin / einde / links / rechts zijn nog niet in Chrome. MDN heeft gedetailleerde grafieken. De veiligste waarden zijn flex-start, flex-enden center.

Er zijn ook twee aanvullende trefwoorden die u aan deze waarden kunt koppelen: safeen unsafe. Gebruik safezorgt ervoor dat, hoe je dit type positionering ook doet, je een element niet zodanig kunt pushen dat het off-screen wordt weergegeven (bijv. Van bovenaf) op zo'n manier dat de inhoud ook niet kan worden gescrold (dit wordt "gegevensverlies" genoemd) .

align-items

Dit definieert het standaardgedrag voor hoe flexitems langs de dwarsas op de huidige regel worden ingedeeld. Zie het als de justify-contentversie voor de dwarsas (loodrecht op de hoofdas).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (standaard): uitrekken om de container te vullen (respecteer nog steeds min-breedte / max-breedte)
flex-start Het verschil daartussen is subtiel en gaat over het respecteren van de regels of de regels.startself-startflex-directionwriting-mode
flex-end Het verschil is opnieuw subtiel en gaat over het respecteren van regels versus regels.endself-endflex-directionwriting-mode
center: items worden gecentreerd op de dwarsas
baseline: items worden uitgelijnd zoals hun basislijnen worden uitgelijnd

De sleutelwoorden safeen unsafemodificator kunnen worden gebruikt in combinatie met al deze andere sleutelwoorden (hoewel de browser wordt ondersteund) en helpen u te voorkomen dat uitlijningselementen zodanig worden uitgelijnd dat de inhoud ontoegankelijk wordt.

align-content

Hierdoor worden de lijnen van een flexcontainer uitgelijnd wanneer er extra ruimte is in de dwarsas, vergelijkbaar met het justify-contentuitlijnen van individuele items binnen de hoofdas.

Opmerking: deze eigenschap is alleen van kracht op flexibele containers met meerdere regels, waarbij flex-flowis ingesteld op wrapof wrap-reverse). Een flexibele container met één regel (dwz waar flex-flowis ingesteld op de standaardwaarde no-wrap) wordt niet weergegeven align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (standaard): items worden verpakt in hun standaardpositie alsof er geen waarde is ingesteld.
flex-start startDe (meer gesteunde) flex-starteert flex-directionterwijl startde writing-moderichting eert .
flex-end endDe (meer steun) flex-endeert de flex-directiontijd en eert de writing-moderichting.
center: items gecentreerd in de container
space-between: items gelijkmatig verdeeld; de eerste regel staat aan het begin van de container en de laatste aan het einde
space-around: items gelijkmatig verdeeld met gelijke ruimte rond elke regel
space-evenly: items zijn gelijkmatig verdeeld met gelijke ruimte eromheen
stretch: lijnen strekken zich uit om de resterende ruimte in te nemen

Eigenschappen voor de kinderen
(flexitems)

bestellen

Standaard worden flexartikelen opgemaakt in de bronvolgorde. De ordereigenschap bepaalt echter de volgorde waarin ze in de flexcontainer verschijnen.

.item ( order: 5; /* default is 0 */ )

flex-groeien

Dit definieert de mogelijkheid voor een flexitem om indien nodig te groeien. Het accepteert een eenheidsloze waarde die als een verhouding dient. Het bepaalt hoeveel van de beschikbare ruimte in de flexcontainer het item moet innemen.

Als alle items zijn flex-growingesteld op 1, wordt de resterende ruimte in de container gelijkelijk over alle kinderen verdeeld. Als een van de kinderen een waarde van 2 heeft, neemt de resterende ruimte twee keer zoveel ruimte in beslag als de anderen (of zal het proberen, tenminste).

.item ( flex-grow: 4; /* default 0 */ )

Negatieve getallen zijn ongeldig.

flex-krimp

Dit definieert de mogelijkheid voor een flexitem om indien nodig te krimpen.

.item ( flex-shrink: 3; /* default 1 */ )

Negatieve getallen zijn ongeldig.

flex-basis

Dit definieert de standaardgrootte van een element voordat de resterende ruimte wordt verdeeld. Het kan een lengte zijn (bijv. 20%, 5rem, etc.) of een trefwoord. Het autosleutelwoord betekent "kijk naar mijn breedte- of hoogte-eigenschap" (wat tijdelijk werd gedaan door het main-sizezoekwoord totdat het verouderd was). Het contentzoekwoord betekent “de omvang ervan op basis van de inhoud van het item” - dit zoekwoord is nog niet goed ondersteund, dus het is moeilijk om te testen en moeilijker om te weten wat zijn broeders max-content, min-contenten fit-contentte doen.

.item ( flex-basis: | auto; /* default auto */ )

Indien ingesteld op 0, wordt de extra ruimte rond inhoud niet meegerekend. Indien ingesteld op auto, wordt de extra ruimte verdeeld op basis van de flex-growwaarde. Zie deze afbeelding.

buigen

Dit is de afkorting voor flex-grow, flex-shrinken flex-basisgecombineerd. De tweede en derde parameter ( flex-shrinken flex-basis) zijn optioneel. De standaardwaarde is 0 1 auto, maar als u het instelt met een enkele getalswaarde, is het zo 1 0.

.item ( flex: none | ( ? || ) )

Het wordt aanbevolen om deze steno-eigenschap te gebruiken in plaats van de individuele eigenschappen in te stellen. De afkorting stelt de andere waarden intelligent in.

align-self

Hierdoor kan de standaard uitlijning (of die gespecificeerd door align-items) worden overschreven voor individuele flexitems.

Raadpleeg de align-itemsuitleg om de beschikbare waarden te begrijpen.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Merk op dat float, clearen vertical-alignhebben geen effect op een flexitem.

Voorbeelden

Laten we beginnen met een heel erg eenvoudig voorbeeld dat een bijna dagelijks probleem oplost: perfect centreren. Makkelijker kan het niet als u flexbox gebruikt.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

Dit berust op het feit dat een ingestelde marge autoin een flexcontainer extra ruimte opneemt. Dus als u een verticale marge instelt, autowordt het item perfect gecentreerd in beide assen.

Laten we nu wat meer eigenschappen gebruiken. Overweeg een lijst van 6 items, allemaal met vaste afmetingen, maar die automatisch kunnen worden aangepast. We willen dat ze gelijkmatig over de horizontale as worden verdeeld, zodat wanneer we de grootte van de browser wijzigen, alles mooi schaalt en zonder mediaquery's.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Gedaan. Al het andere is slechts een kwestie van styling. Hieronder ziet u een pen met dit voorbeeld. Ga zeker naar CodePen en probeer het formaat van uw vensters te wijzigen om te zien wat er gebeurt.

Laten we iets anders proberen. Stel je voor dat we een rechts uitgelijnd navigatie-element helemaal bovenaan onze website hebben, maar we willen dat het gecentreerd is op middelgrote schermen en één kolom op kleine apparaten. Makkelijk genoeg.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Laten we iets beters proberen door te spelen met de flexibiliteit van flexibele items! Hoe zit het met een mobile-first 3-kolommen lay-out met koptekst en voettekst over de volledige breedte? En onafhankelijk van de volgorde van de bron.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Voorvoegsel Flexbox

Flexbox vereist een aantal leveranciersvoorvoegsels om zo veel mogelijk browsers te ondersteunen. Het bevat niet alleen aanliggende eigenschappen met het leveranciersvoorvoegsel, maar er zijn in feite geheel verschillende eigenschappen en waarden. Dit komt doordat de Flexbox-specificatie in de loop van de tijd is veranderd, waardoor een "oude", "tweener" en "nieuwe" versie is ontstaan.

Misschien is de beste manier om hiermee om te gaan, door in de nieuwe (en laatste) syntaxis te schrijven en je CSS door Autoprefixer te laten lopen, die de fallbacks heel goed afhandelt.

Als alternatief is hier een Sass @mixinom te helpen met een deel van de voorvoegsels, die je ook een idee geven van wat voor soort dingen er moeten worden gedaan:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Gerelateerde eigenschappen

Een complete gids voor rasters
Almanak-items over rastereigenschappen, zoals raster-rij / raster-kolom

Andere bronnen

Flexbox in de CSS-specificaties
Flexbox bij MDN
Flexbox bij Opera
Duik in Flexbox door Bocoup
Syntaxis mengen voor de beste browserondersteuning op CSS-Tricks
Flexbox van Raphael Goetter (FR)
Flexplorer van Bennett Feely

Bugs

Flexbox is zeker niet zonder bugs. De beste verzameling die ik heb gezien, is de Flexbugs van Philip Walton en Greg Whitworth. Het is een open-source plek om ze allemaal te volgen, dus ik denk dat het het beste is om er gewoon naar te linken.

Browser-ondersteuning

Opgesplitst naar "versie" van flexbox:

(nieuw) betekent de recente syntaxis van de specificatie (bijv. display: flex;)
(tweener) betekent een vreemde onofficiële syntaxis uit 2011 (bijv. display: flexbox;)
(oud) betekent de oude syntaxis van 2009 (bijv. display: box;)

Chrome	Safari	Firefox	Opera	D.W.Z	Rand	Android	iOS
20- (oud) 21+ (nieuw)	3.1+ (oud) 6.1+ (nieuw)	2-21 (oud) 22+ (nieuw)	12.1+ (nieuw)	10 (tweener) 11+ (nieuw)	17+ (nieuw)	2.1+ (oud) 4.4+ (nieuw)	3.2+ (oud) 7.1+ (nieuw)

Blackberry browser 10+ ondersteunt de nieuwe syntaxis.