A Guide to CSS Flexbox. All You Need To Know To Start Using FlexPosted by TotalDC
This complete guide explains everything about CSS flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
What is Flexbox
The Flexbox Layout module provides more efficient way to lay out space between items in a container, even when size is unknown or dynamic.
The main idea of the flexbox is to give the container the ability to alter items width and height and their order to fill the available space the best way possible. A flex container expands items to fill available free space or shrinks them to prevent overflow.
Flexbox layout is free from any directional constraints then regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility to support large complex applications when it comes to orientation changing and resizing or stretching and shrinking.
Basics and terminology
Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (also known as flex container or simply as parent element). While the others are meant to be set on the flex items (children elements).
Leave a Reply