In the previous article on CSS Flexbox: Basics, we introduced the Flexbox layout, and we got to understand its importance to modern web development and its bring a lot of flexibility and CSS semantic richness.
Let’s draw our focus to the parent container, which usually looks like this:
The parent has a bunch of properties, we will carefully consider each one.
Continue reading “CSS Flexbox: Properties of the Parent Container”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 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.
Continue reading “CSS Flexbox: The Basics”