8. CSS Flexbox
8. CSS Flexbox
The Flexible Box Layout Module, makes it easier to design flexible responsive
layout structure without using float or positioning.
Flexbox Elements
To start using the Flexbox model, you need to first define a flex container.
The element above represents a flex container (the blue area) with three flex
items.
Example
A flex container with three flex items:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS Flex Container
The flex container becomes flexible by setting the display property to flex:
Example
.flex-container {
display: flex;
}
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
.flex-container {
display: flex;
flex-direction: column;
}
Example
The column-reverse value stacks the flex items vertically (but from bottom to
top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Example
The row value stacks the flex items horizontally (from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
Example
The row-reverse value stacks the flex items horizontally (but from right to left):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
The examples below have 12 flex items, to better demonstrate the flex-
wrap property.
Example
The wrap value specifies that the flex items will wrap if necessary:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Example
The nowrap value specifies that the flex items will not wrap (this is default):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Example
The wrap-reverse value specifies that the flexible items will wrap if necessary, in
reverse order:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Example
.flex-container {
display: flex;
flex-flow: row wrap;
}
Example
The center value aligns the flex items at the center of the container:
.flex-container {
display: flex;
justify-content: center;
}
Example
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;
}
Example
The flex-end value aligns the flex items at the end of the container:
.flex-container {
display: flex;
justify-content: flex-end;
}
Example
The space-around value displays the flex items with space before, between, and
after the lines:
.flex-container {
display: flex;
justify-content: space-around;
}
Example
The space-between value displays the flex items with space between the lines:
.flex-container {
display: flex;
justify-content: space-between;
}
The align-items Property
The align-items property is used to align the flex items.
Example
The center value aligns the flex items in the middle of the container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Example
The flex-start value aligns the flex items at the top of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Example
The flex-end value aligns the flex items at the bottom of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Example
The stretch value stretches the flex items to fill the container (this is default):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Example
The baseline value aligns the flex items such as their baselines aligns:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Note: the example uses different font-size to demonstrate that the items gets
aligned by the text baseline:
Example
The space-between value displays the flex lines with equal space between them:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Example
The space-around value displays the flex lines with space before, between, and
after them:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Example
The stretch value stretches the flex lines to take up the remaining space (this is
default):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Example
The center value displays the flex lines in the middle of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Example
The flex-start value displays the flex lines at the start of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Example
The flex-end value displays the flex lines at the end of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Perfect Centering
In the following example we will solve a very common style problem: perfect
centering.
SOLUTION: Set both the justify-content and align-items properties to center,
and the flex item will be perfectly centered:
Example
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
The element above represents four blue flex items inside a grey flex container.
Example
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
order
flex-grow
flex-shrink
flex-basis
flex
align-self
The first flex item in the code does not have to appear as the first item in the
layout.
Example
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>
<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>
Example
Do not let the third flex item shrink as much as the other 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>8</div>
<div>9</div>
<div>10</div>
</div>
Example
Set the initial length of the third flex item to 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Example
Make the third flex item not growable (0), not shrinkable (0), and with an initial
length of 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
Example
Align the third flex item in the middle of the container:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Example
Align the second flex item at the top of the container, and the third flex item at
the bottom of the 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>