Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Flex Container

This is a flex container (the blue area) with three flex items:

1
2
3

The flex container becomes flexible by setting the display property to flex:

                    
.flex-container {
 display: flex;
}

Direct child elements(s) of the flexible container automatically becomes flexible items.

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

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

                            
    .flex-container {
    display: flex;
    flex-direction: column;
    }
1
2
3

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

                        
.flex-container {
display: flex;
flex-direction: column-reverse;
}
1
2
3

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

                            
    .flex-container {
    display: flex;
    flex-direction: row;
    }
1
2
3

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

                            
    .flex-container {
    display: flex;
    flex-direction: row-reverse;
    }
1
2
3
The flex-wrap Property

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with flex-wrap property.

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

                            
.flex-container {
display: flex;
flex-wrap: wrap;
}
1
2
3
4
5
6
7
8

The nowrap value specifies that the flex items will not wrap (this is default): 

                            
.flex-container {
display: flex;
flex-wrap: nowrap;
}
1
2
3
4
5
6
7
8

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

                            
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
1
2
3
4
5
6
7
8

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

                            
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
1
2
3
4
5
6
7
8
The justify-content Property

The justify-content defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

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

                            
.flex-container {
display: flex;
justify-content: center;
}
1
2
3

The flex-start value aligns the flex items at the beginning of the container (this is default): 

                            
.flex-container {
display: flex;
justify-content: flex-start;
}
1
2
3

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

                            
.flex-container {
display: flex;
justify-content: flex-end;
}
1
2
3

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

                            
.flex-container {
display: flex;
justify-content: space-around;
}
1
2
3

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

                            
.flex-container {
display: flex;
justify-content: space-between;
}
1
2
3
The align-items Property

The align-items defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

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

                            
.flex-container {
display: flex;
align-items: center;
}
1
2
3

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

                            
.flex-container {
display: flex;
align-items: flex-start;
}
1
2
3

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

                            
.flex-container {
display: flex;
align-items: flex-end;
}
1
2
3

The stretch value stretches the flex items to fill the container (this is default): 

                            
.flex-container {
display: flex;
align-items: stretch;
}
1
2
3

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

                            
.flex-container {
display: flex;
align-items: baseline;
}

1

2

3

4
The align-content Property

The align-content property aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

  • Note: This property only takes effect on multi-line flexible containers, where flex-flow is set to either wrap or wrap-reverse). A single-line flexible container (i.e. where flex-flow is set to its default value, no-wrap) will not reflect align-content.

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

                        
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
1
2
3
4
5
6
7
8

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

                        
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
1
2
3
4
5
6
7
8

The stretch value stretches the flex lines to take up the remaining space (this is default): 

                        
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
1
2
3
4
5
6
7
8

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

                        
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
1
2
3
4
5
6
7
8

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

                        
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
1
2
3
4
5
6
7
8

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

                        
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
1
2
3
4
5
6
7
8

Flex Items (Child Elements)

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

1
2
3

The element above represents four blue flex items inside a grey flex container.

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

                            
<div class="flex-container">
    <div style="order: 3">1</div>
    <div style="order: 2">2</div>
    <div style="order: 4">3</div>
    <div style="order: 1">4</div>
</div>

The order value must be a number, default value is 0.

1
2
3
4

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

                            
<div class="flex-container">
    <div style="flex-grow: 1">1</div>
    <div style="flex-grow: 1">2</div>
    <div style="flex-grow: 8">3</div>
</div>

The value must be a number, default value is 0.

1
2
3

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

                            
<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div style="flex-shrink: 0">3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

The value must be a number, default value is 1.

1
2
3
4
5
6
7
8
9

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

                            
<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div style="flex-basis: 200px">3</div>
    <div>4</div>
</div>

Set the initial length of the third flex item to 200 pixels:

1
2
3
4

The flex property is a shorthand property for the flex-grow, flex-shrink and flex-basis properties. 

                            
<div class="flex-container">
    <div>1</div>
    <div style="flex: 0 0 100px">2</div>
    <div>3</div>
    <div>4</div>
</div>

Make the second flex item not growable (0), not shrinkable (0), and with an initial length of 100 pixels:

1
2
3
4

The align-self property specifies the alignment for the selected item inside the flexible container. 

                            
<div class="flex-container">
    <div>1</div>
    <div style="align-self: flex-start">2</div>
    <div style="align-self: flex-end">3</div>
    <div>4</div>
</div>

Align the second flex item at the top of the container, and the third flex item at the bottom of the container:

1
2
3
4

References