Skip to content

Instantly share code, notes, and snippets.

@bholtbholt

bholtbholt/flexbox-koans.html

Last active November 26, 2016 00:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bholtbholt/8ffcd1fe7dd44a092ad805845eb75c27 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bholtbholt/8ffcd1fe7dd44a092ad805845eb75c27 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bholtbholt revised this gist Nov 26, 2016. 1 changed file with 42 additions and 0 deletions.
    42 changes: 42 additions & 0 deletions flexbox-lesson.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    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
  2. bholtbholt revised this gist Nov 26, 2016. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions flexbox-koans.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,11 +21,11 @@

    /* Exercise CSS */
    .workspace-container {
    display: flex;
    /*display: flex;*/
    }
    .flex-container {
    flex: 1 1 auto;
    display: block;
    /*flex: 1 1 auto;*/
    /*display: flex;*/
    }
    .flex-child {
    padding: 20px;
    @@ -52,7 +52,7 @@ <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 appear on the left</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>
  3. bholtbholt created this gist Nov 25, 2016.
    110 changes: 110 additions & 0 deletions flexbox-koans.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    <!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: block;
    }
    .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 appear on the left</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>