Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flexbox Cheatsheet

Display: Flex

Makes container use flex

#container {  display: flex;}

Flex Direction

column, row-reverse and column-reverse

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

Justify Content

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

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

Align Items

flex-start flex-end center stretch baseline

Align Self

#container {  align-items: flex-start;}

Example

.flex-grid {
  display: flex;
}
.col {
  flex: 1;
}
.col-third {
  width: 25%;
}

Break into a column for small screens

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}
<div class="flex-grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="flex-grid">
  <div class="col-third"></div>
  <div class="col-third"></div>
  <div class="col-third"></div>
</div>

Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment