Flexbox is a layout system that arranges items in rows and columns.
Flexbox items are packed into a flex container either by row or by column.
Aligment options specify how items occupy the available container space.
These flexbox items are horizontally centered in the available space.
<style>
.flex-align {
background-color: #776fac;
padding: 5px;
display: flex;
justify-content: center;
}
.flex-align > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
The justify-content property horizontally aligns flex items in a container.
Options include: flex-start
(the default), flex-end
, center
, space-between
, and space-around
.
justify-content: flex-start
Flex items that are packed from the start (the left side).
<style>
.flex-justify-start {
background-color: #776fac;
padding: 5px;
display: flex;
justify-content: flex-start;
}
.flex-justify-start > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-justify-start">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
justify-content: flex-end
Flex items that are packed from the end (the right side).
<style>
.flex-justify-end {
background-color: #776fac;
padding: 5px;
display: flex;
justify-content: flex-end;
}
.flex-justify-end > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-justify-end">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
justify-content: center
Flex items that are packed in the center.
<style>
.flex-justify-center {
background-color: #776fac;
padding: 5px;
display: flex;
justify-content: center;
}
.flex-justify-center > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-justify-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
justify-content: space-between
Flex items that are justified with space between.
<style>
.flex-justify-between {
background-color: #776fac;
padding: 5px;
display: flex;
justify-content: space-between;
}
.flex-justify-between > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-justify-between">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
justify-content: space-around
Flex items that are justified with equal space around.
<style>
.flex-justify-around {
background-color: #776fac;
padding: 5px;
display: flex;
justify-content: space-around;
}
.flex-justify-around > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-justify-around">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
For details on justify-content
, see our CSS justify-content Property Reference.
The align-items property aligns items vertically inside the container.
Options include: stretch
(the default), flex-start
, flex-end
, center
, and baseline
.
align-items: stretch
Items are stretched vertically to fill the container.
<style>
.flex-align-items-stretch {
background-color: #776fac;
padding: 5px;
height: 350px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.flex-align-items-stretch > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-items-stretch">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-items: flex-start
A flexbox that aligns flex items vertically starting at the top.
<style>
.flex-align-items-start {
background-color: #776fac;
padding: 5px;
height: 350px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.flex-align-items-start > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-items-start">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-items: flex-end
A flexbox that aligns flex items vertically starting at the bottom.
<style>
.flex-align-items-end {
background-color: #776fac;
padding: 5px;
height: 350px;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
.flex-align-items-end > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-items-end">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-items: center
A flexbox that aligns flex items vertically around at the center.
<style>
.flex-align-items-center {
background-color: #776fac;
padding: 5px;
height: 350px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-align-items-center > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-items-center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-items: baseline
A flexbox that aligns flex items vertically along their baselines. This alignment attempts to align text content at the same line.
<style>
.flex-align-items-baseline {
background-color: #776fac;
padding: 5px;
height: 350px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.flex-align-items-baseline > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-items-baseline">
<div>1</div>
<div style="font-size:35px;padding-top:30px;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
For details on align-items
, see our CSS align-items Property Reference.
The align-content property align items along flex lines.
Options include: stretch
, flex-start
, flex-end
, center
, and baseline
.
This property requires that the container allows wrapping.
align-content: stretch
A flexbox that stretches items to take up all vertical space.
<style>
.flex-align-content-stretch {
background-color: #776fac;
padding: 5px;
height: 350px;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.flex-align-content-stretch > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-content-stretch">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-content: flex-start
A flexbox that packs items along the top.
<style>
.flex-align-content-start {
background-color: #776fac;
padding: 5px;
height: 500px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.flex-align-content-start > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-content-start">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-content: flex-end
A flexbox that packs items along the bottom.
<style>
.flex-align-content-end {
background-color: #776fac;
padding: 5px;
height: 500px;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.flex-align-content-end > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-content-end">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-content: center
A flexbox that packs items in the middle.
<style>
.flex-align-content-center {
background-color: #776fac;
padding: 5px;
height: 500px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.flex-align-content-center > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-content-center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-content: space-between
A flexbox with space between the rows.
Resize browser and see how rows are spaced.
<style>
.flex-align-content-space-between {
background-color: #776fac;
padding: 5px;
height: 500px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.flex-align-content-space-between > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-content-space-between">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
align-content: space-around
A container with spacing around the rows.
Resize browser and see how rows are spaced.
<style>
.flex-align-content-space-around {
background-color: #776fac;
padding: 5px;
height: 500px;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.flex-align-content-space-around > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-content-space-around">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
For details on align-content
, see our CSS align-content Property Reference.
The align-self
property aligns an item in a flex container.
This property overides the container‘s align-items
value.
Options include: stretch
, flex-start
,
flex-end
, center
, and baseline
.
Item 2 is aligned to the bottom of the first row.
<style>
.flex-align-self {
background-color: #776fac;
padding: 5px;
height: 500px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.flex-align-self > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-align-self">
<div>1</div>
<div style="align-self:flex-end;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
For details on align-self
, see our CSS align-self Property Reference.
Centering elements in the perfect center, horizontally and vertically, can be done in many ways. A flexbox makes this easy.
A perfectly centered flex item inside a flex container. Resizing the browser will keep the item centered.
<style>
.flex-perfect-centering {
background-color: aliceblue;
xwidth: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.flex-perfect-centering > div {
background-color: #776fac;
color: white;
width: 180px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-perfect-centering">
<div>Perfect center</div>
</div>
A list of all flexbox properties for flexbox.
Property | Description |
---|---|
display | Specifies the type of display flow for the element |
flex-wrap | Specifies whether to wrap flex items when they run out of space |
flex-direction | Specifies the direction of the items in a flex container |
flex-flow | Shorthand for flex-direction and flex-wrap |
gap | Space between rows and columns. |
row-gap | Space between rows. |
column-gap | Space between columns. |
justify-content | Horizontally aligns items when they do not use all available space |
align-items | Vertically aligns the flex items when they don't use all available space |
align-content | Specifies that, instead of aligning flex items, it aligns flex lines |
order | Specifies the order of an item relative to the other items. |
align-self | Used on flex items. Overrides the container's align-items setting |
flex-basis | Specifies the initial width (the basis) of an item. |
flex-grow | Specifies how an item stretches (grows) in the flex container |
flex-shrink | Specifies how an item contracts (shrinks) in the flex container |
flex | Shorthand for flex-grow, flex-shrink, and flex-basis |
This table shows when flexbox
support started for each browser.
Chrome
|
29.0 | Aug 2013 |
Firefox
|
28.0 | Mar 2014 |
IE/Edge
|
11.0 | Oct 2013 |
Opera
|
17.0 | Aug 2013 |
Safari
|
9.0 | Sep 2015 |