Skip to content

Instantly share code, notes, and snippets.

@okovalov

okovalov/index.html

Last active January 18, 2020 21:47
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 okovalov/e03fb3ca4a82ee010eb4431eb13b8528 to your computer and use it in GitHub Desktop.
Save okovalov/e03fb3ca4a82ee010eb4431eb13b8528 to your computer and use it in GitHub Desktop.
Download ZIP
FlexBox sandbox
Raw
index.html
<html>
<body>
<div class="screen">
<div class="first box">
1
</div>
<div class="second box">
2
</div>
<div class="third box">
3
</div>
</div>
</body>
</html>
Raw
playground.json
{
"scripts": [],
"styles": []
}
Raw
style.css
.screen {
background-color: whitesmoke;
width: 80%;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
/* align-items: center */
}
.box {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
.first {
background-color: thistle;
}
.second {
background-color: orangered;
/* flex: 2 */
}
.third {
background-color: palegreen;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment