DEV Community

Bipon Biswas
Bipon Biswas

Posted on

Flexbox for Beginner

#flexbox #css #layout

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

index.css

.container {
  border: 5px solid #ffcc5c;
}
Enter fullscreen mode Exit fullscreen mode

Default view
Alt Text

So turn into Flexbox layout.

.container {
  border: 5px solid #ffcc5c;
  display: flex;
 }
Enter fullscreen mode Exit fullscreen mode

Output
Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

flex-direction: row; nothing to happen. If we change to column.

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

Now we can see.

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Now change to justify-content: flex-end;

.container {
  border: 5px solid #ffcc5c;
  display: flex;
/*   flex-direction: column; */
  justify-content: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Now change to justify-content: center;

Alt Text

Now change to justify-content: space-around;

Alt Text

equal amount of space left hand side and right hand side.

Now change to justify-content: space-between;

Alt Text

Now change to justify-content: space-evenly;

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Now let's see.

Alt Text

So this is normally single item change the axis.

If we want to search right side

.search{
  margin-left: auto;
}
Enter fullscreen mode Exit fullscreen mode

Now let's see

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

justify-content: flex-end; pushing whole items right hand side.

Alt Text

Bit more update.

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  justify-content: flex-end;
}
.home {
  margin-right: auto;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Simply target the item. container direct children .container > div { }.

.container {
  border: 5px solid #ffcc5c;
  display: flex;
}
.container > div {
  flex: 1;
}
Enter fullscreen mode Exit fullscreen mode

Now showing equal amount of space.

Alt Text

.container > div {
  /*flex: 1;*/
  width: 33.3333%;
  /*flex-grow, flex-shrink, flex-basis */
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Now let's see.

Alt Text

.container > .home {
  flex: 2;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Also home and logout change the flex property and shrinking smoothly and fixed search width.

.home {
  flex: 1;
}
.logout {
  flex: 1;
}
Enter fullscreen mode Exit fullscreen mode

Let's see.

Alt Text

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%;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Because of only work body{height: 100%}

body {
  background-color: #ffeead;
  margin: 10px;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

As we can see pushed on the top the cross axis

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

As we can see pushed on the bottom the cross axis

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

That's the item top of the axis.

Now make this home item appear bottom here.

.home {
  align-self: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Bit more change.

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Now items are going for top to bottom.

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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%;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

Wrapping flexbox

Going to learn wrap item in Flexbox.

Alt Text

.container {
  border: 5px solid #ffcc5c;
  display: flex;
}

.container > div {
  width: 300px;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Alt Text

Alt Text

Flexbox - flex-grow-shrink-basis

Going to learn flexbox property details.

Alt Text

.container {
  border: 5px solid #ffcc5c;
  display: flex;
}

.home {
  flex: 1;
}

.logout {
  flex: 1;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Same here.

.home {
  flex: 1 1 0;  
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

.home {
  flex-grow: 1;
  flex-basis: 200px;
}
.logout {
  flex-grow: 1;
  flex-basis: 200px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

If flex-grow: 1; then grow normally.

.logout {
  flex-grow: 1;
  flex-basis: 200px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Home nothing change because of flex-grow: 0;

.logout {
  flex-grow: 5;
  flex-basis: 200px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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.

Alt Text

.home {
  flex: 1 1 200px;  
}
Enter fullscreen mode Exit fullscreen mode

This is the exact same thing.

.home {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}
Enter fullscreen mode Exit fullscreen mode 
.container {
  border: 5px solid #ffcc5c;
  display: flex;
}

.home {
  flex: 1 1 200px;
}

.logout {
  flex: 10 1 200px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

index.css

.item2 {
  order: 1;
}
Enter fullscreen mode Exit fullscreen mode

And what happen here. Search jump over the logout.

Alt Text

Noted: By default order: 0.

.item2 {
  order: -1;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

.item1 {
  order: 2;
}

.item2 {
  order: 0;
}

.item3 {
  order: 0;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Work on the main axis rest of the item.

.item1 {
  order: 1;
}
.item2 {
  order: 0;
}
.item3 {
  order: -1;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Thanks for reading.

Top comments (0)

Read next

ashutosh_dev profile image

csPlayer: A Customizable YouTube Video Player for Your Projects

Ashutosh_dev -

thatanjan profile image

Responsive design is easy with Fluid Tailwind Plugin.

Anjan Shomodder -

tomasdevs profile image

Mastering Web Animations: CSS vs Unoptimized and Optimized JavaScript Performance

Tomas Stveracek -

morewings profile image

Let's create a simple React hook to detect browsers and their capabilities

Dima Vyshniakov -