A new Module introduces in CSS is CSS3 flexbox to provide a more efficient way to align and distribute space among the list of items in a container with static and dynamic widths. A flexbox container expands items to fill available free space or shrinks them to prevent overflow.

Difference Between Grid Layout and CSS3 Flexbox Layout

Grid Blocks are used for large-scale layouts and Flexbox is suitable for components and small-scale Layouts.

CSS Grid is made two dimensional and CSS3 flexbox is made for one-dimensional layouts.

Difference between one dimensional and two-dimensional layouts:

  • The items lied in one direction is the one-dimensional layout. Flexbox gives more flexibility, scaling and space-filling capability. See Image Belowhow CSS3 flexbox layout differs from grid layout
  • if you’re going to create an entire layout in two dimensions — with both rows and columns — then you should use CSS Grid:how CSS3 flexbox layout differs from grid layout

Flexbox Properties

Parent Properties

Flex:

The parent element becomes flexible by setting the display property to flex.


display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Flex Direction:

It Defines the directions of items from left to right, right to left, top to bottom and bottom to top.


flex-direction:: row | row-reverse | column | column-reverse;

Flex Wrap:

Since flexbox is a one-dimensional layout. It can also expand items to next row, Wrap reverse here wraps items from bottom to top.


flex-wrap:: nowrap | wrap | wrap-reverse;

Justify Content:

It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.


justify-content:: flex-start | flex-end | center | space-between | space-around | space-evenly;

Align Items:

This defines the default behavior for how flex items are laid out along the cross axis on the current line.


align-items:: flex-start | flex-end | center | baseline | stretch;

Align Content:

This aligns flex container lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.


align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Properties of the children(item)

Order:

This Property specifies the order in which it shows up in a flexbox container.


Order : ; /* default is 0 */

Flex-grow:

Expands the size of the particular item from the rest of the item. If you define 2 as its value it just doubles its size.


flex-grow: ; /* default is 0 and -ve is not vaild*/

Flex-shrink:

Reduces the size of a particular item just opposite to Flex-grow property.


flex-shrink: ; /* default is 0 and -ve is not vaild*/

Flex-basis:

This property defines the default size of an item and rest of space is distributed among other items.


flex-basis: | auto; /* default auto */

Flex:

This is the shorthand for flex-grow, flex-shrink and flex-basis combined.


flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

Align-self :

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.


align-self: auto | flex-start | flex-end | center | baseline | stretch;

Feel free to comment below for any query or inputs.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.