Hoofdas en kruisas in flexblokken in CSS

Over flexboxes kan in twee termen worden gesproken: ten eerste - rij of kolom, ten tweede - in termen van assen. We hebben rijen en kolommen al behandeld, laten we nu de assen behandelen. Het begrijpen van assen is nodig om elementen horizontaal of verticaal uit te lijnen.

Bij het werken met flex-elementen is er altijd een hoofdas en een kruisas. We kunnen elementen uitlijnen langs de hoofd as en loodrecht op de hoofdas. De hoofdas kan 4 richtingen hebben: van links naar rechts, van rechts naar links, van boven naar beneden en van onder naar boven.

De richting van de kruis as hangt af van de richting van de hoofdas: als de hoofdas horizontaal is, dan is de kruisas van boven naar beneden gericht, als de hoofdas verticaal is, dan is de kruisas van links naar rechts gericht. Andere richtingen kan de kruisas niet hebben.

De richting van de hoofdas wordt geregeld door de eigenschap flex-direction. Als deze eigenschap de waarde row heeft - is de hoofdas gericht van links naar rechts, als de waarde row-reverse is, dan van rechts naar links. De waarde column richt de as van boven naar beneden, en de waarde column-reverse - van onder naar boven.