Post

Flexbox Cheatsheet

Posted
By Daniel Florido 2 min read

Flexbox Cheatsheet

Flex Container

  • display: flex | inline-flex
  • flex-direction: row | row-reverse | column | column-reverse
  • flex-wrap: nowrap | wrap | wrap-reverse
  • justify-content: flex-start | flex-end | center | space-between | space-around
  • align-items: flex-start | flex-end | center | baseline | stretch
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch

Flex Items

1
2
3
4
5
6
7
8
9
10

display: flex | inline-flex
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Flex Items
order: { index: Number }
flex: { flex-grow: Number } { flex-shrink: Number } { flex-basis } Urls to: flex-grow, flex-shrink, and flex-basis.
align-self: auto | flex-start | flex-end | center | baseline | stretch

Responsive 2 Column

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

.row {
  display: flex;
  column-gap: 20px;
  row-gap: 20px;
}

.row .col-6 {
  width: 50%;
}
@media (max-width: 736px) {
  .row {
    flex-direction: column;
  }

  .row .col-6 {
    width: 100%;
  }
}

1
2
3
4

<div class="row">
  <div class="col col-6">//some content</div>
  <div class="col col-6">//some content</div>
</div>

older gist

fiddle for margins and paddings on the parent and child elements

http://jsfiddle.net/7XD8s/ padding:5px; /* this on the parent / margin:5px; / and that on the child, will result in a 10px gap */

Flexbox Cheatsheet

Flex Container

  • display: flex | inline-flex
  • flex-direction: row | row-reverse | column | column-reverse
  • flex-wrap: nowrap | wrap | wrap-reverse
  • justify-content: flex-start | flex-end | center | space-between | space-around
  • align-items: flex-start | flex-end | center | baseline | stretch
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch

Flex Items

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.