We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel πŸš€.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through WorksHub average a 15% increase in salary πŸš€

You will be redirected back to this page right after signin

Blog hero image

Detail Beginner Guide for CSS Flexbox with examples - TechBoxWeb

Nitin Suresh Hepat 26 October, 2020 | 15 min read

<!--– wp:paragraph –-->

Flexbox is not a single property its complete module which comes with the number of features and here we have a complete guide for CSS flex

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

Before going into detail I just want to answer why we should use flexbox layout instead of traditional way of doing layout webpage using display properties, float properties, positional properties

<!--– /wp:paragraph –-->

<!--– wp:heading {"level":3} –-->

Advantages of using flexbox

<!--– /wp:heading –-->

<!--– wp:list –-->

  • Flexbox Equally distribute height and width for the item, even though items are added dynamically, Don't need to care about CSS properties
  • easily reverse the structure of items
  • easily grow and shrink the width of the item as per dynamic width of the container
  • easily control the direction of the elements like vertical or horizontal on the basis of a single property
  • change the order of any element
  • 96% of the browser having support for flexbox
<!--– /wp:list –-->

<!--– wp:heading –-->

Layout for flexbox

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

we should know how flexbox works, please refer below diagram

<!--– /wp:paragraph –-->

<!--– wp:image {"align":"wide","id":386,"sizeSlug":"large"} –-->

Layout of flexbox
<!--– /wp:image –-->

<!--– wp:paragraph –-->

flexbox is divided into two axis main axis and cross axis.

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

In normal layout when we are using display inline or inline block. it goes from left to right only

<!--– /wp:paragraph –-->

<!--– wp:list –-->

  • main-axis: This is the default axis where items laid out by default. it's not necessarily horizontal always, it can be vertical also depending upon flex-direction
  • Main start/ Main-end: Items will be placed from main-start to main-end
  • Main size: width or height of the container depending upon flex direction
  • Cross-axis: Cross axis is perpendicular to the main axis.
  • Cross-start/Cross-end: Items will be laid out started from cross-start to cross-end
  • Cross-size: The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of β€˜width’ or β€˜height’ that is in the cross dimension.
<!--– /wp:list –-->

<!--– wp:paragraph –-->

Before starting with the flexbox properties we should understand which properties meant for flex container and flex items

<!--– /wp:paragraph –-->

<!--– wp:columns –-->

<!--– wp:column –-->
<!--– wp:heading {"level":3} –-->

Flexbox container properties

<!--– /wp:heading –-->

<!--– wp:list –-->

  • display
  • flex-direction
  • flex-wrap
  • justify-contents
  • align-items
  • align-contents
<!--– /wp:list –-->
<!--– /wp:column –-->

<!--– wp:column –-->

<!--– wp:heading {"level":3} –-->

Flexbox item properties

<!--– /wp:heading –-->

<!--– wp:list –-->

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
<!--– /wp:list –-->
<!--– /wp:column –-->
<!--– /wp:columns –-->

<!--– wp:heading –-->

Flexbox container properties

<!--– /wp:heading –-->

<!--– wp:heading {"level":3} –-->

display

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

As we know display property have number of value like inline, block, inline-block etc. But if we are giving value as flex then we are turning on flexbox context

<!--– /wp:paragraph –-->

<!--– wp:code –-->

.container {   display: flex }
<!--– /wp:code –-->

<!--– wp:heading –-->

flex-direction

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

flex-direction decides that how items will be laid out on main-axis horizontally or vertically

<!--– /wp:paragraph –-->

<!--– wp:code –-->

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
<!--– /wp:code –-->

<!--– wp:image {"id":394,"sizeSlug":"large"} –-->

flex-direction
<!--– /wp:image –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:image {"id":396,"sizeSlug":"large"} –-->

flex-direction-column
<!--– /wp:image –-->

<!--– wp:paragraph –-->

Above are the possible values for flex-direction property

<!--– /wp:paragraph –-->

<!--– wp:list –-->

  • row: row is by default value for flex-direction where item will be placed from left to right
  • row-reverse: items will be placed from right to left
  • column: Items will be placed vertically top to bottom
  • column-reverse: Items will be placed bottom to top
  • initial: It set's value to the default
  • inherit: inherit value from the parent
