CSS Flex Systems Cheatsheet

Grabbed this from some other code...need to turn this into a reference.

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*:

  SYSTEM SHELL LAYOUT EXAMPLES
  inspired by https://web.dev/one-line-layouts/

  this css isn't imported by anything

:*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* CENTERED EVERYTHING
   place-items: center
   <parent>
     <stuff>
*/
.urui-01.parent {
  display: grid;
  place-items: center; /* sets align-items, justify-items */
}

/* DECONSTRUCTED PANCAKE
   flex: 0 1 <baseWidth>
   <parent>
     <box>
     <box>
     <box>
 */
.urui-02.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.urui-02.box {
  flex: 0 1 150px; /* grow, shrink, basis */
  margin: 5px;
}

/* SIDEBAR+CONTENT
   grid-template-columns: minmax(<min>, <max>) ...
   <parent>
     <sidebar><content>
Explore on CodePen
*/
.urui-03.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr; /* 150px min, 25% otherwise */
}

/* STICKY FOOTER PANCAKE
   grid-template-rows: auto 1fr auto
   <parent>
     <header>
     <main>
     <footer>
*/
.urui-04.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* CLASSIC HOLY GRAIL
   grid-template: auto 1fr auto / auto 1fr auto
   <parent>
     <header>
     <left><main><right>
     <footer>
   grid lines start at 1 and end at 13
   |01|02|03|04|05|06|07|08|09|10|11|12|
   1  2  3  4  5  ...     ...     ...  13
*/
.urui-05.parent {
  display: grid;
  width: '100vw'; /* force to screen size */
  height: '100vh';
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
}
.urui-05.head {
  grid-column: 1 / 4;
}
.urui-05.left {
  grid-column: 1 / 2;
}
.urui-05.main {
  grid-column: 2 / 3;
}
.urui-05.right {
  grid-column: 3 / 4;
}
.urui-05.foot {
  grid-column: 1 / 4;
}

/* 12-SPAN GRID
   grid-template-columns: repeat(12, 1fr)
   <parent>
     <span-12>
     <span-6>
     <span-4>
     <span-2>
    note: this layout does not flexwrap like bootstrap
*/
.urui-06.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.urui-06.span-12 {
  grid-column: 1 / span 12;
}
.urui-06.span-6 {
  grid-column: 1 / span 6;
}
.urui-06.span-4 {
  grid-column: 4 / span 4;
}
.urui-06.span-2 {
  grid-column: 3 / span 2;
}
.urui-06.section {
  display: grid;
  place-items: center;
  text-align: center;
}

/* REPEAT AUTO MINMAX (RAM)
   grid-template-columns: repeat(auto-fit,minmax)
   repeat() has several forms. this one says:
   "repeat all children with width 150px or all space"
   which places things side-by-side unless they would be less than 150px
   <parent>
     <div>
     <div>
     ...
*/
.urui-07.parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* LINE UP WITH SPACING
   justify-content:space-between
   padding applied only to middle elements, not extreme left/right
   <parent>
     <card>...</card>
     <card>...</card>
     <card>...</card>
*/
.urui-08.parent {
  height: auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.urui-08.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}

/* CLAMPED WIDTHS
   clamp(min,actual,max) - less browser support
   width is actual, clamps to min and max
   <parent>
     <card>
*/
.urui-09.parent {
  display: grid;
  place-items: center;
}
.urui-09.card {
  width: clamp(23ch, 50%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* DEFINE ASPECT RATIO
   aspect-ratio: width / height - less browser support
   <parent>
     <card>
       <visual>
*/
.urui-10.parent {
  display: grid;
  place-items: center;
}
.urui-10.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.urui-10.visual {
  aspect-ratio: 16 / 9;
}