All about flex box ( very comprehensive)

TOPICS FOR FLEXBOX

1)  We have different types of display properties as can be seen in the picture below and we have 2 float properties too. Now there's something called display flex property too, and we will learn about them in this slide.

 

2) flexbox has a parent-child relationship, where we have flex-containers and flex-items. Whenever we apply display: flex; on any element, that particular element becomes the flex-container and all its' "DIRECT CHILDREN" becomes flex-items.

3) Example to illustrate the above explanation. In this example div with id=parent is the flex-container and all the other divs' are flex-items

CSS file of when no display: flex; property is used on the parent div

We can see that all the tree children has covered the parent( with background green) as all of them are block level elements(divs).

CSS file of when display:flex; property is used on the parent div

Now when we have display: flex property; to the parent div ( with background green) , the parent becomes the flex-container and all its' direct children( the 3 other divs') has become the flex-items.

4) The flexbox model works in 2 directions

5) facts about flex property and the flex-direction property which is used along with display: flex; in the parent element.

Let us use flex-direction property in our parent div and understand its' use case.

CASE 1) When flex-direction: row;

We have given the parent div the height of 400px and mentioned flex-direction: row; , by doing this our primary axis has become the x-axis , now the flex-items( the children) will only take as much space(width) which is required by their content in the x-axis(primary-axis) but in the y-axis( secondary-axis), the flex item( children) will the full available space(height) of the flex-container( parent element)

As we can see in the output that the flex-items/children are only taking the width that is required for their content in the primary axis(x-axis), because we have given flex-direction: row; . And we can also see that in the secondary-axis( y-axis) the flex-items/children are taking the full available space (height) of the flex-container/parent( green background) , as flex-direction:row, if flex-direction: column; , then y-axis would have become the primary axis as we will see in CASE 2

CASE 2) When flex-direction: column;

As we have given the flex-direction : column; , the y-axis will become the primary-axis, and the flex-items(children) will only take as much space(height) which is required for their content, but in the secondary-axis ( x-axis) the flex-items( children) will take the full available space( width) of the flex-container ( parent element)

We can see in the output that flex-items/ children are only taking as much height as required by their content in the primary-axis(y-axis) because we have mentioned flex-direction: column; . And we can also see that the flex-items/children are taking the full available space ( width) of the flex-container/ parent ( green colour background) in the secondary-axis ( x-axis) because flex-direction: column.

6) We will now learn what is flex-wrap property and what does it do. The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Now in this example we have 5 flex-items inside the flex container

CASE 1) When flex-wrap is not used and we have given our flex-items( children) width of 40%. 40% width means each children will try and occupy only 40% width of the parent container( flex-container) since parent width is 100%. So naturally since there are 5 flex-items (children) first 2 child should be in the first row (since 40+40 = 80% of the width of the parent and parent is only 100%) and the next 2 children should be placed in the 2nd row and the last one child should be in the 3rd row. But this doesn't happen . All the children will try to squeeze in a single row and overflow the width of the parent container ( flex-container). That's the reason we use flex-wrap property.

As expected , in our output the flex-items ( children) has overflown its parent container width ( since 40x5= 200% and our parents' width was only 100 %) as it has tried to squeeze in a single row and our parent is completely hidden by the children. To overcome this problem we will use flex-wrap: wrap; in case 2. By default the value of flex-wrap: unwrap;

CASE 2) When flex-wrap: wrap; , property is used.

Now since the flex-wrap : wrap; property is used the 1st two children takes 80%( 40+40) of the width of the parent and since 20% of the parent width is still there we can see it in our output( the green background). The next 2 children will occupy 80% width of the parent in next line. And the last child will occupy only 40% of the parents' width in the line below ( it is not visible in the screenshot but the output will be that only trust me).

7) flex-direction : row-reverse;

8) flex-direction: column-reverse;

9)  flex-flow: property ,  Short-hand for flex-direction and flex-wrap

10) justify-content: property helps us in aligning the flex-items (children) inside the flex-container ( parent) in the PRIMARY_AXIS . Let us illustrate examples to understand the use case of justify-content: property.

This is our HTML file:

CASE 1) When justify-content is not used. Btw justify-content: flex-start is the default value of justify-content property, so even if we don't mention it explicitly the flex-items are already in justify-content: flex-start; by default.

CASE 2) When we give justify-content: flex-start; ( default value) the output will remain same as the output above as in the above example too justify-content: flex-start; property was used by default even if we didn't mention it explicitly.

CASE 3) When justify-content : flex-end is used, the flex-items ( children) as a whole will align to the end of the flex-container ( parent) in the primary-axis . In this case since we have given flex-direction: row; , so the primary-axis is x-axis

We can see that the flex-items ( children as a whole) has aligned to the end of the parent container in the primary-axis ( x-axis in this example) .

CASE 4) justify-content: center;

CASE 5) justify-content: space-between;

The flex-items (children) will align in such a way that the first child and the last child will stick to the edges of the parent and the remaining child will be in between them but there will be space b/w every child( flex-items)

CASE 6) justify-content: space-around;

The output is little bit similar to space-between except that the first and last child will not stick to the edges of their parent container (flex-container)

CASE 7)  justify-content: space-evenly;

As the name suggests , flex-items will be spaced evenly.

NOTE* 

 

When we write #parent > *{

                                                    width: 70px;

                                               }

this means all the direct child inside the parent container will have the width of 70px.

CASE 8) justify-content property for flex-flow: column wrap;

11) Alignment of flex-items in the SECONDARY-AXIS. This can be achieved by using 2 properties. 1) align-content 2) align-items.

1st property- align-content property 

by using align-content property the content area of the flex-items will align( move) along the secondary-axis , however each each individual flex-item (children) will not move. Now to understand what is a content area, we will illustrate an example.

ILLUSTRATION OF CONTENT AREA:

We have created a last div element with id="marker" outside the parent div. This div with the id marker is purely for the purpose of making the CONTENT AREA of the flex items visible to our eyes.

The brown colour bordered rectangle inside which all our flex-items is situated is the content area. Basically content area means the total area that our flex-items are taking. Now that we know what content area is let's move on to different cases of align-content property.

CASE 1) align-content: flex-start is the default value, and even if we don't explicitly mention it, it is already applied by default.

CASE 2) align-content: flex-end;

The content area as a whole has aligned to the end of the flex-container in the secondary-axis ( in this case Y-axis)

CASE 3) align-content: center;

2nd property: align-items property

by using align-items property we can align each individual flex-items (children)  BUT the flex-items only move within its' content area and NOT within its' parent container (flex-container)

 CASE 1) align-item: flex-end;

We can see the the flex-items has aligned (moved to the end of the CONTENT AREA( i.e., the brown border rectangle) and not the parent/ flex-container ( i.e., the green background).

CASE 2) align-item: center;

CASE 3) flex-flow: column wrap & align-content: flex-end & align-items: flex-start;

We can see that as flex-flow: column wrap, the primary-axis is y-axis, align-content: flex end; so the entire content area of the flex-items will align to end of the parent container and since align-item: flex-start; inside the content area the flex-items will align from the start.

CASE 4) align-content: center; and align-items: center;

12) Flex-items properties

Till now we have been learning about the property of the flex-container i.e., the parent. In this part we will learn about the properties of the flex-items i.e., the children.

There are in total 6 properties for flex-items. They are:

i) order - The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

ii) flex-basis -The flex-basis property specifies the initial length of a flexible item.

iii) flex-grow - The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

iv) flex-shrink - The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

v) flex ( short-hand of basis, grown and shrink) - The flex property is a shorthand property for:

• flex-grow
• flex-shrink
• flex-basis

vi) align-self - The align-self property specifies the alignment in the block direction for the selected item inside a flexbox or grid container.

Property 1 - order

