Steps To Build Resources With CSS Flexbox

First Published on LearnHub Blog

CSS flexbox is a one-dimensional layout pattern that makes designing flexible and auto-responsive layouts easy. 

It also serves as a blueprint for a website, allowing us to style our layout differently. 

Flexbox is a value that can be executed using the display attribute when styling a div (

) element or tag. It is used to arrange items in rows or columns, fill up additional spaces in our work or shrink it into smaller spaces. 

To proceed forward, basic knowledge of HTML and CSS is required.

Why Use Flexbox?

Flexbox tends to solve the problem of aligning, positioning, and screen responsiveness of our website or web application.

These are some of the advantages of using flexbox.

Enables all the children's tags in a container to take up equal width/height regardless of the amount of width and height (space) available. 

Vertically centers a block of content inside its parent.

It arranges contents with different heights within an element to meet up the content with the most extended height.

As long as we understand the formal method of creating CSS layouts was with the use of float and positioning, which sometimes can be very frustrating and limit our styling skills, especially when it comes to building a responsive website, Flexbox solves all these issues.

As we proceed in the subsequent section, you will see how flexbox helps to easily style the web/content.

Simple examples

The examples below show you some of the basics use of Flexbox with the help of snippets of code and images.

Firstly let's start with three boxes with different colours and text.

  <header class="all_content">
        <div class="content_1 box">
            <h5>content_1</h5>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
            <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus dolorum totam maiores ab eaque nisi in iste voluptas, odit, quos corrupti facere!</p>
        </div>
        <div class="content_2 box">
            <h5>content_1</h5>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus dolorum totam maiores ab eaque nisi in iste voluptas, odit, quos corrupti facere!</p>
        </div>
        <div class="content_3 box"> 
             <h5>content_1</h5>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus dolorum totam maiores ab eaque nisi in iste voluptas, odit, quos corrupti facere!</p>
       </div>
       <div class="content_2 box"> 
            <h5>content_1</h5>
           <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus dolorum totam maiores ab eaque nisi in iste voluptas, odit, quos corrupti facere!</p>
      </div>
      <div class="content_3 box"> 
           <h5>content_1</h5>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus dolorum totam maiores ab eaque nisi in iste voluptas, odit, quos corrupti facere!</p>
     </div>
   </header>

CSS Code

.all_content{
       width: 100%;

    }

    .box{

        padding: 10px;

    }

    .content_1{

        background-color: red;

    }

    .content_2{

        background-color: green;

    }

    .content_3{

        background-color: blue;

    }

Above is an image we will be working on within this sample; the five div tags are wrapped in a tag where each div has its content.

If you notice, we did not give the content a height to prevent overlapping and to provide equal columns size, and the columns are all the same height. 

This is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this.

If you may have noticed, the display flex serves as both blocks (display: block;) and inline-block (display: inline-block;) depending on the width of your browser screen and how your work interacts with your page. Let's start by calling display flex.

    .all_content{
        display: flex;        width: 100%;

    }

This is the outcome whenever you call the display flex attribute, and it horizontally arranges your items.

Some basics terminology

We should get familiar with this terminology as we are going to use this throughout this course.

⦁        Main-axis: This is where the Flex-Box is aligned horizontally on the flex-container.

⦁        main-start | main-end: Indicate the beginning (Main-start) and the ending (Main-end) on the flex container.

⦁        Cross-axis: Cross-axis is the axis perpendicular/vertically to the Main-axis, depending on the main axis direction.

Columns or Rows

Flexbox provides a property called flex-direction that notifies which direction our work should be aligned to; if the row value is called, it arranges your items horizontally, but the column aligns all your items vertically. 

Where this item will be aligned from left to right. Flex-direction is used to fix the direction of the flex items inside the flex container.

Flex-direction: column;

When Flex-direction: column is called, it places all the items vertically,  just like before adding any CSS attribute Eg the display: flex. 
Before you move on, delete this declaration from your example.

Take note there are row, row-reverse, and column-reverse; you can try this out in your spare time.

Wrapping

One main advantage of working with a flex-wrap attribute is that whenever a fixed width is given, and the width attained its limit, it pushes the items down to the next line, and if not used, sometimes we notice that the child tags are indeed breaking out of their container thereby increasing the height of the item. 

Flex-wrap specifies whether the flex items are forced in a single line or can wrap onto multiple lines depending on their width. One way in which you can fix this is to add the following declaration to your code:

 .all_content{
      display: flex;

        flex-wrap: wrap;

    }

    .box{

        padding: 10px;

        width: 300px;

    }

There is another way to write this using a shorthand (Flex-flow) where both flex-direction and flex-wrap can be called simultaneously. Instead of writing.

flex-direction: row;

flex-wrap: wrap;

write this

flex-flow: row wrap;

It is an effective and easy way of wrapping and directing our content.

Still, you can use the flex attribute to assign different sizes to your content when setting the width of our content:

First, add the following rule to the bottom of your CSS:

.box {
flex: 1;

}

With this flex value of 1, you have specified the size of all the content in your work, giving it an equal width and height regardless of the content within, after giving extra properties like padding and margin. 

This value is proportionally shared among the flex items; then, you assign the flex attribute to the content you want to increase by placing a positive integer.

.content_1{
    flex: 3;

    background-color: red;

}

After reloading your page, if observed, the size of the first content has increased compared to the other tags.

The real value of flexbox can be seen in its flexibility and responsiveness. The layout works fine if you resize the browser window or add another element.

Aligning Content Horizontally and Vertically

We will modify our code to make it more responsive and flexible, where we will work with buttons for these samples.

Let's add the codes below to add some effect.

.all_content {
display: flex;

align-items: center;

height: 20vh;

justify-content: space-around;

}

Fig center

 

        Button 1

        Button 2

        Button 3

       Button 4

 

After refreshing your page, you will notice that your buttons have aligned vertically(cross-axis) and horizontally(main-axis) to the center with equal spacing, but to align this item at the center vertically, it is advisable to give the parent tag a height. 

Align-items -It is used to vertically align the flex items across the cross-axis; listed below are some properties of Align-item.

⦁ By default, the value is stretch, stretching all flex items to fill the parent in the cross-axis. If the parent doesn't have a fixed height in the cross-axis direction, then all flex items will occupy the parent height.

⦁ The center value aligns your work vertically at the center as you can see in the example above(Fig center) is positioned at the center. However, the parent tag must also be given a height.

⦁ Different values like start/flex-start can position your content at the top of the specified height. The opposite goes for end/flex-end.

When the parent tag has been styled using the align-items, you can use the align-self to position any of the children's tags, and align-self is used on flex items to override the align-items property.

.content_1{
background-color: red;

align-self: flex-end;

} 

After you've experimented with it, you can remove it so we can continue.

Let's talk about Justify-content. It tells the tags where to be positioned on the central axis.

⦁ It aligned our content at the beginning of the main axis without calling justify-content by default.

⦁ If center is specified, your tags will be aligned at the center of the main axis.

⦁ Flex-end/end push your work to the main axis's ending (to the right).

⦁ Flex-start/start push your work to the starting (to the left) of the main axis.

⦁ The space-between is used to separate all the items, but it does not leave any space at the beginning and end of the web page.

⦁ The space-around value was the one we worked with in our example Fig 1.1, where