Created
November 13, 2019 03:50
-
-
Save Leokuma/114118ab4123c1d787e7df3cf1f50d10 to your computer and use it in GitHub Desktop.
Flexbox Demo
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 lang="pt_BR"> | |
<head> | |
<title>Flexbox Demo</title> | |
<meta charset="UTF-8"/> | |
<meta name="author" content="Flexbox demo"> | |
<meta name="description" content="Flexbox demo"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
<style> | |
.container { | |
display: flex; | |
margin: 15px 0px 60px 0px; | |
background-color: white; | |
border: solid 1px #ddd; | |
box-shadow: 2px 2px 5px lightgray; | |
} | |
div.container div { | |
height: 40px; | |
} | |
div.container div:nth-child(1) { | |
width: 100px; | |
background-color: darkslategrey; | |
} | |
div.container div:nth-child(2) { | |
width: 200px; | |
background-color: deeppink; | |
} | |
div.container div:nth-child(3) { | |
width: 400px; | |
background-color: gold; | |
} | |
div.container div:nth-child(4) { | |
width: 200px; | |
background-color: indianred; | |
} | |
div.container.self110 div { | |
flex: 1 1 0; | |
} | |
div.container.self10auto div { | |
flex: 1 0 auto; | |
} | |
</style> | |
</head> | |
<body style='font-size: 16pt; font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; background-color: #F0F0F0;'> | |
<h2 style='text-align: center;'>Flexbox Demo</h2> | |
default (stacked) | |
<div class='container justify'> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
space-between | |
<div style='justify-content: space-between' class='container'> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
space-around (half space on the left and right edges) | |
<div style='justify-content: space-around' class='container'> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
space-evenly (all same space) | |
<div style='justify-content: space-evenly' class='container'> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
flex 1 0 auto (stretch proportionally to original size) | |
<div class='container self10auto'> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
flex 1 1 0 (stretch ignoring original size) | |
<div class='container self110'> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment