bholtbholt/flexbox-koans.html

## 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>

## flexbox-lesson.md

      
    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
	<!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>