Flex-richting - CSS-trucs

Anonim

De flex-directioneigenschap is een subeigenschap van de module Flexible Box Layout.

Het bepaalt de hoofdas en bepaalt zo de richting waarin flexartikelen in de flexcontainer worden geplaatst.

Herinnering: de hoofdas van een flexcontainer is de primaire as waarlangs flexitems worden opgesteld. Pas op, het is niet noodzakelijk horizontaal; het hangt af van het flex-directiononroerend goed.

De flex-directioneigenschap accepteert 4 verschillende waarden:

  • row​
  • row-reverse: tegengesteld aan tekstrichting
  • column: hetzelfde als rowmaar van boven naar beneden
  • column-reverse: hetzelfde als van row-reverseboven naar beneden

Merk op dat rowen row-reverseworden beïnvloed door de richting van de flexcontainer. Als de tekstrichting is ltr, rowvertegenwoordigt de horizontale as georiënteerd van links naar rechts en row-reversevan rechts naar links; als de richting is rtl, is het tegenovergestelde.

Syntaxis

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

Demo

In de volgende demo:

  • Rode lijst is ingesteld op row
  • Gele lijst is ingesteld op row-reverse
  • Blauwe lijst is ingesteld op column
  • Groene lijst is ingesteld op column-reverse

Opmerking: de tekstrichting is niet gewijzigd.

Kijk eens naar deze pen!

Dus eigenlijk zult u rowin de meeste gevallen of columnonder bepaalde omstandigheden gebruiken. Anders is het vrij ongebruikelijk om van richting te veranderen.

Browser-ondersteuning

  • (modern) betekent de recente syntaxis van de specificatie (bijv. display: flex;)
  • (hybride) 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 Android iOS
21+ (modern)
20- (oud)		 3.1+ (oud) 2-21 (oud)
22+ (nieuw)		 12.1+ (modern) 10+ (hybride) 2.1+ (oud) 3.2+ (oud)

Blackberry browser 10+ ondersteunt de nieuwe syntaxis.

Raadpleeg dit artikel (CSS-Tricks) of dit artikel (DevOpera) voor meer informatie over het mixen van syntaxis om de beste browserondersteuning te krijgen.