How Flexbox works — explained with big, colorful, animated gifs

Scott Domes
Jan 31, 2017 · 5 min read

Property #1: Display: Flex

#container {
display: flex;
}

Property #2: Flex Direction

#container {
display: flex;
flex-direction: column;
}

Property #3: Justify Content

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

Property #4: Align Items

Property #5: Align Self

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

Conclusion

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Scott Domes

Written by

Developer. Author of Progressive Web Apps with React.

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead