css-flexbox.md

   1 ---
   2 title: CSS flexbox
   3 category: CSS
   4 layout: 2017/sheet
   5 updated: 2020-06-13
   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;    /* [xxx        ] */
  57   justify-content: center;        /* [    xxx    ] */
  58   justify-content: flex-end;      /* [        xxx] */
  59   justify-content: space-between; /* [x    x    x] */
  60   justify-content: space-around;  /* [ x   x   x ] */
  61   justify-content: space-evenly;  /* [  x  x  x  ] */
  62 ```
  63
  64 ```css
  65 }
  66 ```
  67 {: .-setup}
  68
  69 ### Child
  70
  71 ```css
  72 .container > div {
  73 ```
  74 {: .-setup}
  75
  76 ```css
  77   /* This: */
  78   flex: 1 0 auto;
  79
  80   /* Is equivalent to this: */
  81   flex-grow: 1;
  82   flex-shrink: 0;
  83   flex-basis: auto;
  84 ```
  85
  86 ```css
  87   order: 1;
  88 ```
  89
  90 ```css
  91   align-self: flex-start;  /* left */
  92   margin-left: auto;       /* right */
  93 ```
  94
  95 ```css
  96 }
  97 ```
  98 {: .-setup}
  99
 100
 101 ## Tricks
 102
 103 ### Vertical center
 104
 105 ```css
 106 .container {
 107   display: flex;
 108 }
 109
 110 .container > div {
 111   width: 100px;
 112   height: 100px;
 113   margin: auto;
 114 }
 115 ```
 116
 117 ### Vertical center (2)
 118
 119 ```css
 120 .container {
 121   display: flex;
 122   align-items: center;     /* vertical */
 123   justify-content: center; /* horizontal */
 124 }
 125 ```
 126
 127 ### Reordering
 128
 129 ```css
 130 .container > .top {
 131  order: 1;
 132 }
 133
 134 .container > .bottom {
 135  order: 2;
 136 }
 137 ```
 138
 139 ### Mobile layout
 140
 141
 142 ```css
 143 .container {
 144   display: flex;
 145   flex-direction: column;
 146 }
 147
 148 .container > .top {
 149   flex: 0 0 100px;
 150 }
 151
 152 .container > .content {
 153   flex: 1 0 auto;
 154 }
 155 ```
 156
 157 A fixed-height top bar and a dynamic-height content area.
 158
 159 ### Table-like
 160
 161 ```css
 162 .container {
 163   display: flex;
 164 }
 165
 166 /* the 'px' values here are just suggested percentages */
 167 .container > .checkbox { flex: 1 0 20px; }
 168 .container > .subject  { flex: 1 0 400px; }
 169 .container > .date     { flex: 1 0 120px; }
 170 ```
 171
 172 This creates columns that have different widths, but size accordingly according
 173 to the circumstances.
 174
 175 ### Vertical
 176
 177
 178 ```css
 179 .container {
 180   align-items: center;
 181 }
 182 ```
 183
 184 Vertically-center all items.
 185
 186 ### Left and right
 187
 188 ```css
 189 .menu > .left  { align-self: flex-start; }
 190 .menu > .right { align-self: flex-end; }
 191 ```
 192
 193 ## References
 194 {: .-one-column}
 195
 196  * [MDN: Using CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
 197  * [Ultimate flexbox cheatsheet](https://www.sketchingwithcss.com/samplechapter/cheatsheet.html)