CSS Flexbox or “Flexible Box” Layout was built to provide an easy, flexible way to organize website elements with respect to each other and free up space around them. Let’s get familiar with some of the basic Flexbox properties commonly used to gain a decent understanding of the Flexbox layout.
The Flexbox layout makes it easy to layout, align and distribute space among items in a container regardless of them having a fixed width or height.
The strategy behind the flex layout is to enable DOM element containers to set their height and width to fill the available space optimally to fit all screen types and sizes. Basically, the flex containers will shrink and expand intelligently to fill up any free space or prevent over flow.
Flexbox can be used to build tricky layouts, it can handle orientation flipping, resizing, expanding, compressing, etc. Components-based applications like Ember, React, Angular or Vue are well-suited for flex layouts.
Flexbox LAYOUT SYSTEM
Flexbox has a lot of properties to apply on the parent container (flex container), as well as the children (flex items), hence making it a whole module in CSS and not just a property.
Flex layout is better described as having flex-flow directions, instead of the standard block and inline flow directions that we as developers are all used to. Below is a diagram that describes this:
From the diagram above, we can see that flex items are placed either on the main or cross axis. Here’s a brief explanation of each aspect:
- main-axis – This is the primary axis on which flex items are laid out. It is not always horizontal, depending on what the flex-direction property is set to, it could also be vertical.
- main-start | main-end – Flex items are placed starting from main-start to main-end inside the container.
- main size – This is a flex item’s width or height, depending on the main dimension (horizontal or vertical as we earlier mentioned).
- cross axis – This is the secondary axis perpendicular to the main axis, it also depends on the main axis direction to be determined, (it could also be vertical or horizontal).
- cross-start | cross-end – Flex items are placed into flex lines (think of these as imaginary lines running along the cross axis) starting from the cross-start side to the cross-end side of the container.
- cross size – Based on the defined cross dimension, the item’s width or height represents its cross size.
Ok let’s stop and think about all we have learnt so far, this will serve as the building block towards gaining a better of the flex layout, I will urge you to go back and read the flex layout system one more time to fully understand it.
Watch out for the next article: CSS Flexbox: Properties