Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.

1. INTRODUCTION TO FLEX-BOX
-By Jyoti Gautam

2. What is flexbox?
• A CSS3 layout mode that provides an easy and clean way to arrange
items within a container.
• No floats
• Responsive and mobile friendly
• Positioning child elements is much easier
• Flex container’s margin does not collapse with the margin of its
content.
• Order of elements can be changed easily without changing the main
HTML.

3. Flex container
Flex
item
Cross
size
Main
size
Cross axis
Main axis

4. FLEX PROPERTIES :
• display : flex | inline-flex;
• flex-direction: row | column;
• flex-wrap: wrap | nowrap | wrap-reverse;
• flex-basis:<length>
• justify-content : flex-start | flex-end | center
• align-self : flex-start | flex-end | center
• align-items : flex-start | flex-end| center
• align-content: flex-start | flex-end | center
• flex-grow:<number>,flex-
shrink:<number>,flex:<integer>,order:<integer>

5. flex-direction: row | column;
.parent{
display:flex;
flex-direction:row; //default
}
1 2 3 4 5

6. .parent{
display:flex;
flex-direction:column;
}
2
3
4
5
1

7. Wrapping-items:
.parent{
display:flex;
flex-wrap:wrap;
}
1 2 3 4 5 6 7
8 9

8. Aligning items
justify-content
align-content
align-items
Align items along main
axis
Align rows of items
across cross axis
Align items in a single
row across cross axis

9. .parent{
display:flex;
justify-content : flex-start;
}
.parent{
display:flex;
justify-content : flex-end;
}
.parent{
display:flex;
justify-content : center;
}
1 2 3
1 2 3
1 2 3

10. .parent{
display : flex;
flex-wrap : wrap;
align-content : flex-start;
}
.parent{
display: flex;
flex-wrap :wrap;
align-content : flex-end;
}
.parent{
display : flex;
flex-wrap : wrap;
align-content : center;
}
1 2 3
4 5 6
4 5 6
1 2 3
1 2 3
4 5 6

11. .parent{
display : flex;
align-items : flex-start;
}
.parent{
display: flex;
align-items : flex-end;
}
.parent{
display : flex;
align-items : center ;
}

12. .parent{
display : flex;
align-items : stretch; //default
}
.box{
align-self : flex-end; //overrides individual child
}

13. Ordering items
.child{
order : 0;
}//default
1 2 3
.box1{ order : 1 }
.box3{ order : -1 }
3 2 1
Order -1 0 1

14. Flexing-items
.child{
flex : 1 1 220px;
}
Flex is applied to child
elements
Flex-grow Flex-shrink
Flex-basis