Created
March 5, 2019 01:55
-
-
Save teethnclaws/dec9583cb75c450db0d0e8cf716e2b6e to your computer and use it in GitHub Desktop.
Flexbox Intro Flexbox Intro Start // source https://jsbin.com/powiya/2
This file contains 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> | |
<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> |
This file contains 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
.container { | |
border: 4px solid red; | |
display: flex; | |
} | |
.container > * { | |
border: 4px solid green; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can either assign display: flex or :inline-flex to the desired container.