CSS Course Hindi - Beginner to Pro ( 2023 ) | Chapter 4

Notes

Display

Display properties are used to change behaviour of tags
you can change block tag like <h1> to inline element <span>
example <h1 style=”display:inline;”> </h1> ⇒ Now <h1> will be inline act as </span> tag

display:block;

 
notion image

display:inline;

notion image

display:inline-block;

notion image

display:flex;

notion image

display:inline-flex;

notion image

display:grid;

notion image

display:inline-grid;

notion image

display:table;

notion image

display:list-item;

notion image

Flex

CSS Flexible Box Layout is a module of css that defines a CSS box model optimised for user interface design, and the layout of items in one dimension.
 
Flex Direction
flex-direction is used to change direction either
Column - wise ⇒ Vertical → flex-direction:column;
or
Row-wise ⇒ Horizontal ( default ) → flex-direction:row;
 
notion image
 
Order:
if you want to change orders of children then
you will have to use order property inside child elements → order: 1
if you will apply order : 1 ;in any child element it will come first in parent
element
notion image
 
 
Flex Grow :
After applying flex-grow property to child element
element will take full width
see 2nd element in figure
Flex Shrink acts just opposite to Flex Grow
notion image
 
Flex Wrap :
in this flex property element auto adjust according to container
element are pushed into new row
if you want to change this behaviour then you can use flex-flow: column;
notion image
 
Justify content:
justify-content & algin-items is property which we use very regularly in flex
 
notion image
notion image
notion image
notion image
notion image
images credited - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 

Exercises