Alles over de flexbox-eigenschappen

Het concept achter de eigenschappen van Flexbox is om de container de mogelijkheid te bieden automatisch de breedte, hoogte en volgorde van de items te wijzigen om de beschikbare ruimte het beste te vullen. Dit kan erg handig zijn voor items met verschillende schermformaten en apparaten. Items worden uitgebreid om alle vrije ruimte op te vullen, of gekrompen om een ​​overloop te voorkomen.

CSS Flexbox-rooster voor beginners

CSS is een van de eerste en gemakkelijkste dingen om te leren in webontwikkeling en -ontwerp, maar vergis de eenvoud niet door gebrek aan functies. Het heeft een aantal geweldige functies en mogelijkheden die kunnen worden aangeboord, waaronder de relatief nieuwe lay-outmodule: Flexbox-eigenschappen.

Flexbox-eigenschappen zijn een van de nieuwere lay-outs die beschikbaar zijn voor CSS3, en er is veel te leren over. Hier komen we aan de slag met de lay-out en hoe deze te gebruiken. Voordat we beginnen, hier is een beetje achtergrondinformatie over Flexbox-eigenschappen:

Wat zijn opmaakmodi?

In de eenvoudigste bewoordingen is het CSS Flexbox-raster een lay-outmodus. CSS heeft een aantal bestaande lay-outmodi. De bloklay-outmodus (zoals display: block) bestaat al een lange tijd. Bloklay-outs zijn een goede keuze om volledige documenten te stylen. In feite behandelt een webbrowser standaard verschillende elementen zoals divs en paragrafen als blokniveau.

Een andere veel voorkomende lay-outmodus is inline. De sterke tag, invoertag en ankertag zijn voorbeelden van elementen op inline-niveau. Met de ontwikkeltools van Google Chrome kunt u zelfs de 'berekende stijl' van een element bekijken om de CSS-eigenschappen en -waarden te bepalen die zijn toegepast op de elementen die niet expliciet door de ontwikkelaar zijn ingesteld.

De relatief nieuwere lay-out Flexbox-eigenschappen (Flexible box) is ontworpen als een efficiëntere methode voor het indelen, uitlijnen en verdelen van ruimte tussen containeritems, zelfs als de grootte van deze items dynamisch of onbekend is. Vandaar de term 'flexibel'.

Het Flexbox-eigenschappenconcept

Het belangrijkste van Flexbox-eigenschappen is dat het richting-agnostisch is. Hoewel de bloklay-out verticaal is en de inline-lay-out horizontaal is, is Flexbox geen van beide. Block en inline werken goed in de juiste situaties, maar missen de flexibiliteit om gecompliceerde of grote toepassingen te ondersteunen, met name als het gaat om het veranderen van oriëntatie, uitrekken, krimpen, vergroten of verkleinen en anderszins de afmetingen van de elementen wijzigen.

Waar worden Flexbox-eigenschappen gebruikt?

Net als elke andere CSS-lay-out wordt Flexbox het best gebruikt in bepaalde situaties. Het is met name geschikt voor kleinschalige indelingen en componenten van een toepassing. Voor lay-outs op grotere schaal zou een rasterlay-out de verstandige keuze zijn.

Waarom heeft Flexbox de voorkeur?

Veel ontwikkelaars en ontwerpers geven de voorkeur aan Flexbox-eigenschappen wanneer ze maar kunnen (soms te vaak!). Dit komt omdat Flexbox-eigenschappen gemakkelijker te gebruiken zijn; de positionering van de elementen is veel eenvoudiger, zodat u complexere lay-outs kunt krijgen met minder codering. Met andere woorden, het maakt het ontwikkelingsproces eenvoudiger.

Een handleiding voor Flexbox-eigenschappen

Nu je een beetje weet over de eigenschappen van Flexbox en hoe en waarom het werkt, is hier een gedetailleerde gids voor de lay-out. Het model van de lay-out bestaat uit een oudercontainer, ook wel een 'flex container' genoemd. De directe kinderen uit deze container worden 'flexitems' genoemd.

