×
  • CSS Flexbox – Complete Beginners Guide

  • Flex Display

    Lesson List

    To get started with the Flex Display we will create a very simple HTML and CSS.


    HTML Structure

    In HTML consider we have a div container which displays the list of items

    index.html
    
    <div class="container">
      <div class="flex-item item-1">Item 1</div>
      <div class="flex-item item-2">Item 2</div>
      <div class="flex-item item-3">Item 3</div>
      <div class="flex-item item-4">Item 4</div>
      <div class="flex-item item-5">Item 5</div>
    </div>
    

    As you can see we have a parent div with class container and the parent div contains the child div with class flex-item and individual class of each item.

    CSS Design

    lets create a css class to make the look feel good

    style.css
    
    body {
        margin: 0;
    }
    .container {
        border: 6px solid black;
    }
    .flex-item {
        color: white;
        font-size: 1.5rem;
        padding: 1rem;
        text-align: center;
    }
    .item-1 {
        background-color: #B4BF35;
    }
    .item-2 {
        background-color: #B95F21;
    }
    .item-3 {
        background-color: #1C4C56;
    }
    .item-4 {
        background-color: #CfB276;
    }
    .item-5 {
        background-color: #6B0803;
    }
    

    After this what we will get to display is:
    container
    Now let us focus on the very first property which is a display property
    To create a flex container we make use of the display property and set it to a value of flex
    So in the CSS first create a class for flex which would be named as d-flex

    style.css
    
    .d-flex {
      display: flex;
    }
    

    And Add this d-flex class after the container class in html.
    After this what we will get to display is:
    flex container
    As you can see the items are laid out from left to right also you can see the container is having a 100% width as it behaves as a block-level element.

    Display inline flex

    So if you change the diplay: flex to display: inline-flex

    style.css
    
    /* You can create a seperate class for inline flex as `d-inline-flex` */
    .d-flex {
      display: inline-flex;
    }
    

    After this what we will get to display is:
    flex container
    As you can see the black border is now wrap around the flex items. The container only takes up enough width to accommodates its children.

    Make Sure the display property is always set or none of the other property is going to work on the flex container.

    DEMO

    See the Pen
    Flexbox
    by rehmaanali (@geekstrick)
    on CodePen.

    flex container properties

  • We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept