Hey there! In this article going to learn how to create your layout very fast using Flexbox. Already added little bit style.
index.html
<html>
<head>
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav class="container">
<div>Home</div>
<div>Search</div>
<div>Logout</div>
</nav>
</body>
</html>
basic.css
.container > div {
padding: 10px;
text-align: center;
font-size: 2em;
color: #ffeead;
}
html, body {
background-color: #ffeead;
margin: 10px;
}
.container > div:nth-child(1) {
background-color: #96ceb4;
}
.container > div:nth-child(2) {
background-color: #ff6f69;
}
.container > div:nth-child(3) {
background-color: #88d8b0;
}
index.css
.container {
border: 5px solid #ffcc5c;
}
So turn into Flexbox layout.
.container {
border: 5px solid #ffcc5c;
display: flex;
}
So automatically line of the element horizontally supposed to vertically. Flexbox default going for left to right. Flexbox default block level element. That was a very quick introduction.
1. Main axis and cross axis flexbox
This is the core concept of flexbox. A flexbox always has a direction. By default this direction horizontal. Is there main axis goes to left to right. We have cross axis from top to bottom
Now want to flip the direction of the flexbox. Let's do that.
index.css
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: row;
}
flex-direction: row;
nothing to happen. If we change to column
.
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: column;
}
Now we can see.
Now main axis goes top to bottom.
2. Justify Content - flexbox
flex-start, flex-end, center space-around, space-between, space-evenly
index.css
.container {
border: 5px solid #ffcc5c;
display: flex;
/* flex-direction: column; */
justify-content: flex-start;
}
Now change to justify-content: flex-end;
.container {
border: 5px solid #ffcc5c;
display: flex;
/* flex-direction: column; */
justify-content: flex-end;
}
Now change to justify-content: center;
Now change to justify-content: space-around;
equal amount of space left hand side and right hand side.
Now change to justify-content: space-between;
Now change to justify-content: space-evenly;
3. Positioning items - Flexbox
Going to explain position of single item. Now Logout menu item want to right side. That forces item target itself. Given single class for menu item home, search and logout.
index.css
.container {
border: 5px solid #ffcc5c;
display: flex;
}
.logout {
margin-left: auto;
}
Now let's see.
So this is normally single item change the axis.
If we want to search
right side
.search{
margin-left: auto;
}
Now let's see
And ask the search before logout in the markup it will push the logout to the right hand side.
.container {
border: 5px solid #ffcc5c;
display: flex;
justify-content: flex-end;
}
justify-content: flex-end;
pushing whole items right hand side.
Bit more update.
.container {
border: 5px solid #ffcc5c;
display: flex;
justify-content: flex-end;
}
.home {
margin-right: auto;
}
And bumm! That pushes the home item from this page here.
4. The Flex Property
The flex property sets the flexible length on flexible items.
flex-grow, flex-shrink, flex-basis
.container {
border: 5px solid #ffcc5c;
display: flex;
}
Simply target the item. container
direct children .container > div { }
.
.container {
border: 5px solid #ffcc5c;
display: flex;
}
.container > div {
flex: 1;
}
Now showing equal amount of space.
.container > div {
/*flex: 1;*/
width: 33.3333%;
/*flex-grow, flex-shrink, flex-basis */
}
The flex-basis property specifies the initial length of a flexible item.
Now change this number whenever you want to add new item in the container.
Now Search item twice rest of the item. Bit more change
.container > .search {
flex: 2;
}
Now let's see.
.container > .home {
flex: 2;
}
Also home and logout change the flex property and shrinking smoothly and fixed search width.
.home {
flex: 1;
}
.logout {
flex: 1;
}
Let's see.
5. Align Items - Flexbox
Align items property sync with parent
How to control the items along the main axis using just like justify-content
and flex
.container {
border: 5px solid #ffcc5c;
display: flex;
height: 100%;
}
Because of only work body{height: 100%}
body {
background-color: #ffeead;
margin: 10px;
height: 100%;
}
So this nice technique for container responsive.
By default align-items: stretch
. So align-items
is the property control the cross axis. If we change align-items: flex-start
index.css
.container {
border: 5px solid #ffcc5c;
display: flex;
height: 100%;
align-items: flex-start;
}
Output
As we can see pushed on the top the cross axis
.container {
border: 5px solid #ffcc5c;
display: flex;
height: 100%;
align-items: flex-end;
}
Output
As we can see pushed on the bottom the cross axis
.container {
border: 5px solid #ffcc5c;
display: flex;
height: 100%;
align-items: center;
}
Output
.container {
border: 5px solid #ffcc5c;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
Output
Now we can see button centered. No matter how changed the container. So that's nice little trick.
Now how to align single item at a time. Let's example Logout item align.
.container {
border: 5px solid #ffcc5c;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.logout {
align-self: flex-start;
}
Output
That's the item top of the axis.
Now make this home item appear bottom here.
.home {
align-self: flex-end;
}
Flex direction column
Learn about flex direction column
. Default layout flex direction row . Going for left to right.
.container {
border: 5px solid #ffcc5c;
display: flex;
}
Bit more change.
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: column;
}
Now items are going for top to bottom.
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
There we can see container is the enter window. justify-content
push the all content down of the bottom of the main axis.
Noted need
body{height: 100%}
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
}
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
We can also do center.
Now look at align-items
. Which control the layout in the cross axis.
Bit more change.
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
align-items: flex-end;
}
That push the end of the cross axis for align-items: flex-end;
By default align-items: stretch;
.
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
align-items: center;
}
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
align-items: flex-end;
}
Output
Wrapping flexbox
Going to learn wrap item in Flexbox.
.container {
border: 5px solid #ffcc5c;
display: flex;
}
.container > div {
width: 300px;
}
Flex wrap default value flex-wrap: nowrap;
But bit more change like flex-wrap: wrap;
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-wrap: wrap;
}
.container > div {
width: 300px;
}
Flexbox - flex-grow-shrink-basis
Going to learn flexbox property details.
.container {
border: 5px solid #ffcc5c;
display: flex;
}
.home {
flex: 1;
}
.logout {
flex: 1;
}
flex is a shorthand property.
flex: 1 1 0;
First 1 is the grow value 2nd is the shrink value and third is the basis value
.home {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
Same here.
.home {
flex: 1 1 0;
}
Now two are 200px element.
.home {
/*
flex-grow: 1;
flex-shrink: 1;
*/
flex-basis: 200px;
}
.logout {
/*
flex-grow: 1;
flex-shrink: 1;
*/
flex-basis: 200px;
}
Output
.home {
flex-grow: 1;
flex-basis: 200px;
}
.logout {
flex-grow: 1;
flex-basis: 200px;
}
Now you can see they actually grow of the container basis.
.home {
flex-grow: 0;
flex-basis: 200px;
}
.logout {
flex-grow: 0;
flex-basis: 200px;
}
If flex-grow: 1;
then grow normally.
.logout {
flex-grow: 1;
flex-basis: 200px;
}
Home nothing change because of flex-grow: 0;
.logout {
flex-grow: 5;
flex-basis: 200px;
}
Clearly growing faster than home item. Actually growing five time faster.
Shrink
.home {
/*
flex-shrink: 1;
*/
flex-grow: 0;
flex-shrink: 0;
flex-basis: 200px;
}
.logout {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 200px;
}
Only shrinking logout because of flex-shrink: 1;
. But home not shrink because of flex-shrink: 0;
Home item shrink much quicker than logout item. Actually 5 time faster.
.home {
flex: 1 1 200px;
}
This is the exact same thing.
.home {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}
.container {
border: 5px solid #ffcc5c;
display: flex;
}
.home {
flex: 1 1 200px;
}
.logout {
flex: 10 1 200px;
}
Logout grow 10 time faster then home item.
Order - flexbox
Going to learn order property in flexbox. We can order any item. Now let's see how it work.
index.html
<div class="container">
<div class="item1">1 Home</div>
<div class="item2">2 Search</div>
<div class="item3">3 Logout</div>
</div>
index.css
.item2 {
order: 1;
}
And what happen here. Search jump over the logout.
Noted: By default
order: 0
.
.item2 {
order: -1;
}
.item1 {
order: 2;
}
.item2 {
order: 0;
}
.item3 {
order: 0;
}
Work on the main axis rest of the item.
.item1 {
order: 1;
}
.item2 {
order: 0;
}
.item3 {
order: -1;
}
Thanks for reading.
Top comments (0)