Flex Display

Contents hide

1) HTML Structure

2) CSS Design

3) Display inline flex

3.1) DEMO

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:

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:

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:

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.