hahkarthick / flexbox

FlexBox Live Playbook

Flexbox

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

Flex Container

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

Flex Justify-content

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

Flex Align-Items

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 Flex-Direction

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

Codepen : https://codepen.io/Hahkarthick/pen/xoQjra