CSS Flexbox

Flexbox Information

How to Use the CSS Flexbox Properties.

Flexbox Container Properties:

display: flex;
display: inline-flex;
flex-direction: row; */default*/ (main axis horizontally and cross axis vertically)
flex-direction: row-reverse;
flex-direction: column; (main axis vertically and cross axis horizontally)
flex-direction: column-reverse;
flex-wrap: nowrap; */default*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-flow: colum-revers wrap; (this is a shorthand for flex-direction and flex-wrap)

justify-content: flex-start; */default*/ (alone main axis)
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

align-items: stretch; */default*/ (alone cross axis)
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

align-content: flex-start; */default*/ (alone cross axis)
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;

LESSON 1: How to Use Align Items and Align Content

Below is the HTML Code for Lesson 1:

CSS Code for Lesson 1

A Link to the Webpage Using the Below Code for Lesson 1

1 - Lesson 1 Example 1
	No Flexbox properties are applied at this stage.
2 - Lesson 1 Example 2
	In this layout I added the “ display: flex; “ property to the container item.
3 - Lesson 1 Example 3
	In this layout I added the “ flex-basis: 25%; “ property to the four textbox items. Each textbox item now takes up 25% each of the 100% container item.
4 - Lesson 1 Example 4
	In this layout I added the “ align-items: stretch; “ property to the container item. You will see no changes as this is the default aline-item property so it's the same as not using any alige-item property.
5 - Lesson 1 Example 5
	In this layout I added the “ height: 150px; “ property to the four textbox items. The default property for the align-items is stretch so if you specify a height then the textbox will no longer be stretched.
6 - Lesson 1 Example 6
	In this layout I removed the “ height: 150px; “ property of the four textbox items. Then added the “ align-items: flex-start; “ property to the container item.
7 - Lesson 1 Example 7
	In this layout I change the align-items to “ align-items: flex-end; “ property in the container item. This moved the textbox’s to the bottom of the container.
8 - Lesson 1 Example 8
	In this layout I change the align-items to “ align-items: center; “ property in the container item. This moved the textbox’s to the center of the container.
9 - Lesson 1 Example 9
	In this layout I am going to add 4 more textbox items. Then I am going to add the “ flex-wrap: wrap; “ property to the container item and remove the “ align-items: center; “ property from the container item.
10 - Lesson 1 Example 10
	In this layout I am going to add the “ align-items: flex-start; “ property to the container item.
11 - Lesson 1 Example 11
	In this layout I am going to change the “ align-items: flex-start; “ property to the “ align-items: flex-end; “ container item.
12 - Lesson 1 Example 12
	In this layout I am going to change the “ align-items: flex-end; “ property to the “ align-items: center “ in the container item.
13 - Lesson 1 Example 13
	In this layout I am going to change the “ align-items: center; “ property to the “ align-content: center “ in the container item.
14 - Lesson 1 Example 14
	In this layout I have change to the " align-items: baseline; " property in the container item. This property lines up the text in the textboxs along the bottom of the main axis.

LESSON 2:Using the Align and Justify Properties to Align Images.
These are Container Properties

Below is the HTML Code for Lesson 2:

CSS Code for Lesson 2

A Link to the Webpage Using the Below Code for Lesson 2

1 - display: flex;
	In this layout I have 6 images in a container, the container is shown with a red boarder, only using the “ display: flex; ” property.
2 - flex-wrap: nowrap; *The Default
	If I change the width of the container to a smaller property the images overlap the container and also using the " flex-wrap: nowrap; " property.
3 - flex-wrap: wrap;
	Changing to the “ flex-wrap: wrap; ” property then they will wrap inside the container as you see in this image.
4 - flex-wrap: wrap-reverse;
	The " flex-wrap: wrap-reverse; " reverses the order of the lines and puts the images at the bottom of the container.
5 - justify-content: center
	In this layout I have used the “ justify-content: center; ” property in the container section. This aligns the images on the main axis.
6 - justify-content: center
	In this layout I have used the “ justify-content: center; ” property in the main container section but with a 1500px width.
