flexboxAan de slag met flexbox


Opmerkingen

Deze sectie geeft een overzicht van wat flexbox is en waarom een ontwikkelaar het zou willen gebruiken.

Het moet ook grote onderwerpen binnen flexbox vermelden en een link naar de gerelateerde onderwerpen bevatten. Aangezien de documentatie voor flexbox nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Flexbox-containers en -artikelen

Flexbox of flexibele box is een lay-outmethode voor het op een voorspelbare manier rangschikken van inhoud op een pagina. Flexbox biedt een verbetering ten opzichte van traditionele blokmodelpositionering met drijvers of zelfs tabelachtige positionering voor inhoud op de pagina.

In de kern kan Flexbox worden onderverdeeld in een ouderelement (flexcontainer) en een kindelement (flexitem).

Flex Container

Een flexibele container kan worden gemaakt door de weergave-eigenschap in te stellen op flex:

.container {
  display: flex;
}
 

Flexitem

Elk onderliggend element van een flexcontainer wordt een flexitem. Deze flexitems kunnen vervolgens aanvullende eigenschappen ontvangen om aan te passen hoe deze op de pagina worden geplaatst.

.item {
  flex: 1;
}
 

Deze flex: 1 eigenschap is een afkorting voor flex-grow: 1 waardoor hij ten opzichte van zijn broers en zussen in de container kan groeien.

Dit is de HTML-opmaak:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
 

Flexbox Introductie

De Flexbox (Flexible Box) -indeling, geïntroduceerd in CSS3, biedt een efficiëntere manier om ruimte tussen kinderen-elementen ( flex items ) binnen een container-element ( flex container ) in te delen, uit te lijnen en te verdelen. Het belangrijkste is zelfs wanneer hun afmetingen onbekend of dynamisch zijn en vandaar de term "flex" of "flexibel".

Laten we beginnen met de basis en kijken hoe een container kan worden geïnitialiseerd als flex.

Overweeg de volgende markup:

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>
 

Een flexbox wordt geïnitialiseerd door eenvoudigweg display: flex . Gedaan!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}
 

Nu de flexcontainer klaar is, laten we spelen met zijn flexitems, waardoor ze elk een breedte van 25% hebben en de flexitems in het midden horizontaal uitlijnen in hun bovenliggende container.

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}
 

Let op, ik heb de 3 kinderen met opzet elk een breedte van 25% gegeven om te laten zien hoe gemakkelijk het is om de kinderen binnen een flexbox te verplaatsen.

Als we nu de bovenstaande code uitvoeren, moeten we de 3 kinderen horizontaal naast elkaar in de container zien. Dit komt omdat een flexbox standaard de eigenschap flex-direction: row . Dit betekent standaard dat de flexitems horizontaal naast elkaar worden uitgelijnd. Er moet ook een opening aan de rechterkant zijn, omdat de totale breedte van de kinderen niet tot 100% is opgeteld.

Probeer nu de eigenschap justify-content: center te voegen aan de flex-container .

.flex-container {
  ...
  justify-content: center;
}
 

Het resultaat zou zijn dat de kinderen horizontaal in het midden worden uitgelijnd. Dezelfde eigenschap heeft andere waarden zoals flex-end (rechts uitlijnen), space-around (gelijke ruimte rond de items), space-between (gelijke ruimte tussen de items).

Belangrijk: andere eigenschappen van blokelementen zoals text-align: center etc. hebben geen effect op een flex-element.

Installatie of instellingen

Flexbox is een CSS3-module, gestandaardiseerd door het World Wide Web Consortium . Het is een lay-outmodus voor het rangschikken van elementen, zodat de elementen zich voorspelbaar gedragen wanneer de pagina-indeling verschillende weergaveformaten moet bevatten.

Omdat het onderdeel is van CSS3, hoeft u niets te installeren. Het kan worden gebruikt zolang de browser het ondersteunt, en de meeste moderne browsers doen dat. Om te controleren of uw browser dit ondersteunt of niet, is hier het compatibiliteitsoverzicht .

Om flexbox in uw CSS in te stellen en te gebruiken, voegt display: flex eenvoudig display: flex aan een selector.