<!--– /wp:list –-->

<!--– wp:heading {"level":3} –-->

flex-wrap:

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

flex-wrap controls the behaviour that item will move into the next line if container width is less than total item width.

<!--– /wp:paragraph –-->

<!--– wp:code –-->

flex-wrap: nowrap | wrap | wrap-reverse;
<!--– /wp:code –-->

<!--– wp:paragraph –-->

Default value: nowrap

<!--– /wp:paragraph –-->

<!--– wp:image {"id":398,"sizeSlug":"large"} –-->

flex-wrap
<!--– /wp:image –-->

<!--– wp:list –-->

  • no-wrap: fit into the one line by adjusting width of the item
  • wrap: item will be laid down to next line from top to bottom
  • wrap-reverse: item will be laid down to next line from bottom to top
<!--– /wp:list –-->

<!--– wp:heading {"level":3} –-->

flex-flow

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

flex flow is shorthand for flex-direction and flex-wrap

<!--– /wp:paragraph –-->

<!--– wp:code –-->

flex-flow: <flex-direction> | <flex-wrap>
<!--– /wp:code –-->

<!--– wp:paragraph –-->

Default value: row no-wrap

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

let's see some examples

<!--– /wp:paragraph –-->

<!--– wp:image {"id":404,"sizeSlug":"large"} –-->

flex-flow
<!--– /wp:image –-->

<!--– wp:paragraph –-->

Above we saw an example of flex-flow where flex-direction is row.You can do same for flex-direction column just consider above thing vertically

<!--– /wp:paragraph –-->

<!--– wp:heading {"level":3} –-->

justify-content

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

justify-conent is used align items on the main-axis.Its container propery so it will align all child items to the particular position like to the center , start or end or giving space between them.

<!--– /wp:paragraph –-->

<!--– wp:code –-->

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
<!--– /wp:code –-->

<!--– wp:paragraph –-->

Default value: flex-start

<!--– /wp:paragraph –-->

<!--– wp:image {"id":406,"sizeSlug":"large"} –-->

justify-content
<!--– /wp:image –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:list –-->

  • flex-start - Align items to the start of the container depending upon flex-direction
<!--– /wp:list –-->

<!--– wp:paragraph –-->

for eg.

<!--– /wp:paragraph –-->

<!--– wp:code –-->

.container {   flex-direction: row-reverse   justify-content: flex-start; }
<!--– /wp:code –-->

<!--– wp:image {"id":408,"sizeSlug":"large"} –-->

<!--– /wp:image –-->

<!--– wp:paragraph –-->

As you can see above flex-start started from right side not from writing mode direction

<!--– /wp:paragraph –-->

<!--– wp:list –-->

  • center: Align items to the center
  • flex-end: Align items to the end of the container as per flex-direction
  • space-around: Gives space around the items by adjusting width
  • space-between: gives space between the items not at the start and end of the container
  • space-evenly: gives equal amount of space around the item
  • start: Align items to the start of the container as per writing mode direction
  • end: Align items to the end of the container as per writing mode direction
<!--– /wp:list –-->

<!--– wp:heading {"level":3} –-->

align-items

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

align items property is used to align items in respective of cross axis like we have justify content for main-axis

<!--– /wp:paragraph –-->

<!--– wp:code –-->

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
<!--– /wp:code –-->

<!--– wp:paragraph –-->

Default value: stretch

<!--– /wp:paragraph –-->

<!--– wp:image {"id":410,"sizeSlug":"large"} –-->

align items
<!--– /wp:image –-->

<!--– wp:list –-->

  • stretch: occupies full height of the container if height to the items not given externally
  • flex-start: align items to the start of the container in consideration with cross axis
  • center: align items to the center in consideration with cross axis
  • flex-end: align items to the end in consideration with cross axis
  • baseline: align items as per baseline of the item content in consideration with cross axis
<!--– /wp:list –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:heading {"level":3} –-->

align-content

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

align-content is used to align rows not items in respective of cross-axis

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

