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 Below
- if you’re going to create an entire layout in two dimensions — with both rows and columns — then you should use CSS Grid:
The parent element becomes flexible by setting the display property to flex.
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;
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;
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;
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;
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)
This Property specifies the order in which it shows up in a flexbox container.
Order : ; /* default is 0 */
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*/
Reduces the size of a particular item just opposite to Flex-grow property.
flex-shrink: ; /* default is 0 and -ve is not vaild*/
This property defines the default size of an item and rest of space is distributed among other items.
flex-basis: | auto; /* default auto */
This is the shorthand for flex-grow, flex-shrink and flex-basis combined.
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
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.