CSS Flexbox

With 10 items:

1
2
3
4
5
6
7
8
9
10

With 2 items:

1
2

CSS Flex Container (Parent Element)

The flex-direction property

The column value stacks the flex items vertically (from top to bottom):

1
2
3

The column-reverse value stacks the flex items vertically (but from bottom to top):

1
2
3

The row value stacks the flex items horizontally (from left to right):

1
2
3

The row-reverse value stacks the flex items horizontally (but from right to left):

1
2
3

The flex-wrap Property

The wrap value specifies that the flex items will wrap if necessary:

1
2
3
4
5
6
7
8
9
10
11
12

The nowrap value specifies that the flex items will not wrap:

1
2
3
4
5
6
7
8
9
10
11
12

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

1
2
3
4
5
6
7
8
9
10
11
12

The justify-content Property

The center value aligns the flex items at the center of the container:

1
2
3

The flex-start value aligns the flex items at the beginning of the container:

1
2
3

The flex-end value aligns the flex items at the end of the container:

1
2
3

The space-around value displays the flex items with space before, between, and after the lines:

1
2
3

The space-between value displays the flex items with space between the lines:

1
2
3

The align-items Property

The center value aligns the flex items in the middle of the container:

1
2
3

The flex-start value aligns the flex items at the top of the container:

1
2
3

The flex-end value aligns the flex items at the bottom of the container:

1
2
3

The stretch value stretches the flex items to fill the container:

1
2
3

The baseline value aligns the flex items such as their baselines aligns:

1

2

3

4

The align-content Property

The space-between value displays the flex lines with equal space between them:

1
2
3
4
5
6
7
8
9
10
11
12

The space-around value displays the flex lines with space before, between, and after them:

1
2
3
4
5
6
7
8
9
10
11
12

The stretch value stretches the flex lines to take up the remaining space:

1
2
3
4
5
6
7
8
9
10
11
12

The center value displays display the flex lines in the middle of the container:

1
2
3
4
5
6
7
8
9
10
11
12

The flex-start value displays the flex lines at the start of the container:

1
2
3
4
5
6
7
8
9
10
11
12

The flex-end value displays the flex lines at the end of the container:

1
2
3
4
5
6
7
8
9
10
11
12

CSS Flex Items (Child Elements)

The order Property

The direct child elements of a flex container automatically becomes flexible (flex) items.

1
2
3
4

The order property can change the order of the flex items:

1
2
3
4

The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

1
2
3

The flex-shrink Property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

1
2
3
4
5
6
7
8
9
10

The flex-basis Property

The flex-basis property specifies the initial length of a flex item.

1
2
3
4

The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container's align-items property.

1
2
3
4

1
2
3
4

CSS Flex Responsive

Responsive Flexbox

The "flex-direction: row;" stacks the flex items horizontally (from left to right).
The "flex-direction: column;" stacks the flex items vertically (from top to bottom).
Resize the browser window to see that the direction changes when the screen size is 800px wide or smaller.

1
2

Responsive Website using Flexbox

Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:

Resize the browser window to see the responsive effect.

My Website

With a flexible layout.

Link Link Link Link

About Me

Photo of me:
Image

Some text about me in culpa qui officia deserunt mollit anim..

More Text

Lorem ipsum dolor sit ame.

Image

Image

Image

TITLE HEADING

Title description
Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


TITLE HEADING

Title description
Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Footer