CSS Flexbox.md

CSS Flexbox.md

Flexbox Cheatsheet CSS-Tricks: A Complete Guide to Flexbox Devhints.io: CSS flexbox cheatsheet MDN: CSS Flexible Box Layout MDN: Controlling Ratios of Flex Items Along the Main Axis

.container {
  display: flex;
  display: inline-flex;

  flex-direction: row;            /* ltr - default */
  flex-direction: row-reverse;    /* rtl */
  flex-direction: column;         /* top-bottom */
  flex-direction: column-reverse; /* bottom-top */

  flex-wrap: nowrap; /* one-line */
  flex-wrap: wrap;   /* multi-line */

  flex-flow: row-reverse wrap; /* Shorthand for "flex-direction" & "flex-wrap" */

  align-items: flex-start; /* vertical-align to top */
  align-items: flex-end;   /* vertical-align to bottom */
  align-items: center;     /* vertical-align to center */
  align-items: stretch;    /* same height on all (default) */

  justify-content: space-between; /* [x    x    x] */
  justify-content: space-around;  /* [ x   x   x ] */
  justify-content: space-evenly;  /* [  x  x  x  ] */
  justify-content: center;     /* [    xxx    ] */
  justify-content: flex-start; /* [xxx        ] */
  justify-content: flex-end;   /* [        xxx] */
  
  /* These are not widely supported yet*/
  justify-content: stretch;    /* behaves like "flex-start"!! */
  justify-content: start;      /* Pack items from the start */
  justify-content: end;        /* Pack items from the end */
  justify-content: left;       /* Pack items from the left */
  justify-content: right;      /* Pack items from the right */

  place-items: center space-between; /* Shorthand for "align-items" & "justify-content" */

  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-around;
  align-content: space-between;
  align-content: stretch;
  align-content: baseline;

  row-gap: 1em;
  column-gap: 1em;
  gap: 1em; /* Shorthand for "row-gap" & "column-gap" */
}

.container > div {
  /* This: */
  flex: 1 0 auto; /* Shorthand for "flex-grow", "flex-shrink" and "flex-basis" */

  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;

  flex: 1;        /* equivalent to flex: 1 1 0%;    */
  flex: 200px;    /* equivalent to flex: 0 1 200px; */
  flex: 1 2;      /* equivalent to flex: 1 2 0%;    */
  flex: 1 200px;  /* equivalent to flex: 1 1 200px; */

  align-self: auto; /* default */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: stretch;
  align-self: baseline;

  order: 1;
}