What is css flexbox and why am using flexbox?

Hello world my name is saket singh and today I write my first blog. In this blog you’ll learn the basics of CSS Flexbox.

Now let’s get started

What is flexbox?

Basically it is a one-dimensional layout model the Flexbox Layout officially called css flexible box layout module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Important components of flexbox.

The two main components of a Flexbox layout are the container and the items.

For example, you see in this bottom will look like this

<div class="container">
  <div class="item">Mayank</div>
  <div class="item">Hemant</div>
  <div class="item">Saket</div>
</div>

Before we turn this into a Flexbox layout, the </div> elements will be look like this:

To turn this into a Flexbox layout, we’ll simply give the container the following CSS property:

.container {
    display: flex;
}

After applying  the " display:flex " on the main div the position automatically change in horizontal.

You can see changes in this bottom image.

Container properties.

flex-direction

Justify-content

align-item

flex-wrap

flex-flow

Here some properties related to the flexbox container.

Align rows or columns

The first property we see, flex-direction, determines if the container should align its items as rows, or as columns:

flex-direction: row places items as a row, in the text direction (left-to-right)

flex-direction: row-reverse places items just like row but in the opposite direction

flex-direction: column places items in a column, ordering top to bottom

flex-direction: column-reverse places items in a column, just like column but in the opposite direction

Change the horizontal alignment

justify-content has 5 possible values:

flex-start: align to the left side of the container.

flex-end: align to the right side of the container.

center: align at the center of the container.

space-between: display with equal spacing between them.

space-around: display with equal spacing around them

Change the vertical alignment

align-items has 5 possible values:

flex-start: align to the top of the container.

flex-end: align to the bottom of the container.

baseline: display at the baseline of the container.

stretch: items are stretched to fit the container

center: items are center of the container

Flex-wrap

By default, flex items will be arranged into one line. You can change that and allow the items to wrap as needed with this property.

nowrap (default): all flex items will be in one line

wrap: flex items will wrap onto multiple lines, from top to bottom.

wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

Here is the example of flex-wrap

The red list is set to nowrap

The yellow green list is set to wrap

The sky blue list is set to wrap-reverse

Note: the flex-direction is set to the default value: row.

flex-flow

A shorthand property called flex-flow allows you to specify flex-direction and flex-wrap in a single line, by adding the flex-direction value first, followed by flex-wrap value, for example: flex-flow: row wrap.

Conclusion

In this blog , we learn about flex properties for container .I hope this information is useful for all of you while design websites .

Thanks to all for reading this blog .