CSS Flexbox Grid Layout

What is Flexbox?

Flexbox is modern grid layout which provides a more efficient way to lay out, align and alocate space among items in container.It’s supported from all of modern browsers and it is using more and more on regular basis for better responsive websites. It’s like float layout on steroids.

Container (flex container) properties

#display
To define a flex-container we need to add:

display: flex or inline-flex

container {
  display: flex;
}

#flex-direction
To select direction in which items will layer we use:

flex-direction

• row (default)
• row-reverse
• column
• column-reverse

.container {
   flex-direction: row;
}

#flex-wrap
To wrap items we use:

flex-wrap

• nowrap(default) all items will be on one line
• wrap wrap items from top to bottom
• wrap-reverse wrap items from bottom to top

.container {
   flex-wrap: wrap;
}

#justify-content
To choose alignment along the main axis of individual items:

justify-content

• flex-start(default) items are in the start line(left)
• flex-enditems are in the end line (right)
• centeritems are in the center
• space-betweenitems are evenly in the line
• space-arounditems are evenly in the line with space around them
• space-evenlyitems are evenly in the line so that the spacing between two items is equal

.container {
   justify-content: flex-start;
}

#align-items
To choose alignment along the cross axis of individual items(like justify-content but for cross-axis):

justify-content

• flex-start items are in the start of the cross-axis
• flex-enditems are in the end of the cross-axis
• centeritems are in the center of the cross-axis
• baselineitems are aligned as their baselines align
• stretch(default)stretch to fill the container

.container {
   align-items: flex-start;
}

Items (flex items) properties

#order
To change order of appearing of the items use:

order: default is 0

.item {
   order: 99;
}

#flex-grow
To set what amount of available space to take item in the container use:

flex-grow: default is 0

.item {
   flex-grow: 3;
}

#flex-shrink
Ability of the item to shrinks:

flex-shrink: default is 1

.item {
   flex-shrink: 1;
}

That is the main properties of the flex grid layout, there is few more. If you want more info about Flexbox layout model you can read about it here