Flexbox | Display | HTML | CSS

1. Layout model
1. One-dimensional
2. Either columns or rows are affected while grid can control both rows and columns simultaneously.
2. Specialty
1. Space distribution
2. Alignment capability
3. Section block text inline
3. Not required but not always
1. Float properties
2. Position properties
4. Requirements
1. One parent div
2. One or more child div's.
5. How display:flex properties act when use in a element (div)? Means only use display:flex in an element.
1. Block-level element itself (flex container).
6. New browser compatibility for flexbox
1. display: flex;
7. The two axes of flexbox
1. The main axes
1. flex direction 
2. Child Element
1. Flex items
8. Flexbox requires two elements parent and child.
1. Parent Element
1. Flex container
2. Child Element
1. Flex items
9. Parent div's properties | Flex container
1. display: flex (required), the child items all become flex items arranged in a row.
2. flex-direction: row(default) | row-reverse | column | column-reverse | initial | inherit.
3. flex-wrap: nowrap(default) | wrap | wrap-reverse | initial | inherit.
1. nowrap do nothing, try to set items in one line. Child item has width property then wrap property try to set items wrap if possible.
4. flex-flow: Cartesian product of flex-direction and flex-wrap. So you set direction of items flex-wrap.
1. row nowrap | row-reverse nowrap | column nowrap | column-reverse nowrap | row wrap | row-reverse wrap | column wrap | column-reverse wrap | row wrap-reverse | row-reverse wrap-reverse | column wrap-reverse | column-reverse wrap-reverse.
2. forget about initial.
5. order: number | initial | inherit.
1.  Child div(items) displays as per your serial order. Override sequential order user order property.  
6. flex: flex-grow [goes down/side and cover] | flex-shrink flex-basis | auto | initial | inherit.
7. Properties that control alignment
1. align-items: stretch(default) | center | flex-start | flex-end | baseline | initial | inherit.
1. Where child elements itself starts (middle, top, etc.) not child's inside content.
2. align-items:center; means it's vertically center. Mainly works on the cross axis.
3. flex-start + baseline and flex-end starts top or bottom of a page.
4. align-items browser compatibility:
1. -webkit-align-items: center;
2. -moz-align-items: center;
3. -ms-align-items: center;
4. -o-align-items: center;
5. align-items: center;
2. justify-content:  flex-start(default)[top] | flex-end[] | center | space-between | space-around | initial | inherit.
1. Like align-items flex-start and flex-end similar so actual effect depends on flex-wrap.
2. Align the item on the main axis, basically horizontal.
3. align-self: auto(default) [parent property if parent exist otherwise stretch] | stretch | center | flex-start | flex-end | baseline | initial | inherit.
1. Only of single item individually.
4. align-content:  controls space between flex lines on the cross axis.
8. Child properties | Flex items
1. The Cross Axis | Up to Down | Column focus
1. The flex items on the cross axis, align-items and align-self properties controls alignment, while down the columns if flex-direction is row and along the row if flex-direction is column.
2. So, flex-direction [default: row] decides how items are grouped like a row or column. While align-items or align-self decides how they behave on a row or column.
3. align-self properties sets one items, while align-items sets on all flex items as a group. Specially you sets align-self properties. [.abc .xyz {    align-self: center;}]
4. Align content (align-content) Sometime individual items act like content so use align-content. [.abc {  display: flex;  flex-wrap: wrap;  height: 400px;  align-content: space-between;}] 
2.   The Main Axis | Top to Bottom | Row focus
1. align-items the main axis working Top to bottom, so stretch may be merged.
2.  justify-content like align-items but row basis.
9. Why flexbox layout mode?
1. Suppose you use bootstrap frame work, but some section is totally isolated from bootstrap classes, then you prefer flexbox instead position or float for responsiveness.
10. Outdated information
1. display: box or display: flexbox this is outdated information.

⌚ CSS3 Essentials  
Referance: https://developer.mozilla.org/