Skip to content

Instantly share code, notes, and snippets.

@chabb

chabb/index.html

Created March 31, 2018 01:40
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 chabb/1b68bffb21c97f8a1e880daa05442edc to your computer and use it in GitHub Desktop.
Save chabb/1b68bffb21c97f8a1e880daa05442edc to your computer and use it in GitHub Desktop.
Download ZIP
MY CALCULATOR, FLEXBOX EXAMPLE
Raw
index.html
<link rel="stylesheet" type="text/css" href="./style.css">
<body>
<div class="calculator">
<div class="row">
<div class="touch result">
<div class="content">0</div>
</div>
<div class="touch red">
<div class="content">AC</div>
</div>
</div>
<div class="row">
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
</div>
<div class="row">
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
</div>
<div class="row">
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
</div>
<div class="row">
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
</div>
<div class="row">
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
<div class="touch">
<div class="content">0</div>
</div>
</div>
</div>
</body>
Raw
style.css
.calculator {
display: flex;
flex-direction: column;
width: 600px;
height: 300px;
background-color:grey;
}
.calculator .row {
flex: 1 0 0;
display: flex;
background-color: wheat;
}
.content {
margin: 5px;
display: flex;
flex: 1 0 0;
border-radius: 5px;
background: red;
justify-content: center;
align-items: center;
}
.calculator .row .touch {
flex: 1 1 0;
display:flex;
border-radius: 4px;
box-sizing: border-box;
}
.calculator .row .touch.result {
flex: 2 0 0;
}
.calculator .row .touch.red {
flex: 1 0 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment