Skip to content

Instantly share code, notes, and snippets.

@teethnclaws

teethnclaws/index.html

Created March 5, 2019 01:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save teethnclaws/dec9583cb75c450db0d0e8cf716e2b6e to your computer and use it in GitHub Desktop.
Save teethnclaws/dec9583cb75c450db0d0e8cf716e2b6e to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Intro Flexbox Intro Start // source https://jsbin.com/powiya/2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Flexbox Intro Start">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox Intro</title>
<style id="jsbin-css">
.container {
border: 4px solid red;
display: flex;
}
.container > * {
border: 4px solid green;
}
</style>
</head>
<body>
<!-- BEGIN LESSON CODE -->
<div class="container">
<div class="item">
1
</div>
<nav><a href="">Link!</a></nav>
<div>
3
</div>
<button>Click me!</button>
</div>
<!-- END LESSON CODE -->
<script id="jsbin-source-css" type="text/css">.container {
border: 4px solid red;
display: flex;
}
.container > * {
border: 4px solid green;
}</script>
</body>
</html>
Raw
jsbin.powiya.css
.container {
border: 4px solid red;
display: flex;
}
.container > * {
border: 4px solid green;
}
@teethnclaws
Copy link
Author

You can either assign display: flex or :inline-flex to the desired container.

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