One-dimensional content means that the content has an x-axis and a y-axis. It is designed to provide a layout for this type of content. It does not provide solutions for the z-axis that I know of.
The main axis is set by flex-direction
. It can either be along the row
or the column
.
The cross-axis would be the opposite of the main axis flex-direction
.
If main axis’ flex-direction
’s property was set to row
, then cross axis’ flex-direction
will be set to column
.
Some properties of flex-direction
such as row-reverse
or column-reverse
only reorders content visually not logically for screen readers, making users with accessibility issues have to navigate backwards.
Compared to flexbox
, float
is limiting when it comes to layout designing, centering blocks of content inside of a parent container, getting equal width and heights on children content and making all columns in a multiple-column layout adopt the same height.
Some of my long term goals are to be in a full stack dev role. I want to create beautiful, accessible and easy to follow web applications and UI, so learning about flexbox
and using that in my future code over floats and positioning, will help me achieve that.
References