Skip to content

Instantly share code, notes, and snippets.

@bholtbholt

bholtbholt/flexbox-koans.html

Last active November 26, 2016 00:19
Show Gist options
  • Save bholtbholt/8ffcd1fe7dd44a092ad805845eb75c27 to your computer and use it in GitHub Desktop.
Save bholtbholt/8ffcd1fe7dd44a092ad805845eb75c27 to your computer and use it in GitHub Desktop.
Download ZIP
A koans-style worksheet to learn Flexbox.
Raw
flexbox-koans.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Koans</title>
<style>
/* Resets */
html { box-sizing: border-box; height: 100%; }
*, *:before, *:after { box-sizing: inherit; }
body { font-family: Verdana, Geneva, sans-serif; display: flex; flex-direction: row-reverse; height: 100%; margin: 0 }
section { flex: 1 1 50%; padding: 10px; }
h2 { margin-bottom: .2em; }
.strong { font-weight: bold; }
.instructions, .flex-container { padding-left: 0; list-style: none; margin: 0; }
.overflow { overflow: auto; padding-bottom: 100px; }
.bg-clouds { background-color: #ecf0f1; }
.flex-child:first-of-type { background-color: #e74c3c; }
.flex-child:nth-of-type(2) { background-color: #e67e22; }
.flex-child:nth-of-type(3) { background-color: #f1c40f; }
.flex-child:last-of-type { background-color: #1abc9c; }
/* Exercise CSS */
.workspace-container {
/*display: flex;*/
}
.flex-container {
/*flex: 1 1 auto;*/
/*display: flex;*/
}
.flex-child {
padding: 20px;
}
</style>
</head>
<body>
<section class="workspace-container">
<ul class="flex-container">
<li class="flex-child">Element One</li>
<li class="flex-child">Element Two</li>
<li class="flex-child">Element Three</li>
<li class="flex-child">Element Four</li>
</ul>
</section>
<section class="overflow bg-clouds">
<h1>Flexbox Koans</h1>
<p>These are a series of instructions to help you understand how Flexbox works. Edit the <code>.workspace-container, .flex-container,</code> and <code>.flex-child</code> classes to perform the results.</p>
<p>Use CSS-Tricks <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a> for a reference.</p>
<ul class="instructions">
<li id="flex-direction">
<h2>Flex Direction</h2>
<ol>
<li>Make the 4 elements sit in a row</li>
<li>Make the 4 elements sit in a row and fill the entire space</li>
<li>Make Element Four the first element in the row</li>
<li>Align the elements vertically</li>
<li>Align the elements vertically and put Element Four at the top</li>
</ol>
</li>
<li id="order">
<h2>Order</h2>
<ol>
<li>Change the element order to 2, 3, 4, 1</li>
</ol>
</li>
<li id="flex">
<h2>Flex</h2>
<ol>
<li>Make the elements grow to fill the available space</li>
<li>Make the second element fill the available space</li>
<li>Add content to the second element, and make all elements equal width</li>
<li>Add content to the second element, make elements equal width, except make element 3 wider</li>
</ol>
</li>
<li id="flex-wrap">
<h2>Flex Wrap</h2>
<ol>
<li>Make element 3 and 4 sit on a new line</li>
<li>Arrange the elements in 2 lines in order 3, 4, 1, 2</li>
</ol>
</li>
<li id="justify-content">
<h2>Justify Content</h2>
<ol>
<li>Leave space at the end of the row</li>
<li>Leave space at the beginning of the line</li>
<li>Leave space at the beginning and end of the line</li>
<li>Leave space between the elements</li>
<li>Leave space at the beginning, end, and between the elements</li>
</ol>
</li>
<li id="align-items">
<h2>Align Items</h2>
<ol>
<li>Leave space at the bottom of the elements</li>
<li>Leave space at the top of the elements</li>
<li>Center the elements within the workspace container</li>
<li>Fill the workspace container with the elements</li>
</ol>
</li>
<li id="align-self">
<h2>Align Self</h2>
<ol>
<li>Make element 3 align the bottom, and all the other elements align to the top</li>
</ol>
</li>
</ul>
</section>
</body>
</html>
Raw
flexbox-lesson.md

What is flexbox?

  • a layout system
  • to understand it, we need to briefly jump into some web design history
  • regular web elements (before flexbox) were difficult to arrange/design
  • we have
    • block -- most defaults, elements take the entire width and auto height
    • inline -- a, spans, bold, they're meant to sit next to each other or inline. Often text elements.
    • inline-block -- inline can't have margins (and vertical padding is ignored), inline block combines both and allows margin/padding
    • and table -- Looks like a spreadsheet, hyper-specific designs, but really cumbersome to code
  • for layouts, we've been using floats for the past 4 or so years
    • show example (float something to the right side)
  • there's a few issues
    • we need to use clearfix so floats don't hang (since floats kind of ignore their parent containers)
    • widths need to be set explicitly or they're auto (show real width of right-float example)
  • flexbox turns the children of a block-like element into something that understands and fills available space
    • show example

Why would we use flexbox

  • so flexbox is most useful in two-dimensional layouts
  • useful for when you'd like to use up the entire block, but you don't want to explicitly express all the widths
  • it's a semantic replacement for floats in app-design (float still has uses)

Flexbox examples in webapp

  • show header in Settings for how things were
  • show header in /pages
  • show page list item

Flexbox properties

  • parent
    • display: flex
    • flex-direction: row row-reverse column column-reverse
    • flex-wrap: nowrap wrap wrap-reverse
    • justify-content: flex-start flex-end center space-between space-around (horizontal spacing)
    • align-items: flex-start flex-end center stretch baseline
    • align-content (same as align-items but handles multi-line flexbox)
  • children
    • order: int
    • flex: grow shrink basis
    • align-self: auto flex-start flex-end center baseline stretch (works like align-items but for a specific element)

Code exercise https://gist.github.com/bholtbholt/8ffcd1fe7dd44a092ad805845eb75c27

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment