The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
SlideShare : https://www.slideshare.net/HarishKarthick3/flex-box-140120981
src: MDN CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.
Codepen : https://codepen.io/Hahkarthick/pen/wOmWMJ
This defines the alignment along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
Flex-start : Pack items from the start Flex-end : Pack items from the end Center : Pack items around the center Space-between : Distribute the items evenly and space between the items Space-around : Distribute the items Items have a half-size space on either end Space-evenly : Distribute items evenly Items have equal space around them
Codepen : https://codepen.io/Hahkarthick/pen/KYgKRN
It’s one the best property in the flex-box which helps to control the vertical alignment
align-items: flex-start | flex-end | center | baseline | stretch
Flex-start : Items are all aligned to the start of the main axis Flex-end : Items are all aligned to the end of the main axis Center : Items are all aligned to the center of the container. Baseline : Items are aligned such as their baselines align Stretch : Items are stretch to fill the container
Codepen : https://codepen.io/Hahkarthick/pen/WqzaJR
Flex box are basically render by axes x and y The axes are defined by flex-direction it has four properties
Row Row-reverse Column column-reverse