De lay-out heeft in de loop van de jaren verschillende iteraties en syntaxiswijzigingen ondergaan sinds het eerste concept werd gemaakt in 2009. De nieuwste Flexbox-specificatie wordt ondersteund op de volgende webbrowsers:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

De terminologie die wordt gebruikt in Flexbox-eigenschappen

Hier volgt een overzicht van enkele basisterminologie die wordt gebruikt in de lay-out van de Flexbox-eigenschappen:

  • Display: deze opdracht wordt gebruikt om de flexibele container te definiëren. Het kan inline of block zijn, afhankelijk van het. Het definieert ook flex-inhoud voor alle items in de container. Voorbeeld:

.container (

weergave: flex; / * of inline-flex * /

)

  • Bestelling: Flex-artikelen worden standaard ingedeeld volgens de bronvolgorde, maar de eigenschap 'bestelling' kan de volgorde bepalen waarin de artikelen in de container worden weergegeven. Voorbeeld:

.item (

bestellen: ;

)

  • Flex-richting: deze volgorde stelt de hoofdas in en definieert de richting waarin flex-artikelen in de container worden geplaatst. Flexitems kunnen voornamelijk in verticale of horizontale richting worden neergelegd. Voorbeeld:

.container (

flex-richting: rij | rij-achteruit | kolom | kolom-achteruit;

)

  • Flex-groei: deze volgorde definieert het vermogen van het flexibele item om automatisch op te schalen als er ruimte is. Het kan een eenheidloze waarde accepteren om als een verhouding te dienen. Deze waarde bepaalt hoeveel ruimte het item inneemt in de flexibele container. Als alle items bijvoorbeeld flex-grow als 1 hebben ingesteld, wordt de resterende ruimte in de container gelijk verdeeld over alle kinderen. Als de waarde 2 is, neemt de resterende ruimte twee keer zoveel ruimte in beslag als de rest. Voorbeeld:

.item (

flex-groei:; / * standaard 0 * /

)

  • Flex-krimpen: dit doet precies het tegenovergestelde als flex-groeien, doordat het de flex-artikelen krimpt wanneer dat nodig is. Voorbeeld:

.item (

flex-krimp:; / * standaard 1 * /

)

  • Flexbasis: deze volgorde definieert de standaardgrootte van elementen voordat de rest van de ruimte wordt verdeeld. Het kan een lengte zijn, zoals 5rem of 20%, of een trefwoord. Het trefwoord 'auto' geeft aan dat de breedte en hoogte van het item worden gemeten en het trefwoord 'content' geeft aan dat het formaat van het item is bepaald op basis van de inhoud. Voorbeeld:

.item (

flexbasis: | auto; / * standaard auto * /

)

  • Flex: dit is een gecombineerd steno voor alle bovengenoemde drie eigenschappen: flex-groei, flex-basis en flex-krimp. De standaardwaarde is '0 1 auto'.

.item (

flex: geen | (||)

)

  • Justify-content: deze volgorde definieert de uitlijning van de hoofdas en helpt de extra vrije ruimte te verspreiden als er nog ruimte is wanneer de items inflexibel zijn of hun maximale grootte hebben bereikt. Dit helpt ook om de uitlijning van het item te controleren wanneer er een overloop is.

.container (

justify-content: flex-start | flex einde | center | spatie tussen | ruimte-around;

)

  • Align-items: dit wordt gebruikt om het standaardgedrag van de lay-out van flex-items op de dwarsas van de huidige regel te definiëren. Het is in wezen een versie van 'justify-content' op de dwarsas, die loodrecht staat op de hoofdas. Voorbeeld:

.container (

align-items: flex-start | flex-einde | center | basislijn | rekken;

)

  • Align-content: deze volgorde lijnt de lijnen van de container uit voor het geval er extra ruimte op de dwarsas is. Het is vergelijkbaar met 'justify-content', maar dan voor de dwarsas in plaats van de hoofdas. Als er slechts één regel flexitems is, heeft deze eigenschap geen effect. Voorbeeld:

.container (

align-content: flex-start | flex-einde | center | spatie tussen | ruimte-around | rekken;

)

