Flex box
Parent element properties
display: flex;
Use CSS to position elements in a flexible way. Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
width: 100%;
display: flex;
}
.item {
height: 100px;
width: 40px;
}
.red {
background: red;
}
.green {
background: green;
}
.pink {
background: pink;
}
.yellow {
background: yellow;
}
flex-direction
Used to align items in a row or column.
Adding display: flex to an element turns it into a flex container.
This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row, row-reverse or column, column-reverse.
Creating a row will align the children horizontally, and creating a column will align the children vertically.
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
7
.container {
width: 100%;
display: flex;
flex-direction: row;
}
/*rest of the css properties are same*/
justify-content
Use to align elements along the main axis.
- For rows, the main axis is a horizontal line and
- For columns, it is a vertical line.
Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this.
flex-start:
Aligns items to the start of the flex container.
- For a
row, this pushes the items to the left of the container. - For a
column, this pushes the items to the top of the container.
This is the default alignment if no justify-content is specified.
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
flex-end:
Aligns items to the end of the flex container.
- For a
row, this pushes the items to the right of the container. - For a
column, this pushes the items to the bottom of the container.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
space-between:
Aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
space-around:
Similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
space-evenly:
Distributes space evenly between the flex items with a full space at either end of the flex container.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
align-items
The align-items property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis.
Flex containers also have a cross axis which is the opposite of the main axis.
- For rows, the cross axis is vertical and
- For columns, the cross axis is horizontal.
CSS offers the align-items property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.
The different values available for align-items include:
flex-start:
Aligns items to the start of the flex container.
- For rows, this aligns items to the top of the container.
- For columns, this aligns items to the left of the container.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
}
flex-end:
Aligns items to the end of the flex container.
- For rows, this aligns items to the bottom of the container.
- For columns, this aligns items to the right of the container.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
}
center:
Align items to the center.
- For rows, this vertically aligns items (equal space above and below the items).
- For columns, this horizontally aligns them (equal space to the left and right of the items).
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
stretch:
Stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no align-items value is specified.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
}
baseline:
Align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
align-items: baseline;
}
flex-wrap
This property is used to Wrap a Row or Column also.
nowrap:
This is the default setting, and does not wrap items.
wrap:
Wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.
wrap-reverse:
Wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column.
1
2
3
4
5
6
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item pink"></div>
<div class="item yellow"></div>
</div>
1
2
3
4
5
6
.container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap; /* wrap OR reverse */
}
Child element properties
flex-shrink
It allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.
The flex-shrink property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container.
For example, if one item has a flex-shrink value of 1 and the other has a flex-shrink value of 3, the one with the value of 3 will shrink three times as much as the other.
1
2
3
4
5
6
<div class="container">
<div class="item item1 red"></div>
<div class="item item2 green"></div>
<div class="item item3 pink"></div>
<div class="item item4 yellow"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
width: 100px; /*change*/
display: flex;
flex-direction: row;
}
.item {
height: 100px;
width: 40px;
}
/*change*/
.item1 {
flex-shrink: 1;
}
/*change*/
.item2 {
flex-shrink: 3;
}
/*color css remains same*/
flex-grow
The opposite of flex-shrink is the flex-grow property. Recall that flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands.
Using a similar example from the last challenge, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.
1
2
3
4
5
6
<div class="container">
<div class="item item1 red"></div>
<div class="item item2 green"></div>
<div class="item item3 pink"></div>
<div class="item item4 yellow"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
width: 200px;
display: flex;
flex-direction: row;
}
.item {
height: 100px;
width: 40px;
}
/*change*/
.item1 {
flex-grow: 1;
}
/*change*/
.item2 {
flex-grow: 3;
}
flex-basis
The flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.
The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.
1
2
3
4
5
6
<div class="container">
<div class="item item1 red"></div>
<div class="item item2 green"></div>
<div class="item item3 pink"></div>
<div class="item item4 yellow"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.container {
width: 200px;
display: flex;
flex-direction: row;
}
.item {
height: 100px;
width: 40px;
flex-basis: 40px;
}
flex Shorthand Property
There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.
For example,
flex: 1 0 10px; will set the item to
flex-grow: 1;flex-shrink: 0;flex-basis: 10px;
The default property settings are flex: 0 1 auto;.
align-self
The final property for flex items is align-self. This property allows you to adjust each item’s alignment individually, instead of setting them all at once.
align-self accepts the same values as align-items and will override any value set by the align-items property.