A complete guide to Flexbox

CSS Flexbox is a CSS layout system that’s designed to be easy for web designers and developers to use. It takes care of all the fiddly bits like vertical alignments, spanning elements across columns or rows as well as providing both display options (block/inline) in one go!

It has become hugely popular because it removes many of the complexities involved with doing layouts using traditional CSS methodologies—no more worrying about floats collapsing on each other or forgetting which way round your row should be set out. With flexboxes, you can do any kind of layout without getting confused over what properties are needed and how they’re used.

In this article, we will go over everything you need to know about CSS Flexboxes.

What is CSS Flexbox?

CSS Flexbox is a set of CSS properties that allow you to easily display your content in any layout. It has a ton of flexibility and you can align it in any direction!

The most common use for flexboxes is with displaying rows or columns on the page, but they’re also great for laying out individual items within those rows/columns.

You can also use CSS Flexbox to easily adjust the height of an element, like a header or footer. You don’t have to worry about setting heights on all elements and then trying to position them in your layout with margins.

How does CSS Flexbox work?

The CSS properties flex-direction, flex-wrap, and width are what you need to understand for this. The direction tells the browser how we want it to order our content vertically or horizontally – either column or row. We can also tell the browser that we’re going to wrap all of our items on a single line with “flex-wrap: nowrap;” which is great if your item list is really long! Finally, width lets us adjust an element’s width by saying something like “width: 90%;”.

Flexbox has two directions, “row” and “column”; in these cases, they align themselves accordingly based on the space available without needing any more specification. You can see this best with text: by default flex items will stretch horizontally but we can change that by adding display: flex; before them to make them grow vertically instead (or shrink). Or you could do both with “flex-direction: row wrap.

Use of CSS Flexbox

CSS Flexbox is a CSS property that defines the display of an element as either flexible or inflexible. The main idea behind CSS flexboxes is to use them in order to create layouts and pages, such as headers, footers, grids for content blocks (sidebars), etc. It’s especially useful when you want items to take up different amounts of space depending on their size without using percentage values or media queries.

You can also use it if you have nested boxes with one inside another; this means that each block will be able to grow or shrink relative to its parent container. This contrasts with how elements might behave using other layout methods like float where they all become rigid and fully sized instead of adjusting themselves based on the size of their parent container.

How to use flexbox CSS? Here is the example of flexbox.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLEX BOX</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        .container{width: 100%;height:auto ; display: flex;}
        .container > div{padding: 1em; background: #cccccc;flex-basis: calc(100% / 12);}
        .container > div:nth-child(odd){background: #eeeeee;}
    </style>
</head>
<body>
    <div class="container">
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum magni suscipit explicabo mollitia harum. Autem qui excepturi fugiat dolorum cumque sunt modi pariatur incidunt ad mollitia, amet unde exercitationem aliquam.</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    
</body>
</html>

In the example above, we took a container and set the display flex property inside it. As soon as we used the display flex, all the Divs inside our container were automatically set inline-block. We used to do this work by the float property. So whenever we use the display file, All the children inside it will fall in a line. And with the help of Flex Basis, we also give width to all the children Divs. So this saved us a lot of time and we did not have to write many lines of code.

Flexbox css
The flex box

Now we are going to use the other properties of flex like justify-content. By using justify-content we can space between all divs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        .container{width: 100%;height:auto ; display: flex;justify-content: space-between;}
        .container > div{padding: 1em; background: #cccccc;flex-basis: calc(90% / 10);}
        .container > div:nth-child(odd){background: #eeeeee;}
    </style>
</head>
<body>
    <div class="container">
        <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>10</div>
        
        
    </div>
    
</body>
</html>

Now we are going to use flex shrink and grow properties. By using shrink and grow we can increase a particular box size. I personally suggest to all of you use flex instead of flex-shrink and flex-grow, both of properties not working for me, I tried many time.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        .container{width: 100%;height:auto ; display: flex;}
        .container > div{padding: 1em; background: #cccccc;width: 30%;}
        .container > div:nth-child(odd){background: #eeeeee;}
        .container > div:nth-child(1){flex: 1;}
        .container > div:nth-child(2){flex: 2;}
        .container > div:nth-child(3){flex: 1;}

    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
     
        
        
    </div>
    
</body>
</html>
flexbox  css

Working on responsive design ? use Flex-box for responsive design too.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        .container{width: 100%;height:auto ; }
        .container > div{padding: 1em; background: #cccccc}
        .container > div:nth-child(odd){background: #eeeeee;}
        .container > div:nth-child(1){flex: 1;}
        .container > div:nth-child(2){flex: 2;}
        .container > div:nth-child(3){flex: 1;}
        @media (min-width:768px) {
            .container{width: 100%;height:auto ; display: flex;flex-wrap: wrap;}
            .container > div{flex-basis: 100%;}
        }

    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
     
        
        
    </div>
    
</body>
</html>
flexbox css

Can CSS flexbox be used on all browsers?

CSS flexbox is a property of CSS that allows us to align the items inside an element according to its width and height. It’s much easier than trying to use floats or positioning, which are more complex properties in CSS. Although it can be used on all browsers, there were some compatibility issues with older versions such as IE11. The latest version (IE12) has fixed those problems and doesn’t have any other major bugs so you should feel confident using this powerful tool!

Limitations of CSS Flexbox

  • CSS Flexbox can only deal with one dimension at a time, meaning that if you wanted to have two columns in your layout and want the column on the left side of each row to stretch all the way across until it hits the column on the right side, then there is no “CSS flex property” that will allow this.
  • CSS Flexbox cannot be used for grid layouts, meaning that if you wanted to have a layout with three columns then it would need to take up the entire space of one column and two rows.
  • CSS Flexbox can only deal with the “flex” properties which are flex-direction, flex-wrap, and align content; however, there is no CSS property called “column”.

-The browser support as well makes things difficult when considering the implementation of CSS flexboxes in web design projects because IE does not offer any form of native support for them (IE has an outdated version but even so its capabilities are still limited).

Conclusion

Conclusion paragraph: CSS Flexbox is a new way to layout items horizontally or vertically on the page. It can be used to create layouts in which content automatically resizes and reflows according to what’s needed, without having any empty space left over. With some limitations, it should work with all browsers (but please test your own site for compatibility). You may also enjoy our blog post “CSS grid vs flexbox” which discusses how these two different technologies compare. Also, read what is grid box by clicking here

Leave a Comment