What is Flexbox in CSS? A beginner-friendly guide to it

Hey! Learners, Hope you all are doing well in your respective zone. Today I’m here with one of the interesting, exciting, and a bit confusing topic from our CSS. We will start from scratch and diving into deep for a better understanding. I hope you all have a similar intensity of enthusiasm toward the topic after coming across as much I have to explain it, learners.

CSS FlexBox
CSS FlexBox

If you have a bit of idea about CSS designing then you have the pain of positioning the element by simple styling in the CSS. what we used to as we just set some padding and margin around CSS element

and things go on but it turned into the worst scenario when we preview our same design in the multiple devices you find that all elements are just misplaced from there where you have fixed it.

Because we haven’t used any display properties like flex and grid, Well I know these words are new to you so don’t take any single stress on you we will learn it together in a fun way.

There is also a rumor about flexbox being very tough to learn, So I’m letting you keep yourself from these unkind words as to whether it will be flexbox or grid you need to focus on the topic’s base. Because if you will clear about this topic then you will be able to implement it in a very easy and fun way in the designing part.What is flexbox in CSS?

Flexbox is a flexible box model in CSS that is used to design layouts for our web pages. It is a one-dimensional design layout means it works across the X and Y-axis only. Mainly we used to manipulate our container items in the container. It has one major advantage it helps to create a responsive design more easily for any size of the device.

HTML

<body>
    <h4> Flexbox-CSS</h4>
    <div class="flex-container">
        <div>Item1</div>
        <div>Item2</div>
        <div>Item3</div>
    </div>
</body>

CSS

.flex-container {
        display: flex;
        background-color: #090221;
    }
     
    .flex-container div {
        background-color: #fff;
        margin: 10px;
        padding: 10px;
    }

After implementing this code in your local system you are able to observe to see the output as :

CSS FlexBox
Output

Here container with blue background is known as the parent element, with the parent there is 3 box with text item1,2,3 known as a child. Similarly, you can understand as a cover case of three separated items is known as the parent element.

So with the help of flexbox, we used to play around parent and child which result in giving an amazing layout. There is a restriction that the flexbox display property only applies to the item enclosed in any container we can’t apply it for only separated items or boxes. This is the major factor you need to keep in mind while playing flexbox.

FlexBox axis

It is the coordinate line used while setting any property of flexbox on the item as I have already told you the flexbox is the one dimension layout property design so keep it as the base flexbox axis is nothing but the same.

We have 2 axes available for the flexbox :

  • Main Axis
  • Cross Axis
CSS FlexBox
Flexbox axis

As from the above-attached figure main axis are verticle axis that goes from left to right. The cross axis is perpendicular to the main axis that goes top to button.

FLexbox axis is important as whatever ever property we will apply it will go throw this axis only so it will you to analyze how actually your items are changing with respect to this axis.

Properties of Flexbox

  • Flex-direction
  • Flex-wrap
  • Flex-flow
  • Flex-grow
  • Justify-content
  • align-item
  • align-content

We have these many flex-box properties are available that we will see one by one with a live preview.

  • FLEX DIRECTION

The direction property is one of the topmost properties from this property let us set the direction of an element within the container as we haven’t used any direction in the first attached images so it is in row align this is the default direction. Even in the direction, we have 4 types of directions.

  • row: this is the default flex-direction
  • row-reverse: that will set your flex item in the row mode only but it will be in reverse of the container.
  • column: It will change along the cross axis of the container.
  • column-reverse: Similar to the

See the Pen Flex direction by Ankit kumar (@Kumar-Ankit56) on CodePen.

  • Flex-wrap

Flex-wrap is the property that helps us to set responsiveness in our layout more easily. In this property mainly all child elements of the parent adjust themselves according got the space available in the container.

Email Validation In Javascript

You must have observed that if we change device-width, the layout quickly gets changed just because it is easily possible for us.

  • flex-box=wrap;
  • flex-box=no-wrap;

See the Pen flex-wrap by Ankit kumar (@Kumar-Ankit56) on CodePen.

  • FLEx-flow

It is the property that combines the two above flex properties that we have learned is the flex-direction and flex-wrap. The default value of in this property is a row no-wrap.

See the Pen Flex flow by Ankit kumar (@Kumar-Ankit56) on CodePen.

Flex-grow

Something like you has observed in the web pages multiple images are available with different widths in the same row, so how could it be possible this is possible just because of the flex-grow property in this property we just give a specific flex-grow size to each element if flex-grow will be there then it will increase respectively otherwise it will take its default value.

See the Pen Flex-grow by Ankit kumar (@Kumar-Ankit56) on CodePen.

By this attached codepen as you are able to see the 2nd item of the container is in big size respective to the other two elements.

  • Justify-content

It is also part of the flex-box in which we play around with items in the container and it helps to align items within the container.

It has also sub-property mentioned as:

  • Justify-content: center;
  • Justify-content: flex-start;
  • Justify-content: flex-end;
  • Justify-content: space-around;
  • Justify-content: space-between;

See the Pen align item by Ankit kumar (@Kumar-Ankit56) on CodePen.

  • Align-content

It is the same as justify-content that is used to align the flex item with some feature and then justify the content.

It has also some sub-property of the align item as:

  • align-items: stretch;
  • align-items: baseline;
  • align-content: space-between;
  • align-content: space-around;
  • align-content: center;
  • align-content: flex-start;
  • align-content: flex-end;

See the Pen align item by Ankit kumar (@Kumar-Ankit56) on CodePen.

By this blog… We have learned FLEXBOX and explored it in deeply. Now I’m looking for your reviews. So, How was the blog 😁, Learners!


If you want a more crisp blog like this then please check our Blogs sites projectfreecode.com keep tuned with us because every day you will learn something new here.😊
I hope that I can make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
Written by @Ankit Kumar

Leave a Comment