CSS Flex Systems Cheatsheet

Posted Monday, March 7, 2022 by Sri.Tagged MEMO, CHEATSHEET
EDIT STATUS:new

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