Flexbox-eigenschappen gebruiken

Om de Flexbox-lay-out te gebruiken, kunt u eenvoudig de weergave-eigenschap instellen op het HTML-bovenliggende element, zoals hieronder:

.flex-container (

weergave: -webkit-flex; / * Safari * /

weergave: flex;

)

Als u liever als een inline-element wilt weergeven, kunt u schrijven in:

.flex-container (

weergave: -webkit-inline-flex; / * Safari * /

weergave: inline-flex;

)

U hebt deze eigenschap alleen nodig om in te stellen op de bovenliggende flexcontainer en zijn onmiddellijke flexitems. De containerkinderen worden automatisch flexitems.

Aanbevolen cursussen

  • Online cursus over gratis jQuery
  • Online cursus over gratis hoekige JS
  • Online training op Mudbox
  • Certificatietraining in Free Ruby

Flexbox-eigenschappen - Flex container-eigenschappen

Er zijn veel manieren om Flexbox-eigenschappen te groeperen, en de eenvoudigste manier om er meer over te weten te komen, is door ze op te splitsen in Flex-container- en itemeigenschappen. We hebben zojuist enkele van de bovenstaande eigenschappen van de flexibele container behandeld. Laten we de rest eens bekijken:

  • Flex-richting: rij of kolom

De flex-richtingeigenschap kan worden ingedeeld als kolommen verticaal of rijen horizontaal. Met rijrichting worden de flexitems standaard van links naar rechts gestapeld. Rij achteruit verandert deze richting van rechts naar links. De kolomrichting is standaard van boven naar beneden en de functie voor het omkeren van de kolom keert dit om in een richting van onder naar boven.

  • Flex-wrap: nowrap of wrap

De eigenschap flex-wrap bepaalt of de kinderen van de flexcontainer in meerdere of enkele lijnen zijn ingedeeld en in welke richting de nieuwe lijnen worden gestapeld. De nowrap-waarde ziet dat flexitems in één rij worden weergegeven, standaard verkleind om in de breedte van de container te passen. Met de omloopwaarde worden flexitems weergegeven in verschillende rijen in een richting van links naar rechts of van boven naar beneden. U kunt wrap-reverse toevoegen om ook de volgorde te wijzigen. De standaardwaarde is nurap.

  • Flex-flow

Deze eigenschap is eigenlijk een afkorting om de flex-richting en flex-wrap eigenschappen samen te stellen. De standaardwaarde is 'row nowrap'. Voorbeeld:

.flex-container (

flexstroom: ||

)

  • Justify-gehalte

De eigenschap justify-content heeft vier waarden: flex-start om items uit te lijnen aan de linkerkant van de container; flex-einde om items aan de rechterkant uit te lijnen; midden om uit te lijnen met het midden; spatie tussen om items uit te lijnen met een gelijke afstand tussen hen, met de eerste en laatste items uitgelijnd op de randen van de container; en spatie rondom voor het uitlijnen van het flexitem met gelijke afstand om hen heen, inclusief de eerste en laatste items. Flex-start is de standaardwaarde.

  • Align-items

Deze eigenschap heeft vijf waarden: stretch om flexitems op te schalen om de hele breedte of hoogte te vullen van cross start tot cross end van de container; flex-start om items te stapelen bij de cross start; flex-einde om items aan het kruiseinde te stapelen; midden om items uit te lijnen met het midden van de dwarsas; en basislijn om items uit te lijnen zodat hun basislijnen zijn uitgelijnd. Uitrekken is de standaardwaarde.

  • Align-inhoud

Met deze eigenschap worden de lijnen van een flexibele container uitgelijnd wanneer er extra ruimte op de dwarsas is. De waarden zijn: stretch om ruimte te verdelen na elke rij; flex-start om items naar de cross start te stapelen; flex-end om items naar de cross-end te stapelen; midden om items in het midden van de dwarsas te stapelen; space-around om ruimte rond flexitems gelijk te verdelen. De standaardwaarde is stretch.

Flexbox-eigenschappen - Flex-itemeigenschappen

