Skip to content

Instantly share code, notes, and snippets.

@Leokuma

Leokuma/flexbox-demo.htm

Created November 13, 2019 03:50
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 Leokuma/114118ab4123c1d787e7df3cf1f50d10 to your computer and use it in GitHub Desktop.
Save Leokuma/114118ab4123c1d787e7df3cf1f50d10 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Demo
Raw
flexbox-demo.htm
<!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