Everything about Flex Box.

flexbox makes us easy for us to design or make a layout for a particular website as per our requirements, flexbox is used for small-scale applications. The main idea behind these layouts which are being created using flex-box is to alter the height and width of its items to fill the available space as per the size of the browser (for all kinds of devices)

Flex-box is being applied to its items and its container.

Flex is always one way [either vertical or horizontal we will use flex]

<div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
    <div class="box box7"></div>
    <div class="box box8"></div>
    <div class="box box9"></div>
    <div class="box box10"></div>
  </div>

the default behaviour of the above respective divs will be from top to bottom, here still now I haven't used flex. It's just a default behaviour and will take the entire page width, though I have reduced the width of the div that's why it is looking small otherwise no need of getting confused. The div's were being displayed in the vertical direction one after another because of its default property display:block

as soon as I will use display: flex property to its parent which is known as the container in this example, then you can see some changes in that all the divs are arranged in the horizontal direction.

display: flex

In display: flex the flex items will get arranged in the horizontal direction and also has a default property called flex-direction: row.

flex-direction properties.

the flex-direction properties are of 4 types.

• flex-direction: row (this one is the default one): from left to right

• flex-direction: row-reverse:- from left to right

• flex-direction: column:- from top to bottom

• flex-direction:column-reverse:- from bottom to top.

Note:

1. In flex-box, our content always flows from the main-axis start and ends at the main-axis end.

Flex-Wrap:

It is used to wrap the things inside it. When we will apply the wrap to the parent element all the child elements inside the parent element will wrap inside it.

Note: This property deal with the flex item when the space in the container list is not enough to fit them all.

The flex-wrap properties are of 3 types:

• flex-wrap: nowrap (this is the default one and it will align all the items in one line)

• flex-wrap: wrap (items will wrap into multiple lines as we decrease the size of the screen)

• wrap-reverse: flex items will wrap onto multiple lines from bottom to top. it's just reverse the items from bottom-top

Note: by default flex-wrap is set to nowrap, which means if the container is not able to fit all the items in a row with its actual width then it gonna shrink the width of the item in order to fit inside the container

if we are using the wrap to the items and suppose for example the width is 400px, so instead of overflowing the container, if the width of the first row was not upto 400px instead of overflowing from the container it goes into the next line or wrap into the next line(towards cross-axis). And the items on each line are individual flex-container if we do some changes to the items of the first line then it will not affect the others containers.

Justify Content

justify content will align the items in the main-axis

Align Items:

Align items always works and the cross-axis means it will align the items towards the cross-axis, The default property in align-items is stretch [align-items: stretch]

Align Content:

align content is a flex-container property.

Flex Flow:

Flex-Flow is used to write two properties at a time for example if we want to write flex-wrap: wrap and flex-direction: row we can directly write as flex-flow: row wrap;

.flex-container{
    flex-flow: row wrap;
    flex-flow: column wrap;
}

Align Self:

Now let's learn about the properties which are being used for flex items, from the below diagram we will get to know what is flex-items:

align-self will override the property of align-items; we can apply the align-self property to each specific/ individual item.

Order:

The property order is being applied to the flex items. We can change the order of the flex items The default value of the order is 0 :

.box-One{
    order:0
}
.box-Two{
    order:1
}
.box-Three{
    order:3
}

Note: the box-one will come first after that box-Two will come and then box-Three so whichever container has more order value will come last, here in this example, I want my box-Three should come last that's why I have given a higher order value to the box-Three.

Flex-Basics:

The flex-basics property points out the initial size of the flex item before the extra space in the container is distributed. The flex-basics is used in place of the width property. The flex-basics property can accept values in the form of [%, rem, em, px]

Flex-Grow:

I have two containers here in the upper one I haven't applied flex-grow and in the second container I have applied flex-grow:1 to the 3 containers but in the 4th one I have applied flex-grow:2 .The default value is 0.

This property will grow the size of the flex items, with this property we can decide what value we have to provide to the flex-grow item so that it can fill up the remaining spaces in the flex container.

Flex Shrink:

This property helps us to shrink the flex-items.

I have applied the flex-shrink property to the second container to box-10 and to box-5, The box having more value will be shrunk more as compared to the box having less value.

Note: Default value is : 1

.flex-item {
    flex-shrink: 'integer_value'
}

Flex:

Flex is a shorthand property and a combination of flex-grow and flex-shrink as well as flex-basics.

.flex-item{
    flex: 1 1 400px
}

In flex I have given 3 values 1st one is flex-grow, flex-shrink and the last one is for flex-basics;