# Week 6: Flexbox

Agenda

Week 6 Tutorial Files (opens new window)
CSS Flexbox
Alignment and Proximity

# CSS Flexbox

In recent years another method for creating layout was added to CSS: Flexbox. It starts with using display: flex and then you define two parts the container and the items inside the container.

Used for aligning multiple elements along ONE axis
There are two main parts: flexbox containers and flexbox items
Getting Started with Flexbox video (opens new window)

TIP

Whenever you are adding display:flex to an element you are really just talking about how to position the children elements of that element.

# Flexbox Container Properties

display: flex
flex-direction property can be row, row-reverse, column, column-reverse
justify-content property (along main axis) can be flex-start, flex-end, center, space-around, space-between and space-evenly
align-items (on cross-axis) can be flex-start, flex-end, center, stretch, baseline
flex-wrap can be wrap, no-wrap, wrap-reverse

# Flexbox Item Properties

flex-basis initial size for an item
flex-grow controls the ratio for how items grow relative to each other
flex-shrink controls the ratio of how items shrink relative to each other
flex is a shorthand for flex-basis, flex-grow and flex-shrink
align-self to override container's align-items value for one item
order assign exact position of each item.

.container {
  /* this is the flexbox container */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.container .item {
  /* these are the flexbox items */
  flex-basis: auto;
  flex-grow: 0;
  /* these two will keep original content sizes */
  flex-basis: 0;
  flex-grow: 1;
  /* these two will start the items at width 0 and then expand them equally */
  flex-shrink: 1;
  /* shrink them equally as the width of the container is reduced */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Here is an excellent free online course for Flexbox.io (opens new window)
Visual Guide to Flexbox Properties (opens new window)

# More Resources

# To Do Before Week 7

Self-Directed To Do

Watch the following videos before week 7:

Complete Week 6: Responsive Design with Flexbox

← Week 5: Mobile First Responsive Week 7: CSS Grid →