-by default the order is 0 . order property specifies the order in which the flex-items will be placed inside the parent container

CASE 1)  When all the items have different order value

In the output , the child with the least order value will be placed first and the highest order value will be placed last. The order property works in ascending order of the value.

CASE 2) When all the items have the same order value

All items have order: 100;

If all items have the same order value, like in this example the order value of every item is 100, so the items will be placed according to how they were created in the HTML document.

CASE 3) order: -1;

Here child 4 has been given the order: -1;

Since item 4 has been given order value of -1 ,which is the least order value value among the rest of the flex-items , therefore it will be placed first and rest of the items will be placed according to their order value behind child 4.

Property 2) flex-basis property

- When flex-flow is row wrap, we can increase/decrease the area (width) of the flex-items in the primary ( x-axis) using the flex-basis property. We don't need to explicitly mention the width: property, flex-basis is there to do the work.

- When flex-flow is column wrap, the flex-basis property is used to increase/ decrease the area ( height ) of the flex-items in the primary-axis ( y-axis) . No need to explicitly mention height: property flex-basis will do the work.

CASE 1) When flex-flow: row wrap; & flex-basis: 70px for all the flex-items.

The area ( width) of each flex-item is 70px in the primary-axis ( x-axis).

CASE 2) when flex-flow: column wrap; & flex-basis is 70px for all flex-items.

The area ( height) of each flex-items is 70px in the primary-axis ( Y-axis).

This part is just a revision for the previous properties:

Property 3) flex-grow: property

- when there is available space in the flex-container( parent) , if we give any flex-item or multiple flex-items flex-grow property, that item/ items will actually occupy the remaining space in the parent container and become more in size than the other flex-items ( children)

- but the only criteria is there has to be space in the parent container or else the flex-grow property will have no effect.

- when the parent container has more number of children and doesn't have space, flex-grow property will have no impact.

CASE 1) flex-grow: 1; in child #1 only

CASE 2) flex-grow: 1; in child#1 as well as child#2

Child 1 and child 2 are bigger in size than rest of the items and the both have filled the remaining area of the parent container.

CASE 3) when the container has more number of children and doesn't have space.

Even though we gave flex-grow: 10000; to child#1 but it has no impact since there was no space in the parent container.

CASE 4) when flex-flow: row wrap; & flex-grow: 1; in child#1

Property 4) flex-shrink: property

- flex-shrink is the opposite of flex-grow.

- but in case of flex-shrink there has to be overflow of at-least one of the flex-item from the flex-container or else shrink won't work.

CASE 1) when there is no overflow and child#1 is given flex-shrink: 1; 

Output: shrink doesn't work cuz there is no overflow.

CASE 2) now when we have removed the flex-wrap and added a fifth child and each item( child) is given of 25% , so 4 of the children should be in first row since 25x4 =100% And the last item should be in the next line. but since there is no wrap property the fifth child has squeezed in the same row with the other items and overflown the parent container since 25x5 = 125% which is 25% more than the width of the parent container.

the 5th child has squeezed in at the last and overflown the parent container, that's why we cannot see any dark green background of the parent flex-container.

CASE 3) now if child#2 is given flex-shrink: 10;

Output: child 2 has shrank since there was overflow of child 5 and flex-shrink only work when there is overflow.

Property 5) flex - shorthand property for flex-grow, flex-shrink and flex-basis , all three together in one small property.

 The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

...
Three-value syntax: the values must be in the following order:

• a valid value for flex-grow .
• a valid value for flex-shrink .
• a valid value for flex-basis .

Property 6) align-self: property

- it is used for aligning each individual flex-items differently inside the content Area and not the parent container.

CASE 1) align-self: flex-start is given to child#4

Output: item 4 is in the start of the content area since child 4 was given align-self: flex-start;

CASE 2) align-self: flex- start; given to child#1 and align-self: flex-end; given to child#4

Output: a) child#1 - start of the content area since align-self: flex-start.

b) child#4 - end of the content area since align-self: flex-end.