Instead of using the traditional float, display inline and other properties, why not use one that does the job! CSS Flex helps you create a better page layout and makes responsive design easier.
This article contains the basic properties of CSS Flex with helpful visuals and codes which will make it even easier to understand.
Advantages of using Flex:
- Flex is supported in major browsers
- Can equally center elements horizontally and vertically
- Reverse the structure of items
- Achieve complex layout and Order Elements easily
Cheatsheet
CSS For Container
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;CSS For Items
order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;Example Code
1. Basic Html+Css
<style type="text/css">
.flex-item {
background: #f1f1f1;
padding: 20px;
font-size: 25px;
margin: 3px;
font-weight: bold;
border: 2px solid #ddd;
border-radius: 3px;
}
</style>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
1
2
3
4
2. Flex Properties to style your html layout
.flex-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
1
2
3
4
Don’t forget to declare the above Flex Container Property to your selectors.
a. flex-direction
.flex-container {
flex-direction: row;
}
1
2
3
4
.flex-container {
flex-direction: row-reverse;
}
1
2
3
4
.flex-container {
flex-direction: column;
}
1
2
3
4
.flex-container {
flex-direction: column-reverse;
}
1
2
3
4
b. justify-content
.flex-container {
justify-content: space-between;
}
1
2
3
4
.flex-container {
justify-content: space-around;
}
1
2
3
4
.flex-container {
justify-content: center;
}
1
2
3
4
.flex-container {
justify-content: flex-start;
}
1
2
3
4
.flex-container {
justify-content: flex-end;
}
1
2
3
4
c. align-items
.flex-container {
height: 200px;
}
1
2
3
4
.flex-container {
align-items: flex-start;
}
1
2
3
4
.flex-container {
align-items: flex-end;
}
1
2
3
4
.flex-container {
align-items: center;
}
1
2
3
4
.flex-container {
align-items: stretch;
}
1
2
3
4
.flex-container {
align-items: baseline;
}
1
2
3
4
d. order
.flex-item:first-child {
order: 2;
}
.flex-item:nth-child(2) {
order: 1;
}
.flex-item:nth-child(3) {
order: 3;
}
.flex-item:last-child {
order: 4;
}
1
2
3
4
e. flex-grow
.flex-item {
flex-grow: 1;
}
1
2
3
4
.flex-item {
flex-grow: 1;
}
.flex-item:nth-child(2) {
flex-grow: 2;
}1
2
3
4
e. flex-wrap and align-content
.flex-container {
display: flex;
}1
2
3
4
5
6
7
8
9
10
11
.flex-container {
flex-wrap: wrap;
height:400px;
}1
2
3
4
5
6
7
8
9
10
11
.flex-container {
flex-wrap: wrap;
align-content: flex-start;
}1
2
3
4
5
6
7
8
9
10
11
.flex-container {
flex-wrap: wrap;
align-content: flex-end;
}1
2
3
4
5
6
7
8
9
10
11
.flex-container {
flex-wrap: wrap;
align-content: baseline;
}1
2
3
4
5
6
7
8
9
10
11
.flex-container {
flex-wrap: wrap;
align-content: center;
}1
2
3
4
5
6
7
8
9
10
11
.flex-container {
flex-wrap: wrap;
align-content: space-around;
}1
2
3
4
5
6
7
8
9
10
11
.flex-container {
flex-wrap: wrap;
align-content: space-between;
}1
2
3
4
5
6
7
8
9
10
11
.flex-container {
flex-wrap: wrap;
align-content: space-evenly;
}1
2
3
4
5
6
7
8
9
10
11
f. align-self
.flex-item:nth-child(2){
align-self: flex-start;
}1
2
3
4
.flex-item:nth-child(2){
align-self: flex-end;
}1
2
3
4
.flex-item:nth-child(2){
align-self: center;
}1
2
3
4
.flex-item:nth-child(2){
align-self: baseline;
}1
2
3
4
.flex-item:nth-child(2){
align-self: stretch;
}1
2
3
4
More Sample Codes
1. Center single element horizontally and vertically
<style type="text/css">
.flex-container {
display: flex;
height: 250px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.flex-item {
background: #ffc107;
padding: 20px;
font-size: 25px;
margin: 3px;
font-weight: bold;
border: 2px solid #ddd;
border-radius: 3px;
text-align:center;
}
</style>
<div class="flex-container">
<div class="flex-item">1</div>
</div>1
2. Center multiple elements horizontally and vertically
<style type="text/css">
.flex-container {
display: flex;
background: #000;
width:500px;
max-width:100%;
height: 250px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.flex-item {
background: #ffc107;
padding: 20px;
font-size: 25px;
margin: 3px;
font-weight: bold;
border: 2px solid #ddd;
border-radius: 3px;
text-align:center;
width:100%;
}
.flex-item:nth-child(2) {
background: #ff9c07;
}
</style>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>1
2
3. Center multiple elements(with different height) horizontally and vertically
<style type="text/css">
.flex-container {
display: flex;
background: #000;
width:500px;
max-width:100%;
height: 250px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.flex-item {
background: #ffc107;
padding: 20px;
font-size: 25px;
margin: 3px;
font-weight: bold;
border: 2px solid #ddd;
border-radius: 3px;
text-align:center;
width:100%;
height: 50px;
}
.flex-item:nth-child(2) {
background: #ff9c07;
height: 100px;
}
.flex-item:nth-child(3) {
background: #ff7600;
height: 70px;
}
</style>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
1
2
3
4. Center multiple elements(with different height) horizontally and vertically + center the contents inside the elements
<style type="text/css">
.flex-container {
display: flex;
background: #000;
width:500px;
max-width:100%;
height: 250px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.flex-item {
background: #ffc107;
padding: 20px;
font-size: 25px;
margin: 3px;
font-weight: bold;
border: 2px solid #ddd;
border-radius: 3px;
text-align:center;
width:100%;
height: 50px;
display: flex;
align-items: center;
}
.flex-item:nth-child(2) {
background: #ff9c07;
height: 100px;
}
.flex-item:nth-child(3) {
background: #ff7600;
height: 70px;
}
</style>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
1
2
3
5. Simple Custom Menu Desktop View
<style>
.flex-container{
display: flex;
background: #000;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
width: 100%;
}
.site-logo{
color: #fff;
font-weight: bold;
}
nav{
display: flex;
}
nav a{
margin: 0 5px;
}
</style>
<div class="navigation flex-container">
<div class="site-logo">Site Logo</div>
<nav>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blog</a>
<a href="#">Contact Us</a>
</nav>
</div>For custom menu structure plus responsive, please check here.
Conclusion
There you have it! I have covered only the basic Flex Properties, all you need to do is to practice more so you’ll get use to using Flex! If you wanna know more about CSS Flex, here is an additional resource from the Original W3C Specs.
