Week 6:

Flexbox



Flexbox is a newer method of placing containers to alleviate the hassle of compensating for padding, margins, and borders. All we have to do to make a div a flexbox element is to set its CSS to display: flex.

1
2
3

The direction that content flexes can be adjusted by using the flex-direction CSS property.

1
2
3

We can also flip the order of elements using CSS without adjusting the order of the elements in the HTML using row-reverse or column-reverse.

1
2
3

1
2
3

Wrapping


We can change the behavior of how child elements inside a flexbox container wrap around when the container changes its width by adding flex-wrap: wrap; to our CSS.

1
2
3
4
5
6
7
8
9
10

The default behavior is flex-wrap: nowrap, which is going to cause child elements to reduce their width until their content forces neighboring elements to overflow outside of the flexbox container.

1
2
3
4
5
6
7
8
9
10

Justify Content


We can align content within our flexbox by using the justify-content CSS property.

justify-content: flex-start; is the default behavior aligning content to the left.

1
2
3

justify-content: center;

1
2
3

justify-content: flex-end;

1
2
3

justify-content: space-around; displays the flex items with space before, between, and after.

1
2
3

justify-content: space-between; displays the flex items with space between.

1
2
3

Align Items


We can vertically align the content inside of the flexbox container using the align-items CSS property. The default behavior is align-items: stretch;

1
2
3

align-items: flex-start;

1
2
3

align-items: center;

1
2
3

align-items: flex-end;

1
2
3

Align Content


We can control the vertical distribution of rows of items within the flexbox container using the align-content CSS property. The default behavior is for the items to stretch vertically.

1
2
3
4
5
6
7
8
9
10

align-content: center;

1
2
3
4
5
6
7
8
9
10

align-content: space-between;

1
2
3
4
5
6
7
8
9
10

align-content: space-around;

1
2
3
4
5
6
7
8
9
10

align-content: flex-start;

1
2
3
4
5
6
7
8
9
10

align-content: flex-end;

1
2
3
4
5
6
7
8
9
10

Perfect Centering


It's super easy to perfectly center an element inside of a flexbox container by setting both justify-content and align-items both to center.

 

Flex Item Properties


Any direct child elements inside of a flex container automatically become flex items, which provides them a number of CSS properties to change their behavior.

order is a CSS property that allows us to change the ordering of the flex items without modifying their order in the HTML.

1
2
3
4

flex-grow is a CSS property that specifies how much a flex item will grow relative to the rest of the flex items in that container. Default value is 0.

1
2
3
4

flex-shrink is a CSS property that specifies how much a flex item will shrink relative to the rest of the flex items in that container. Default value is 1.

1
2
3
4
5
6
7
8
9
10

flex-basis is a CSS property that specifies the initial length of a flex item.

1
2
3
4

align-self is a CSS property that allows a flex item to align itself in a different manner than the rest of the items in the flex container.

1
2
3
4

flex is a CSS property that can allow you to explicitely set a flex item to a percentage of the width of the flexbox container.

1
2
3
4

Resources