css-flexbox.md

   1 ---
   2 title: CSS flexbox
   3 category: CSS
   4 layout: 2017/sheet
   5 updated: 2017-08-29
   6 prism_languages: [css]
   7 weight: -3
   8 ---
   9
  10 ### Simple example
  11
  12 ```css
  13 .container {
  14   display: flex;
  15 }
  16 ```
  17
  18 ```css
  19 .container > div {
  20   flex: 1 1 auto;
  21 }
  22 ```
  23
  24 ### Container
  25
  26 ```css
  27 .container {
  28 ```
  29 {: .-setup}
  30
  31 ```css
  32   display: flex;
  33   display: inline-flex;
  34 ```
  35
  36 ```css
  37   flex-direction: row;            /* ltr - default */
  38   flex-direction: row-reverse;    /* rtl */
  39   flex-direction: column;         /* top-bottom */
  40   flex-direction: column-reverse; /* bottom-top */
  41 ```
  42
  43 ```css
  44   flex-wrap: nowrap; /* one-line */
  45   flex-wrap: wrap;   /* multi-line */
  46 ```
  47
  48 ```css
  49   align-items: flex-start; /* vertical-align to top */
  50   align-items: flex-end;   /* vertical-align to bottom */
  51   align-items: center;     /* vertical-align to center */
  52   align-items: stretch;    /* same height on all (default) */
  53 ```
  54
  55 ```css
  56   justify-content: flex-start; /* horizontal alignment - default */
  57   justify-content: flex-end;
  58   justify-content: center;
  59 ```
  60
  61 ```css
  62 }
  63 ```
  64 {: .-setup}
  65
  66 ### Child
  67
  68 ```css
  69 .container > div {
  70 ```
  71 {: .-setup}
  72
  73 ```css
  74   /* This: */
  75   flex: 1 0 auto;
  76
  77   /* Is equivalent to this: */
  78   flex-grow: 1;
  79   flex-shrink: 0;
  80   flex-basis: auto;
  81 ```
  82
  83 ```css
  84   order: 1;
  85 ```
  86
  87 ```css
  88   align-self: flex-start;  /* left */
  89   margin-left: auto;       /* right */
  90 ```
  91
  92 ```css
  93 }
  94 ```
  95 {: .-setup}
  96
  97
  98 ## Tricks
  99
 100 ### Vertical center
 101
 102 ```css
 103 .container {
 104   display: flex;
 105 }
 106
 107 .container > div {
 108   width: 100px;
 109   height: 100px;
 110   margin: auto;
 111 }
 112 ```
 113
 114 ### Vertical center (2)
 115
 116 ```css
 117 .container {
 118   display: flex;
 119   align-items: center;     /* vertical */
 120   justify-content: center; /* horizontal */
 121 }
 122 ```
 123
 124 ### Reordering
 125
 126 ```css
 127 .container > .top {
 128  order: 1;
 129 }
 130
 131 .container > .bottom {
 132  order: 2;
 133 }
 134 ```
 135
 136 ### Mobile layout
 137
 138
 139 ```css
 140 .container {
 141   display: flex;
 142   flex-direction: column;
 143 }
 144
 145 .container > .top {
 146   flex: 0 0 100px;
 147 }
 148
 149 .container > .content {
 150   flex: 1 0 auto;
 151 }
 152 ```
 153
 154 A fixed-height top bar and a dynamic-height content area.
 155
 156 ### Table-like
 157
 158 ```css
 159 .container {
 160   display: flex;
 161 }
 162
 163 /* the 'px' values here are just suggested percentages */
 164 .container > .checkbox { flex: 1 0 20px; }
 165 .container > .subject  { flex: 1 0 400px; }
 166 .container > .date     { flex: 1 0 120px; }
 167 ```
 168
 169 This creates columns that have different widths, but size accordingly according
 170 to the circumstances.
 171
 172 ### Vertical
 173
 174
 175 ```css
 176 .container {
 177   align-items: center;
 178 }
 179 ```
 180
 181 Vertically-center all items.
 182
 183 ### Left and right
 184
 185 ```css
 186 .menu > .left  { align-self: flex-start; }
 187 .menu > .right { align-self: flex-end; }
 188 ```
 189
 190 ## References
 191 {: .-one-column}
 192
 193  * [MDN: Using CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
 194  * [Ultimate flexbox cheatsheet](http://www.sketchingwithcss.com/samplechapter/cheatsheet.html)