While scrolling through my blog posts from the past few months, I realized that I never talked about Flexbox! Here is a brief intro on it, enjoy!
The CSS Flexbox is a CSS module that gives amazing flexibility when creating layouts. CSS Flexbox is an elegant and lightweight approach to layouts in our CSS! Some pros of using Flexbox are:
- No floats
- Responsive and Mobile friendly
- Simple to position child elements
- Flex Container’s margins do not collapse with the margins of its contents
- Order of elements can be easily changed without editing the source HTML
Flexbox was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface with powerful alignment capabilities. Flexbox deals with layout in one dimension at a time whether it be a column or a row.
Flexbox utilizes a parent-child relationship so when you declare a flex container, the direct children of this container will automatically turn into flex items. Flexbox is designed as an axis grid.Each one of the flexbox properties works either on the container or defining how items are displayed inside the container. Flex items can be laid out in all directions across one of the two axes. Flexbox allows us to change the order of the flex items without the need of altering the source order of our code. Flex items are responsive, meaning they shrink and grow to the fill the page no matter the size!
As mentioned above, the flexbox container has two axes: the main axis and the cross axis. The main axis is determined by the value of the flex-direction property. The cross axis on the other side will be always perpendicular to the main axis.
Thanks for stopping by!
Top comments (0)