Flexbox Unveiled: Exploring Powerful Container Control and Dynamic Layouts🎨

INTRODUCTION:

Hey Folks! Today we are gonna explore about FlexBox element in Cascading Style Sheet(CSS). Much like the div and box container that you can create using HTML, flexbox is a type of container. Flexbox can overcome the limitations caused by containers such as block and inline because it does a better job of scaling over larger web pages and also provides more dynamic control of the containers. This is because it can grow, shrink and align the items inside it which give better control to the programmer over the contents and styling of the items inside the container.

Before learning about the common layouts built using the flexbox, it is important to understand the properties inside it and how flexbox works. Let’s examine some of the important characteristics of flexboxes and the properties that can be used to configure them.

FLEXBOX:

Flexbox is single-dimensional, which means you can align it either along a row or a column and it is set to row alignment by default. There are two axes, the main and cross-axis, much like the x and y-axis used in coordinate geometry. When aligned along the row, the horizontal axis is called the main axis and the vertical axis is called the cross axis. For the items present inside the flexbox container, the placement starts from the top-left corner moving along the main or horizontal axis. When the row is filled, the items continue to the next row. Note that with the help of a property called flex-direction, you can instead flip the main axis to run vertically and the cross axis will then be horizontal. In such a case, the items will start from top left and move down along the vertical main axis. The properties you choose will help better control alignment, spacing, direction and eventually styling of the container and items present inside it.

FLEXBOX PROPERTIES:

HTML Code:

CSS Code:

Output:

There are seven div containers inside the HTML File.

The corresponding CSS file contains rules for all seven div tags that have the box class. Note how two class names are given for each of the tags, one that is common among all classes and another independent of it. The style is applied to all the containers.

Now let's add properties to the flex container by converting it into flex.

The output is now seven flex containers that run from left to right starting in the top left corner.

Alignment properties:

Let’s examine a few alignment properties inside the flex. There are four main properties used to align a flex container and items present inside it:

• justify-content. For item alignment on main axis.

• align-items. For item alignment on cross axis.

• align-self. For unique flex items on cross axis.

• align-content. Used for packing flex lines and control over space.

Of these, justify-content and align-items are frequently used for the respective two axes.

Let’s first examine the use of justify-content which has a value of ‘left’ by default.

i)justify-content:

CSS:

Output:

ii)flex-wrap:

The default for this property is ‘nowrap’ which means the items will span the entire width of the axis.

CSS Code:

Output:

The items will now wrapped to the size of the available viewport.

iii)flex-direction:

This property is used to set the main axis, which is a ‘row’ by default. It basically means you are changing your ‘main’ axis from horizontal rows to vertical columns.

CSS Code:

Output:

The output looks like the original output; however, it is now actually a flex.

Now let’s align the items again and examine a couple of the other properties mentioned earlier.

iv)align-items:

The alignment on the cross-axis is done with the help of this property. Let’s change the value for it to ‘flex-end’.

CSS Code:

Output:

The term ‘end’ refers to the right side of the page as the left side is seen as the beginning.

v)align-self:

This property can be used on individual items inside the flex.

CSS Code:

Output:

Here the color and alignment of the third box have been changed and it overrides the properties set using align-items.

vi)gap:

gap property can be used to create space between the items along the main axis. You can also individually configure the gaps in rows and columns using row-gap and column-gap properties.

CSS Code:

Output:

There is a clear change in spacing between the items.

The final set of properties are flex-grow, flex-shrink and flex-basis. Together these determine how the flex takes up space, grows or shrinks according to the space available.

These are the sub-properties of a property called flex. Together all three properties can also be given values with the help of something called the shorthand notation in CSS. Shorthand notation helps you make your code compact and also easy to write and follow. The values left empty in shorthand notation are given their default values.

For example:

Here for the flex-container class, there is a set rule for the flex property. The values correspond to the three properties, namely the flex-grow set to 0, flex-shrink to 1 and flex-basis to auto. The flex-basis sets the initial size of the container. and together they define the rigidity or flexibility and dynamism you want to add to the flexbox.

To demonstrate the effect of this, the code has to be modified slightly by removing the flex-direction value set to ‘column’. This will change it to default ‘row’ and the output will again be centrally aligned and horizontal best-distributed between two rows.

Output:

The rest of the remaining code is unchanged. However, the output will change if the code is modified with the addition of the flex property inside the flex item box3 class.

CSS Code:

Output:

The third box now takes up the entire free space available because flex-growth’s value has been set to 1. So if we have flex-grow set to 1, the children will all set to equal size. And if one of the children has a value of 1.5, that child would take up more space as compared to the others.

It’s important to understand how the changes in the main and cross axis affect the way you imagine and manipulate the flexbox. Once you’ve had more practice you’ll be more comfortable with the use of these properties, and it will become easier to use flexboxes and understand the flow and alignment of items inside the flexbox.

Conclusion:

So far we have seen detailed information of FlexBox, Properities of flexbox and various attributes of flexbox. I hope this would be fruitful for the novice web developers and feel free to share your thoughts and I am open for constructive suggestions. Until then Bye Folks!

-JD DHANISSH