shivkumarprajapat / complete-css-flexbox-tutorial

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

FlexBox

• Display
• Flex Direction
• Flex Wrap
• Flex Flow
• Justify Content
• Align Items
• Align Content
• FlexBox Box Layout

Flex item properties

• Order
• Flex Grow
• Flex Shrink
• Flex Basis
• Flex
• Align Self

Display

display: property-name;

 flex

Flex Direction

flex-direction: property-name;

row
row-reverse
column
column-reverse  

Flex Wrap

flex-wrap: property-name;

nowrap
wrap
wrap-reverse

Flex Flow

flex-flow: property-name;

nowrap
wrap
wrap-reverse

Justify Content

justify-content: property-name;

center
flex-start
flex-end
space-between
space-around
space-evenly

Align Items

align-items: property-name;

center
flex-start
flex-end
baseline
stretch

Align Content

align-content: property-name;

center
flex-start
flex-end
baseline
stretch    

Order

order: property-name;

 order-first
 order-last
 order: 5;
 /* default is 0 */

Flex Grow

flex-grow: property-name;

1
2
3
4
5

Flex Shrink

flex-shrink: property-name;

1
2
3
4
5  

Flex Basis

flex-basic: property-name;

flexBasis="200px"

Flex

flex: property-name;

1
2
3

Align Self

auto
flex-start
flex-end
center
baseline
stretch;

FlexBox Box Layout