I know you guys will get confuse what is differnece between align-items and align content

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

let' s see an example by comparing align-items and align-content

<!--– /wp:paragraph –-->

<!--– wp:image {"id":443,"sizeSlug":"large"} –-->

align-content
<!--– /wp:image –-->

<!--– wp:paragraph –-->

As you can see above align-items: center actually align items to center in respective of cross-axis and align-content align rows to the center in respective of cross-axis

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

we have taken example with two rows because align-content have no effect single line

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:heading –-->

Join our newsletter
Join over 111,000 others and get access to exclusive content, job opportunities and more!

Flex item properties

<!--– /wp:heading –-->

<!--– wp:heading {"level":3} –-->

order

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

UsingΒ orderΒ property it’s possible to re-arrange the natural order of container items.

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

Default value: 0

<!--– /wp:paragraph –-->

<!--– wp:image {"id":421,"sizeSlug":"large"} –-->

order
<!--– /wp:image –-->

<!--– wp:paragraph –-->

As you can see in above diragram ,

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

First diagram shows default behaviour where all item have order value 0

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

In Second diagram item 1(highlited one) moves to last because its order value is greater than remaining 3

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

In third diagram item 3 moves to first position because it has order value -1 which smaller than other three items

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

In Fourth diagram item 1 and item 3 moves to last because their order value is greater than others

<!--– /wp:paragraph –-->

<!--– wp:heading {"level":3} –-->

flex-grow

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

flex-grow is allow item to grow as container size greater than the total items size

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

Default value: 0

<!--– /wp:paragraph –-->

<!--– wp:image {"id":414,"sizeSlug":"large"} –-->

flex-grow
<!--– /wp:image –-->

<!--– wp:paragraph –-->

In above example

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

First diagram shows default behaviour where items not accomadating remaining space takes only width provided to the item

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

In Second diagram, you can see we made flex-grow: 1 to all items it means all item divided remaining space in equal ratio. It will behave same if we give value as 2 to all item because we are giving ratio value

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

In third diagram, item 2(highlighted one) takes twice as much as space as compared to other items because it has value 2 and its double of other items value

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

NOTE: negative values are not allowed

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:heading {"level":3} –-->

flex-shrink

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

flex-shrik property allow item to shrink as container size decreases

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

Default value: 0

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

If all items in the container have value as 1 then all the items will shrink in equal ratio

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

And all item have value as 1 except one item which have value 2 then this item will shrink as twice as other items

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

for eg.

<!--– /wp:paragraph –-->

<!--– wp:image {"id":417,"sizeSlug":"large"} –-->

flex-shrink
<!--– /wp:image –-->

<!--– wp:paragraph –-->

As you can see above given flex-shrink : 2 to the third element shrink twice as much as other elements.

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

Negative values are not allowed

<!--– /wp:paragraph –-->

<!--– wp:heading {"level":3} –-->

flex-basis

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

flex-basis is nothing but the min-width for the container items in flexbox context

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

Default value: Auto

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

For eg. If we haven't provided flex-basis property then its by default auto then flexbox items will take width which is equal to content width

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

flex basis always given in unit it can be %, px, em etc.

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:heading {"level":3} –-->

flex

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

flex is shorthand for flex-grow, flex-shrink and flex-basis

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

Default value: 0 1 auto

<!--– /wp:paragraph –-->

<!--– wp:code –-->

flex-grow: <flex-grow> <flex-shrink> <flex-basis>
<!--– /wp:code –-->

<!--– wp:paragraph –-->

there are number of possibilities for flex values

<!--– /wp:paragraph –-->

<!--– wp:code –-->

/ One value, If unitless number then its flex-grow / flex: 1;

/ One value, width/height: flex-basis / flex: 10em; flex: 30%; flex: min-content;

/ Two values: flex-grow | flex-basis / flex: 1 30px;

/ Two values: flex-grow | flex-shrink / flex: 2 2;

/ Three values: flex-grow | flex-shrink | flex-basis / flex: 2 2 10%;

<!--– /wp:code –-->

<!--– wp:heading {"level":3} –-->

align-self

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