Nu u weet over de eigenschappen van de Flexbox-container, gaan we kijken naar de itemeigenschappen:

  • Bestellen

Deze eigenschap bepaalt de volgorde van het uiterlijk van de kinderen van de flexibele container. Ze worden standaard in de flexcontainer besteld.

.flex-item (

bestellen: ;

)

U kunt flexitems opnieuw ordenen zonder dat u de HTML-code hoeft te herstructureren. De standaardwaarde is nul.

  • Align-zelf

Met deze eigenschap kan de standaarduitlijning van een specifiek flexitem worden opgeheven. U kunt de waarden van align-items voor deze eigenschap gebruiken.

.flex-item (

align-self: auto | flex-start | flex-einde | center | basislijn | rekken;

)

De automatische waarde in align-self wordt berekend door de waarde van de align-items op het bovenliggende element. Als het element geen ouder heeft, wordt in plaats daarvan de stretch gebruikt.

Basis voorbeelden

Dat is alles wat u moet weten voor het gebruik van de CSS Flexbox-rasterlay-out. Nu is het tijd om te oefenen wat je hebt geleerd. Hier zijn enkele voorbeelden die laten zien hoe al deze eigenschappen samenkomen. Laten we beginnen met iets heel eenvoudig:

.parent (

weergave: flex;

hoogte: 300 px;

)

.child (

breedte: 100 px;

hoogte: 100 px;

marge: auto;

)

Dit is een voorbeeld van perfect centreren. De hoogte- en breedtewaarden kunnen naar wens worden gewijzigd. De sleutel hier is om de marge in te stellen op 'auto' zodat de flexibele container automatisch extra ruimte opneemt. Simpel genoeg!

Laten we nu wat meer eigenschappen toevoegen: een lijst met zes items met vaste dimensies die automatisch kunnen worden aangepast. Ze moeten gelijkmatig over de horizontale as worden verdeeld.

.flex-container (

weergave: flex;

justify-content: space-around;

)

Laten we vervolgens proberen een rechts uitgelijnde navigatie voor middelgrote schermen te centreren en deze op kleine apparaten een kolom te maken.

/ * Groot * /

.navigation (

weergave: flex;

flex-flow: rij wrap;

justify-content: flex-end;

)

/ * Medium schermen * /

@media all en (max-width: 800px) (

.navigation (

justify-content: space-around;

)

)

/ * Kleine schermen * /

@media all en (max-breedte: 500 px) (

.navigation (

flex-richting: kolom;

)

)

Tijd om nog een stap verder te gaan! Laten we eens kijken naar een lay-out die het mobielst is, met drie kolommen, met een volledige voettekst en koptekst en onafhankelijk van de bronvolgorde.

.wrapper (

weergave: flex;

flex-flow: rij wrap;

)

/ * We vertellen alle items dat ze 100% breed zijn * /

.header, .main, .nav, .aside, .footer (

flex: 1 100%;

)

/ * We vertrouwen op bronvolgorde voor mobile-first benadering * /

/ * Medium schermen * /

@media all en (min-width: 600px) (

.aside (flex: 1 auto; )

)

/ * Grote schermen * /

@media all en (min-width: 800px) (

.main (flex: 2 0px; )

.aside-1 (bestelling: 1; )

.main (bestelling: 2; )

.aside-2 (bestelling: 3; )

.footer (bestelling: 4; )

)

Conclusie

Dit zijn slechts enkele basisvoorbeelden. Je kunt veel meer spelen met CSS Flexbox-rasterlay-outs en ze zijn absoluut van onschatbare waarde als je een responsieve webpagina wilt maken.

Aanbevolen artikelen

Dus hier zijn enkele artikelen die zullen helpen om meer details te krijgen over de flexbox-eigenschappen, flexbox-code en ook over het css flexbox-raster, dus ga gewoon door de link die hieronder wordt gegeven.

  1. HTML versus XML - Topverschillen
  2. CSS3 versus CSS - Hoe verschillen ze? (Infograph)
  3. HTML versus CSS Belangrijkste verschillen
  4. HTML5 versus Flash

Categorie:

Web ontwikkelingstools