Last active
November 26, 2016 00:19
-
-
Save bholtbholt/8ffcd1fe7dd44a092ad805845eb75c27 to your computer and use it in GitHub Desktop.
A koans-style worksheet to learn Flexbox.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment