{"action":"created","comment":{"url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/comments/73340531","id":73340531,"diff_hunk":"@@ -0,0 +1,273 @@\n+# Flexbox\n+\n+Screencasts\n+- [Part 1](http://youtu.be/wBlBTO7mqoI)\n+- [Part 2](http://youtu.be/_I58MXDnBEs)\n+\n+## Learning Objectives\n+\n+- Give an example of a problem solved by Flexbox.\n+- Given a desktop-first webpage, make it look presentable on mobile devices (and vice-versa) with as little CSS as possible.\n+- Contrast flex containers and flex items.\n+- Draw a diagram that includes: flex container, flex item, main and cross-axes, starts and ends for all axes, and main and cross-sizes.\n+- Contrast `align-items` and `align-self`.\n+- Explain what is meant by the \"Holy Grail Layout\".\n+\n+## Problem 1: Vertical Alignment (15 minutes / 0:15)\n+\n+I have a `div`. I would like to center it vertically and horizontally on my page.\n+\n+#### You Tell Me: What Should I Try?\n+\n+```html\n+<body>\n+  <div>This is my div!</div>\n+</body>\n+```\n+\n+```CSS\n+html {\n+  height: 100%;\n+}\n+\n+body {\n+  min-height: 100%;\n+  background-color: #ccc;\n+  margin: 0 auto;\n+}\n+\n+div {\n+  width: 100px;\n+  height: 100px;\n+  outline: 1px solid red;\n+}\n+```\n+\n+<details>\n+  <summary><strong>These might work...</strong></summary>\n+\n+  > **Padding**: The simplest approach would be to set equal padding on the top and bottom of the element. This can get tedious, however, when there is more than one element in a container.\n+  >\n+  > **Absolute Positioning**: You could use properties like `top` and `left` to position an element in the center. This, however, removes it from the document flow.\n+\n+</details>\n+\n+<details>\n+  <summary><strong>These could work in other scenarios...</strong></summary>\n+\n+  > **`line-height`**: When vertically centering a single line of text, you can set the line-height to that of the whole container.\n+  >\n+  > **`vertical-align`**: Used to align words within a line of text (e.g., superscript, subscript).\n+  >\n+  > **`display: table`**: ???\n+\n+</details>\n+\n+#### An Aside\n+\n+Vertical alignment has been the laughingstock of CSS for years. How can something so obvious be so difficult to accomplish?\n+\n+> HTML was created as a document-oriented language. CSS emerged as a way to make an HTML file appear more document-like. Literally, like something you would make in Microsoft Word.\n+>\n+> So layout wasn't much of a concern in the beginning. But as the web has evolved, so has the needs of developers. So why hasn't a standard for vertical alignment emerged accordingly?\n+>\n+> It's difficult to establish new CSS standards. The [CSS Working Group](https://en.wikipedia.org/wiki/CSS_Working_Group) has a hard time agreeing on anything, especially cross-browser standards.\n+\n+Fortunately, Flexbox has slowly but surely become a standard over the past few years...\n+\n+### Flexbox to the Rescue\n+\n+```CSS\n+html {\n+  height: 100%;\n+}\n+\n+body {\n+  min-height: 100%;\n+  background-color: #ccc;\n+  margin: 0 auto;\n+  display: flex;\n+  flex-direction: row;\n+  justify-content: center;\n+  align-items: center;\n+}\n+\n+div {\n+  width: 100px;\n+  height: 100px;\n+  outline: 1px solid red;\n+}\n+```\n+\n+## How It Works (10 minutes / 0:10)\n+\n+![flexbox diagram](img/flexbox-diagram.jpg)\n+\n+When you declare `display: flex` on a container, it becomes a **flex container**.\n+\n+First, you use `flex-direction` to indicate whether you want the items in the container -- the **flex items** -- to \"read\" left-to-right (`row`), right-to-left (`row-reverse`), top-to-bottom (`column`), **or** bottom-to-top (`column-reverse`).\n+\n+When you specify a flex-direction, you can think of it as placing an axis in that direction across your flex container. So if you use `flex-direction: row` or `row-reverse`, this **main axis** will be the same as the X-axis (horizontal) on a graph. Otherwise, it'll be the Y-axis.","path":"flexbox.md","position":110,"original_position":110,"commit_id":"ac06fe122c187c9a0db2a36b2b5abd6092ddb4b2","original_commit_id":"0385b25ee5ade6365b8642ad11f76be2224cbf98","user":{"login":"amaseda","id":3519147,"avatar_url":"https://avatars.githubusercontent.com/u/3519147?v=3","gravatar_id":"","url":"https://api.github.com/users/amaseda","html_url":"https://github.com/amaseda","followers_url":"https://api.github.com/users/amaseda/followers","following_url":"https://api.github.com/users/amaseda/following{/other_user}","gists_url":"https://api.github.com/users/amaseda/gists{/gist_id}","starred_url":"https://api.github.com/users/amaseda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amaseda/subscriptions","organizations_url":"https://api.github.com/users/amaseda/orgs","repos_url":"https://api.github.com/users/amaseda/repos","events_url":"https://api.github.com/users/amaseda/events{/privacy}","received_events_url":"https://api.github.com/users/amaseda/received_events","type":"User","site_admin":false},"body":"@jshawl I have one on line 104, not sure which one's better though. Thoughts?","created_at":"2016-08-03T13:45:19Z","updated_at":"2016-08-03T13:45:19Z","html_url":"https://github.com/ga-wdi-lessons/sass-intro/pull/3#discussion_r73340531","pull_request_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/3","_links":{"self":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/comments/73340531"},"html":{"href":"https://github.com/ga-wdi-lessons/sass-intro/pull/3#discussion_r73340531"},"pull_request":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/3"}}},"pull_request":{"url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/3","id":79345305,"html_url":"https://github.com/ga-wdi-lessons/sass-intro/pull/3","diff_url":"https://github.com/ga-wdi-lessons/sass-intro/pull/3.diff","patch_url":"https://github.com/ga-wdi-lessons/sass-intro/pull/3.patch","issue_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues/3","number":3,"state":"open","locked":false,"title":"Wdi10 updates","user":{"login":"amaseda","id":3519147,"avatar_url":"https://avatars.githubusercontent.com/u/3519147?v=3","gravatar_id":"","url":"https://api.github.com/users/amaseda","html_url":"https://github.com/amaseda","followers_url":"https://api.github.com/users/amaseda/followers","following_url":"https://api.github.com/users/amaseda/following{/other_user}","gists_url":"https://api.github.com/users/amaseda/gists{/gist_id}","starred_url":"https://api.github.com/users/amaseda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amaseda/subscriptions","organizations_url":"https://api.github.com/users/amaseda/orgs","repos_url":"https://api.github.com/users/amaseda/repos","events_url":"https://api.github.com/users/amaseda/events{/privacy}","received_events_url":"https://api.github.com/users/amaseda/received_events","type":"User","site_admin":false},"body":"","created_at":"2016-07-29T11:27:11Z","updated_at":"2016-08-03T13:45:19Z","closed_at":null,"merged_at":null,"merge_commit_sha":"1216bb9f235ce87509ae2572494cf8005817915f","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/3/commits","review_comments_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/3/comments","review_comment_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/comments{/number}","comments_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues/3/comments","statuses_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/statuses/ac06fe122c187c9a0db2a36b2b5abd6092ddb4b2","head":{"label":"ga-wdi-lessons:wdi10-updates","ref":"wdi10-updates","sha":"ac06fe122c187c9a0db2a36b2b5abd6092ddb4b2","user":{"login":"ga-wdi-lessons","id":16711211,"avatar_url":"https://avatars.githubusercontent.com/u/16711211?v=3","gravatar_id":"","url":"https://api.github.com/users/ga-wdi-lessons","html_url":"https://github.com/ga-wdi-lessons","followers_url":"https://api.github.com/users/ga-wdi-lessons/followers","following_url":"https://api.github.com/users/ga-wdi-lessons/following{/other_user}","gists_url":"https://api.github.com/users/ga-wdi-lessons/gists{/gist_id}","starred_url":"https://api.github.com/users/ga-wdi-lessons/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ga-wdi-lessons/subscriptions","organizations_url":"https://api.github.com/users/ga-wdi-lessons/orgs","repos_url":"https://api.github.com/users/ga-wdi-lessons/repos","events_url":"https://api.github.com/users/ga-wdi-lessons/events{/privacy}","received_events_url":"https://api.github.com/users/ga-wdi-lessons/received_events","type":"Organization","site_admin":false},"repo":{"id":50126987,"name":"sass-intro","full_name":"ga-wdi-lessons/sass-intro","owner":{"login":"ga-wdi-lessons","id":16711211,"avatar_url":"https://avatars.githubusercontent.com/u/16711211?v=3","gravatar_id":"","url":"https://api.github.com/users/ga-wdi-lessons","html_url":"https://github.com/ga-wdi-lessons","followers_url":"https://api.github.com/users/ga-wdi-lessons/followers","following_url":"https://api.github.com/users/ga-wdi-lessons/following{/other_user}","gists_url":"https://api.github.com/users/ga-wdi-lessons/gists{/gist_id}","starred_url":"https://api.github.com/users/ga-wdi-lessons/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ga-wdi-lessons/subscriptions","organizations_url":"https://api.github.com/users/ga-wdi-lessons/orgs","repos_url":"https://api.github.com/users/ga-wdi-lessons/repos","events_url":"https://api.github.com/users/ga-wdi-lessons/events{/privacy}","received_events_url":"https://api.github.com/users/ga-wdi-lessons/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/ga-wdi-lessons/sass-intro","description":"Intro to Sass, Basic Reuse [css,sass]","fork":false,"url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro","forks_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/forks","keys_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/teams","hooks_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/hooks","issue_events_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues/events{/number}","events_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/events","assignees_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/assignees{/user}","branches_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/branches{/branch}","tags_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/tags","blobs_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/refs{/sha}","trees_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/statuses/{sha}","languages_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/languages","stargazers_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/stargazers","contributors_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/contributors","subscribers_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/subscribers","subscription_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/subscription","commits_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/commits{/sha}","git_commits_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/commits{/sha}","comments_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/comments{/number}","issue_comment_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues/comments{/number}","contents_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/contents/{+path}","compare_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/merges","archive_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/downloads","issues_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues{/number}","pulls_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls{/number}","milestones_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/milestones{/number}","notifications_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/labels{/name}","releases_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/releases{/id}","deployments_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/deployments","created_at":"2016-01-21T18:14:08Z","updated_at":"2016-04-14T22:14:11Z","pushed_at":"2016-08-03T13:17:28Z","git_url":"git://github.com/ga-wdi-lessons/sass-intro.git","ssh_url":"git@github.com:ga-wdi-lessons/sass-intro.git","clone_url":"https://github.com/ga-wdi-lessons/sass-intro.git","svn_url":"https://github.com/ga-wdi-lessons/sass-intro","homepage":"","size":79,"stargazers_count":0,"watchers_count":0,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":2,"mirror_url":null,"open_issues_count":2,"forks":2,"open_issues":2,"watchers":0,"default_branch":"master"}},"base":{"label":"ga-wdi-lessons:master","ref":"master","sha":"6622b8b28012f8624b2ad1feed35836f23e40a8b","user":{"login":"ga-wdi-lessons","id":16711211,"avatar_url":"https://avatars.githubusercontent.com/u/16711211?v=3","gravatar_id":"","url":"https://api.github.com/users/ga-wdi-lessons","html_url":"https://github.com/ga-wdi-lessons","followers_url":"https://api.github.com/users/ga-wdi-lessons/followers","following_url":"https://api.github.com/users/ga-wdi-lessons/following{/other_user}","gists_url":"https://api.github.com/users/ga-wdi-lessons/gists{/gist_id}","starred_url":"https://api.github.com/users/ga-wdi-lessons/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ga-wdi-lessons/subscriptions","organizations_url":"https://api.github.com/users/ga-wdi-lessons/orgs","repos_url":"https://api.github.com/users/ga-wdi-lessons/repos","events_url":"https://api.github.com/users/ga-wdi-lessons/events{/privacy}","received_events_url":"https://api.github.com/users/ga-wdi-lessons/received_events","type":"Organization","site_admin":false},"repo":{"id":50126987,"name":"sass-intro","full_name":"ga-wdi-lessons/sass-intro","owner":{"login":"ga-wdi-lessons","id":16711211,"avatar_url":"https://avatars.githubusercontent.com/u/16711211?v=3","gravatar_id":"","url":"https://api.github.com/users/ga-wdi-lessons","html_url":"https://github.com/ga-wdi-lessons","followers_url":"https://api.github.com/users/ga-wdi-lessons/followers","following_url":"https://api.github.com/users/ga-wdi-lessons/following{/other_user}","gists_url":"https://api.github.com/users/ga-wdi-lessons/gists{/gist_id}","starred_url":"https://api.github.com/users/ga-wdi-lessons/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ga-wdi-lessons/subscriptions","organizations_url":"https://api.github.com/users/ga-wdi-lessons/orgs","repos_url":"https://api.github.com/users/ga-wdi-lessons/repos","events_url":"https://api.github.com/users/ga-wdi-lessons/events{/privacy}","received_events_url":"https://api.github.com/users/ga-wdi-lessons/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/ga-wdi-lessons/sass-intro","description":"Intro to Sass, Basic Reuse [css,sass]","fork":false,"url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro","forks_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/forks","keys_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/teams","hooks_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/hooks","issue_events_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues/events{/number}","events_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/events","assignees_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/assignees{/user}","branches_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/branches{/branch}","tags_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/tags","blobs_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/refs{/sha}","trees_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/statuses/{sha}","languages_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/languages","stargazers_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/stargazers","contributors_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/contributors","subscribers_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/subscribers","subscription_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/subscription","commits_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/commits{/sha}","git_commits_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/git/commits{/sha}","comments_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/comments{/number}","issue_comment_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues/comments{/number}","contents_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/contents/{+path}","compare_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/merges","archive_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/downloads","issues_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues{/number}","pulls_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls{/number}","milestones_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/milestones{/number}","notifications_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/labels{/name}","releases_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/releases{/id}","deployments_url":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/deployments","created_at":"2016-01-21T18:14:08Z","updated_at":"2016-04-14T22:14:11Z","pushed_at":"2016-08-03T13:17:28Z","git_url":"git://github.com/ga-wdi-lessons/sass-intro.git","ssh_url":"git@github.com:ga-wdi-lessons/sass-intro.git","clone_url":"https://github.com/ga-wdi-lessons/sass-intro.git","svn_url":"https://github.com/ga-wdi-lessons/sass-intro","homepage":"","size":79,"stargazers_count":0,"watchers_count":0,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":2,"mirror_url":null,"open_issues_count":2,"forks":2,"open_issues":2,"watchers":0,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/3"},"html":{"href":"https://github.com/ga-wdi-lessons/sass-intro/pull/3"},"issue":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues/3"},"comments":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/issues/3/comments"},"review_comments":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/3/comments"},"review_comment":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/pulls/3/commits"},"statuses":{"href":"https://api.github.com/repos/ga-wdi-lessons/sass-intro/statuses/ac06fe122c187c9a0db2a36b2b5abd6092ddb4b2"}}}}
{"actor":{"display_login":"amaseda"}}