Display : The display enables flex for all children(inner components of html).
By doing this the direct child elements of a flex container automatically becomes flexible (flex) items.
Flex-direction -->Establishes the main axis.
- flex-direction : row ->this is default property of flex,all items will appear in one single row.
- flex-direction : row-reverse -> this acts same as row but in opposite direction.
- flex-direction : column -> all elements appear in single column.
- flex-direction : column-reverse -> as name suggest acts like column but in opposite direction i.e. form bottom to top.
flex-wrap --> wrap items if they can't all be made to fit on one line.
- flex-wrap : nowrap -> as name suggest no wrapping is done.
- flex-wrap : wrap -> content that doesn't fit in single line will be moved to next line.
- flex-wrap : wrap-reverse -> the content fits in reverse order i.e. from last line to second last line.
Justify-content --> Attempts to distribute extra space on the main axis i.e. horizontal axis of webpage.
- justify-content : flex-start -> all the elements will be on left side with no spaces in between.
- justify-content : flex-end -> all the elements will be on the right side with no spaces in between.
- justify-content : centre -> all the elements will be placed at the centre.
- justify-content : space-between -> as the name suggests space left in entire web page/ view port is equally divided between the elements i.e. any two elements will have same space between them.
- justify-content : space-around -> it is same as space-between but space is also present at ends in same amount as in between.
- justify-content : space-evenly -> same is divided and alloted between element and remaining space in present at the two left and right corners.
Align-items --> Determines how items are laid out on the cross axis i.e. vertically
- align-items :flex-start -> all items are horizontally at top.
- align-items :flex-end ->all items are horizontally at bottom.
- align-items :flex-center -> all items are horizontal and placed at center.
- align-items :baseline -> all are placed at same level from a same reference line.
- align-items :stretch -> all items are stretch from top to bottom.
Align-content --> Only has an effect with more than one line of content, can be used with flex-wrap.
It also has same properties as start, end, center, space-between, space-around, stretch.
children
Order --> allows you to explicitly set the order you want each child to appear in.
order: integer
flex-grow --> allows you to determine how each child is allowed to grow as a part of a whole
flex-basis --> defines the size of an element before remaining space is distributed.
e.g. first item 20%,second item 40%.
flex-shrink --> allows an item to shrink if necessary. Only really useful with a set size or flex-basis.
align-self --> sets alignment for individual item.
Top comments (0)