7 - align-items: center
	In this layout I have added the “ align-items: center; ” property in the container section and this aligns the images on the cross axis.
8 - align-items: center
	In this layout I have reduced the container width to 500px using the “ align-items: center; ” property in the container section and this aligns the images on the cross axis, but there is space between the images.
9 - align-content: center;
	In this layout I have reduced the container width to 500px. Using the “ align-content: center; ” property in the container section and this aligns the images on the cross axis, but there is now no space between the images.
10 - align-content: flex-start;
	In this layout I have reduced the container width to 500px. Using the “ align-content: flex-start; ” property in the container section and this aligns the images at the top of the container on the cross axis.
11 - align-content: flex-end
	In this layout I have reduced the container width to 500px. Using the “ align-content: flex-end; ” property in the container section and this aligns the images at the bottom of the container on the cross axis.

LESSON 3: Using the Align and Justify Properties in Flexbox to Align Text Boxes.

Below is the HTML Code for Lesson 3 Example 1 and Example 8:

CSS Code for Lesson 3

A link to the Webpage using the below Code for Lesson 3

1 - margin: 0 auto;
	In the right layout I have created a main container that has a height of 1000px and a width of 700px. The with 4 text boxes inside the container. No flex properties are used at this stage. Using the “ margin: 0 auto; “ the container is in the top center of the web page.
2 - display: flex;
	In the layout to the right all I have done is added the “ display: flex; “ property to the container. Now the 4 text boxes line up on the main axis.
3 - flex-basis: 25%;
	In the layout to the right, I have added the “ flex-basis: 25%; “ property to the 4 text box items. Now the 4 text boxes take up 25% each of the main containers allocated space of 1000px.
4 - justify-content: flex-start;
	In the layout to the right, I have added the “ display: flex; “ and the “ justify-content: flex-start; “ properties to the 4 text box items. Now the 4 text boxes are at the Start of the main axis in each text box item.
5 - justify-content: center;
	In the layout to the right, I have changed “ justify-content: center; “ properties to the 4 text box items. Now the 4 text boxes center on the main axis in each text box item.
6 - justify-content: flex-end;
	In the layout to the right, I have change to “ justify-content: flex-end; “ property to the 4 text box items. Now the text in the 4 boxes line up the end of the text boxes on the cross axis.
7 - align-items: center;
	In the layout to the right, I have added the “ align-items: center; “ property to the 4 text box items. Now the 4 text boxes line up the text on the cross axis in each text box item.
8 - height: 150px;
	In the layout to the right, I have added the “ height: 150px; “ property to the 4 text box items. Now the 4 text boxes are only 150px high as the default is to stretch the text boxes to fill up the container. Now the text box are stuck to the top of the text boxes cross axis.
9 - align-items: flex-end;
	In the layout to the right, I have added the “ align-items: flex-end; “ property to the container. This property aligns the text boxes inside of the container.
10 - justify-content: space-between;
	In the layout to the right, I have removed the " flex-basis: 25%; " property on all the textbox items and the " align-items: flex-end; " to the container item. Then added the “ justify-content: space-between; " property to the container. This property puts equal space between the textbox items. You have to remove the flex-basis property as it filles up all the free space.
11 - justify-content: space-around;
	In the layout to the right, I have change to the “ justify-content: space-around; " property in the container item. This property puts equal space around the textbox items.
10 - justify-content: space-evenly;
	In the layout to the right, I have changed to the “ justify-content: space-evenly; " property in the container item. This property puts even space around the textbox items.
13 - flex-wrap: wrap;
	In the layout to the right, I have added 4 more text boxes (items) and then added the “ flex-wrap: wrap; “ property to the container. This property wraps the extra 4 text boxes around into the same container. It also positions them at the top of the second half of the container.
14 - align-items: flex-end;
	In the layout to the right, I have added the “ align-items: flex-end; “ property to the container. This property puts the text box items at the bottom and bottom half of the container.
15 - align-items: center;
	In the layout to the right, I changed the value to “ align-items: center; “ property of the container. This property puts the text box items at the center of the wrapped rows of the container.