align-self is for aligning individual item in respective of cross-axis and it will override value set by align items

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:image {"id":419,"sizeSlug":"large"} –-->

align-self
<!--– /wp:image –-->

<!--– wp:paragraph –-->

As you can see In above example we have given align-self: center to the item 2 and then only that item position has changed.

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

<!--– /wp:paragraph –-->

<!--– wp:heading –-->

Example

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

we have learned a lot lets take an practical example

<!--– /wp:paragraph –-->

<!--– wp:heading {"level":3} –-->

Centering element vertically and horizantally

<!--– /wp:heading –-->

<!--– wp:code –-->

//html <!DOCTYPE html> <head>
&lt;link rel="stylesheet" href="index.css" /> 
</head> <body> <section>
&lt;div class="container">
    
    &lt;div class="item">
        
      &lt;/div>
   
     
  &lt;/div> 
</section> </body> </html> <!--– /wp:code –-->

<!--– wp:code –-->

//css .container {
display: flex;
width: 47%;
height: 300px;
border: 2px solid;
padding: 5px; 
}

.container .item {

flex-basis: 100px;
height: 96px;
border: 2px solid;
justify-content: center;
color: white;
align-items: center;
background-color: cadetblue; 
} <!--– /wp:code –-->

<!--– wp:paragraph –-->

and output will be

<!--– /wp:paragraph –-->

<!--– wp:image {"id":445,"sizeSlug":"large"} –-->

<!--– /wp:image –-->

<!--– wp:heading {"level":3} –-->

Creating a Navbar

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

navbar.html

<!--– /wp:paragraph –-->

<!--– wp:code –-->

<!DOCTYPE html>

<head>

&lt;link rel="stylesheet" href="index.css" /> 
</head>

<body>

&lt;section class="main-container">
    &lt;div class="logo-container container">
        &lt;strong>Logo&lt;/strong>
    &lt;/div>
    &lt;ul class="menu-container container">
        
        &lt;li class="menu">
            &lt;strong>
                Home
            &lt;/strong>
        &lt;/li>
        &lt;li class="menu">
            &lt;strong>
                Contact Us
            &lt;/strong>
        &lt;/li>
        &lt;li class="menu"> 
            &lt;strong>
                About Us
            &lt;/strong>
        &lt;/li> 
    &lt;/div>
&lt;/section> 
</body>

</html>

<!--– /wp:code –-->

<!--– wp:paragraph –-->

and css file

<!--– /wp:paragraph –-->

<!--– wp:code –-->

.main-container {
display: flex;
background: #ce8888; 
} .container {
flex-basis: 50%; 
} .logo-container {
justify-content: flex-start;
align-items: center;
display: flex;
color: white;
padding: 10px;
font-size: x-large;
  
} .menu-container {
display: flex;
height: 60px;
justify-content: flex-end;
align-items: center;
padding: 0;
width: 50%;
margin: 0; 
}

.menu-container .menu {

padding: 4px 10px;
border-radius: 5px;
color: bisque;
display: flex;
justify-content: center;
align-items: center;
align-items: center;
cursor: pointer;
}

.menu-container .menu:active ,.menu-container .menu:hover{

background: repeating-linear-gradient(45deg, #824e4e, transparent 100px) 
} <!--– /wp:code –-->

<!--– wp:paragraph –-->

and output will be

<!--– /wp:paragraph –-->

<!--– wp:image {"id":446,"sizeSlug":"large"} –-->

<!--– /wp:image –-->

<!--– wp:paragraph –-->

You can check demo here

<!--– /wp:paragraph –-->

<!--– wp:heading –-->

Conclusion

<!--– /wp:heading –-->

<!--– wp:paragraph –-->

CSS flexbox has very good feature to do layout for the webpage. If you guys understand Please share it and you feel free to ask question in Comments

<!--– /wp:paragraph –-->

<!--– wp:paragraph –-->

follow me on twitter for updates on latest projects

<!--– /wp:paragraph –-->

Originally published on techboxweb.com

Related Issues

open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Open
  • 0
  • 0
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 1
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Open
  • 0
  • 0
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Open
  • 0
  • 0
  • Intermediate
  • HTML

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through WorksHub average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email