CSS Flex Systems Cheatsheet

Main organizing principle of Flex Box is the main axis along which items are placed. The main container has the flex settings, and child items set their own basis, shrink, grow properties.

The origin of the main-axis and cross-axis depends on the flex-direction properties.

flex-direction: row row-reverse column column-reverse

Each axis has its own alignment property:

• justify-content for main axis: flex-start flex-end center space-between space-around space-evenly
• align-items, align-self, and align-content for cross axis

There are two ways to control the size of items along the main axis to distribute the space used by each item.

• flex-basis defines the default size
• flex-shrink default 1 specifies how much each item will shrink proportionally to fit. It's a weight. 0 means no shrink.
• flex-grow default 0 specifies how after everyone is shrunk to fit, how any extra space is allocated.

There's also a gap property that can be used to separate items.

It's important to note that there's various sizing properties that are independent of the flex itself. See css sizing.

OLDER NOTES

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;
}