Skip to content

Instantly share code, notes, and snippets.

@zaydek-old

zaydek-old/flex-primer.html

Last active May 24, 2018 09:39
Show Gist options
  • Save zaydek-old/3df80b2a4f633d252beb260299e3d70a to your computer and use it in GitHub Desktop.
Save zaydek-old/3df80b2a4f633d252beb260299e3d70a to your computer and use it in GitHub Desktop.
Download ZIP
A *simple* primer for understanding Flexbox with semantic classes https://zaydek.com/flex
Raw
flex-primer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
/* twitter colors */
--orange : #FF691F;
--yellow : #FAB81E;
--lightgreen: #7FDBB6;
--green : #19CF86;
--lightblue : #91D2FA;
--blue : #1B95E0;
--grey : #ABB8C2;
--red : #E81C4F;
--pink : #F58EA8;
--purple : #981CEB;
}
body {
/* reset */
margin: 0; padding: 0;
}
fullscreen {
/* unselectable */
pointer-events: none;
/* absolute */
position: absolute;
/* block */
display: block;
/* fullscreen */
width: 100vw; height: 100vh;
}
box {
/* selectable */
pointer-events: auto;
/* size */
width: calc(100vw / 3 - 2px); height: calc(100vh / 3 - 2px);
/* font */
font: 900 4.44vw "BlinkMacSystemFont", -apple-system, sans-serif;
/* color */
color: white;
/* background */
background: var(--green);
}
/*
.top *
[x--] [-x-] [--x]
[---] [---] [---]
[---] [---] [---]
.center *
[---] [---] [---]
[x--] [-x-] [--x]
[---] [---] [---]
.bottom *
[---] [---] [---]
[---] [---] [---]
[x--] [-x-] [--x]
*/
.top, .right, .bottom, .left, .center { display: flex; }
.top.left { justify-content: flex-start; align-items: flex-start; }
.top { justify-content: center ; align-items: flex-start; }
.top.right { justify-content: flex-end ; align-items: flex-start; }
.left { justify-content: flex-start; align-items: center ; }
.center { justify-content: center ; align-items: center ; }
.right { justify-content: flex-end ; align-items: center ; }
.bottom.left { justify-content: flex-start; align-items: flex-end ; }
.bottom { justify-content: center ; align-items: flex-end ; }
.bottom.right { justify-content: flex-end ; align-items: flex-end ; }
</style>
</head>
<body>
<fullscreen class="top left">
<box class="center">.top.left</box>
</fullscreen>
<fullscreen class="top">
<box class="center">.top</box>
</fullscreen>
<fullscreen class="top right">
<box class="center">.top.right</box>
</fullscreen>
<fullscreen class="left">
<box class="center">.left</box>
</fullscreen>
<fullscreen class="center">
<box class="center">.center</box>
</fullscreen>
<fullscreen class="right">
<box class="center">.right</box>
</fullscreen>
<fullscreen class="bottom left ">
<box class="center">.bottom.left </box>
</fullscreen>
<fullscreen class="bottom">
<box class="center">.bottom</box>
</fullscreen>
<fullscreen class="bottom right">
<box class="center">.bottom.right</box>
</fullscreen>
</body>
</html>
Raw
flex.css
/*
.top *
[x--] [-x-] [--x]
[---] [---] [---]
[---] [---] [---]
.center *
[---] [---] [---]
[x--] [-x-] [--x]
[---] [---] [---]
.bottom *
[---] [---] [---]
[---] [---] [---]
[x--] [-x-] [--x]
*/
.top, .right, .bottom, .left, .center { display: flex; }
.top.left { justify-content: flex-start; align-items: flex-start; }
.top { justify-content: center ; align-items: flex-start; }
.top.right { justify-content: flex-end ; align-items: flex-start; }
.left { justify-content: flex-start; align-items: center ; }
.center { justify-content: center ; align-items: center ; }
.right { justify-content: flex-end ; align-items: center ; }
.bottom.left { justify-content: flex-start; align-items: flex-end ; }
.bottom { justify-content: center ; align-items: flex-end ; }
.bottom.right { justify-content: flex-end ; align-items: flex-end ; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment