Flexbox Basics

flexbox-basics.md

Flexbox Basics

Overview

Flex Container:

display:
flex-direction:
flex-wrap:
flex-flow:
justify-content:
align-items:
align-content:

Flex Items:

order:
align-self:
flex-grow:
flex-shrink:
flex-basis:
flex:

Flex Container Properties

Control the direction of flex items within the parent container.

Add the following code at the top of any container css to "activate" flexbox:

display: flex;

Set the direction of the box, options are (row is default):

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

Set the wrap properties of the box (nowrap is default):

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: nowrap-reverse;

Flex-Flow is a short hand which sets both flex-direction and flex-wrap at once:

flex-flow: row nowrap;
flex-flow: column wrap;

Control the direction of flex items along main and cross axes

Main Axis/Left to Right(flex-start is default):

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

Cross Axis/Top to Bottom (stretch is default):

align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

Cross Axis for content with more than one line (stretch is default):

align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;

Flex Item Properties

Overrides position of individual flex items along main or cross axis

To change order of appearance (not actual HTML order):

order: 1;

Value can be any positive of negative integer

To override align-items position on cross axis

align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
align-self: baseline;

Override justify-content positioning on main exis to fill extra space:

margin-left: auto;
margin-right: auto;

Control the amount of space flex items will grow or shrink to fill based on container size

Flex Grow

Specifies the flex grow factor of a flex item. Default is 0.

flex-grow: 0; 
flex-grow: [any integer];
flex-grow: auto;

Flex Shrink

Specifies the flex shrink factor of a flex item. Default is 1.

flex-shrink: 1;
flex-shrink: [any integer];
flex-shrink: auto;

Flex Basis

Specifies the initial size of the flex item, before any available space is distributed according to the flex factors. Default is 0.

flex-basis: 0;
flex-basis: [any integer];
flex-basis: auto;

Shorthand

flex-grow value / flex-shrink value / flex-basis value

flex: 0 1 0;

Useful default values for flex values

flex: initial; 
//equivalent to flex: 0 1 auto;

flex: auto;
//equivalent to flex: 1 1 auto;

flex: none;
//equivalent to flex: 0 0 auto;

flex: integer;
//equivalent to flex: [integer] 1 0;