16 - align-content: flex-start;
	In the layout to the right, I changed the value to “ align-content: flex-start; “ property of the container. This property puts the text box items at the top of the wrapped rows of the container.
17 - align-content: center;
	In the layout to the right, I changed the value to “ align-content: center; “ property of the container. This property puts the text box items at the center of the wrapped rows of the container.
18 - align-content: space-between;
	In the layout to the right, I changed the value to “ align-content: space-between; “ property of the container. This property splits the text box items to the top and bottom of the wrapped rows of the container.
19 - align-content: space-around;
	In the layout to the right, I changed the value to “ align-content: space-around; “ property of the container. This property creates space around both of the rows of the container.
20 - align-content: space-evenly;
	In the layout to the right, I changed the value to “ align-content: space-evenly; “ property of the container. This property creates space evenly between the text box rows of the container.

LESSON 4: Justify a Single Flex Item.

Below is the HTML Code for Lesson 4:

CSS Code for Lesson 4

A link to the Webpage using the below Code for Lesson 4

1 - width: 150px; and height: 150px;
	In the layout to the right, I started with the “ display: flex; “ property in the container and the 4 text boxes. Then I added the width and height of 150px properties. Also added the “ justify-content: center; " and " align-items: center; “ properties to the text boxes.
2 - margin:0 0; and margin-left: auto;
	In this layout, add the “ margin: 0 0; “ property to the first text box and then a the “ margin-left: auto; “ to the second text box.
3 - margin:0 0; and margin-left: auto;
	In this layout, add the “ margin: 0 0; “ property to the first text box and then a the “ margin-left: auto; “ to the third text box and so on for the gap to move on.
4 - margin:0 0; and margin-left: auto; and margin-right:auto;
	In this layout, add the “ margin: 0 0; “ property to the first text box and then the “ margin-left: auto; “ plus the “ margin-right: auto; “ to the second text box. Then you get the gap to be the same on either side of the second text box. Or you can use the margin shorthand property “ margin: 0 auto; “ the margin shorthand starts from the top the moving around in a clockwise direction. If you only use 2 values then the first value represents top & bottom and the second value represents left & right.
5 - margin-right: auto; and margin-left: auto;
	In this layout, add the “ margin-right: auto; “ property to the first text box and then a the “ margin-left: auto; “ to the fourth text box.
6 - align-self: flex-end;
	In this layout , add the “ align-self: flex-end; “ property to the 4th text box. Remember the align-self property always works on the cross axis.
7 - align-self: center;
	In this layout, change the value to the “ align-self: center; “ property in the 4th text box.

LESSON 5: Put 2 or More Containers in the Same Row.

Below is the HTML Code for Lesson 5:

CSS Code for Lesson 5

A link to the Webpage using the below Code for Lesson 5

Lesson 5 Example 1
	In this layout there are no flexbox properties used.
Lesson 5 Example 2
	In this layout I have added the " display: flex; " property to the container item"
Lesson 5 Example 3
	In this layout I have changed the flexbox property to " dispaly: inline-flex; ". You will see that the container items are now on the same row next to each other. They have also moved to the start end of the webpage.

LESSON 5: How to Use Flex Direction.

Below is the HTML Code for Lesson 6:

CSS Code for Lesson 6

A link to the Webpage using the below Code for Lesson 6

Lesson 6 Example 1
	In this layout there are no flexbox properties added.
Lesson 6 Example 2
	In this layout I have added the " display: flex; " property. Now the text boxes line up next to each other on the main axies.
Lesson 6 Example 3
	In this layout I have added the " flex-direction: row; " property and as you can see nothing has changed. This is becasue of the "row" value bing the default value for flex-direction so nothing will change.
Lesson 6 Example 4
	In this layout I have changed the value to the " flex-direction: row-reverse; " property. Now you will see the direction of the row change and they start from the end of the container.
Lesson 6 Example 5
	In this layout I have changed the value to the " flex-direction: column; " property. Now you will see the text boxes are lined up in columns. This also looks the same as Example 1.
Lesson 6 Example 6
	In this layout I have changed the value to the " flex-direction: column-reverse; " property. Now you see the direction of the columns change and they start from the bottom of the container.