Skip to content

 

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: