Flex and Grid in CSS3

What is Flex Box?

CSS3 layout provides us easy and clean way to arrange items within a container. CSS3 provides us with flex-box to overcome the block model used in CSS.

1. No math is required in arranging items. No Floats
2. Responsive and mobile friendly. You can use media query to make things work better.
3. Positioning child element is much easier.
4. Flex container’s margins do not collapse with the margins of its contents.
5. Order of the elements can easily be changed without editing the source HTML.

FLEX BOX MODEL CONCEPT

1. The ability to alter item width and height to best fit in its containers available free space.
2. Flex-box is direction-agnostic.
3. Built for small-scale layouts while the “Grid” specification is for more large scale.

Flex-box model.

In CSS as we assign display property as flex. The red box in the diagram is the flex-container which is created. The items in the containers are flex items. The x-axis is called main axis which starts form main start to main end and the y-axis is called cross axis which start from cross start to cross end.

FLEX PROPERTIES

1. display: flex | inline-flex;
2. flex-direction: row | column;
3. flex-wrap: wrap | nowrap | wrapreverse;
4. flex-basis: <length>;
5. justify-content: flex-start | flex-end | center | space-around | space-between;
6. align-self: flex-start | flex-end | center;
7. align-items: flex-start | flex-end | center;
8. align-content: flex-start |flex-end | center;
9. flex-grow: <number>;
10. flex-shrink: <number>;
11. flex: <integer>;
12. order: <integer>;

We can move flex-items where we want using order property. We can align items . We can give direction to our flex i.e row or column.

What is Grid?

Flex vs Grid.

In flex-box model we can work with rows and column individually but in grid we can work rows and columns in together. CSS grid is the most powerful tool available. Flex-box is one dimensional while grid is two dimensional.

Use Flexbox for UI elements, but use grid for major layouts.

Grid Properties

1. grid-template-rows
2. grid-template-columns
3. grid-template-areas
4. grid-auto-rows
5. grid-auto-columns
6. grid-auto-flow