×

Html & Html5

The World's best Software Development Study Portal

CSS Flexbox



It is an another layout modes and it is used to design flexible layout structure without using float or position property. And the most impressive thing of flexbox is that it is a responsive layout structure.
Here in flexbox we are having a flex container which contains the elements and this container is having some following property :-



  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content


Flex direction property


This property specifies in which direction should the flex elements be . We are having 4 values in this direction property
  • row :- the flex elements here will be in horizontal manner(left to right).
  • row-reverse :- the flex elements here will be in reverse horizontal manner (right to left).
  • column :- the flex elements here will be in vertical manner (top to bottom).
  • column-reverse :- the flex elements here will be in reverse-vertical manner (bottom to top).


Let's understand this by the following program :-





Output of the Program



flex-container and elements


1
2
3

So this is our flex elements starting from row direction , we can add other value also here which we have discussed above.



Flex wrap property


This property specifies whether elements should wrap or not. If list items are more and any user is watching those items in small screen than generally he can't able to see all items , so to make him view the whole elements we are using this flex-wrap property by which items use to come in next line known as flex line.


Let's understand this by the following program :-





Output of the Program



flex-container and elements


1
2
3
4
5
6
7
8
9
10

So now if we resize our browser these elements we can see coming in next line.



Flex flow property


This property specifies whether elements should wrap or not and also in which direction should be the elements. It is the shorthand property of flex-direction and flex-wrap.


Let's understand this by the following program :-





Output of the Program



flex-container and elements


1
2
3
4
5
6
7
8
9
10

So now through flex-flow property we can specify both flex-direction and flex-wrap.



Align items property


This property specifies the alignment of items vertically.We can align the flex items vertically by align-items property.


Let's understand this by the following program :-





Output of the Program



flex-container and elements


1
2
3

So now through align-items property we can align elements vertically and here we align the items at the center.



Align content property


This property specifies the alignment of flex lines .We can align the flex lines by align-content property.


Let's understand this by the following program :-





Output of the Program



flex-container and elements


1
2
3

So now through align-content property we have align the elements .








CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute