Flexbox, explained with animated gifs

Author: 

Scott Domes

---

Description: 

The basics of flexbox very well explained.

Justify Content:

Flex-start
Flex-end
Center
Space-between
Space-around

Align Items:

flex-start
flex-end
center
stretch
baseline

Align self: It’s basically overriding align-items for one square.

---

Kind:

CSS

---

CSS:

/* Make container into a flex container */
#container {
  display: flex;
}

/* Rotate the main axis */
#container {
  display: flex;
  flex-direction: column;
}

/* Justify content */
#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

// Only this square will be centered.
#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}

---

URL:

• https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.e9bs2lta2

---