CSS Flex items not filling container
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
Struggling to get the flex items inside the calculator to fill the parent.
Have been messing with so many declarations i’m going crazy.
Thought it was maybe because I didnt have flex-wrap set properly.. however that didn’t seem to fix the issue.
Any advice on where to start looking on that to make the buttons fill the calculator content?
Also saw the bottom row is off by a tiny bit and not centred, however this has been set to centre already?
Many thanks,
https://jsfiddle.net/32n70wqb/
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #d2a5a5;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
background-color: #d2a5a5;
border: none;
color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.calculator {
background-color: #fff;
border: 6px solid rgb(1, 1, 1);
border-radius: 10px;
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-wrap: wrap;
padding: 5px;
}
.display {
background-color: #fff;
border: 1px solid #ccc;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.display input {
background-color: #fff;
border: none;
width: 100%;
height: auto;
text-align: right;
font-size: 20px;
font-weight: bold;
color: #000;
}
.calculator .content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-wrap: wrap;
}
.calculator .row {
display: flex;
}
.calculator .row .button {
background-color: #fff;
border: 1px solid #ccc;
margin: 0 auto;
padding: 0;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
color:rgb(1, 1, 1);
}
.calculator .row .button.zero {
flex: 2;
}
.calculator .row .button:hover {
background-color: #ccc;
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Calculator</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js”></script>
</head>
<body>
<div class=”calculator”>
<div class=”content”>
<div class=”screen”>
<input type=”text” class=”display” value=”0″ disabled />
</div>
<div class=”row”>
<button class=”button” onclick=”calculator.addDigit(7)”>
7
</button>
<button class=”button” onclick=”calculator.addDigit(8)”>
8
</button>
<button class=”button” onclick=”calculator.addDigit(9)”>
9
</button>
<button
class=”button”
onclick=”calculator.addOperator(‘/’)”
>
/
</button>
</div>
<div class=”row”>
<button class=”button” onclick=”calculator.addDigit(7)”>
7
</button>
<button class=”button” onclick=”calculator.addDigit(8)”>
8
</button>
<button class=”button” onclick=”calculator.addDigit(9)”>
9
</button>
<button
class=”button”
onclick=”calculator.addOperator(‘*’)”
>
*
</button>
</div>
<div class=”row”>
<button class=”button” onclick=”calculator.addDigit(4)”>
4
</button>
<button class=”button” onclick=”calculator.addDigit(5)”>
5
</button>
<button class=”button” onclick=”calculator.addDigit(6)”>
6
</button>
<button
class=”button”
onclick=”calculator.addOperator(‘-‘)”
>
–
</button>
</div>
<div class=”row”>
<button class=”button” onclick=”calculator.addDigit(1)”>
1
</button>
<button class=”button” onclick=”calculator.addDigit(2)”>
2
</button>
<button class=”button” onclick=”calculator.addDigit(3)”>
3
</button>
<button
class=”button”
onclick=”calculator.addOperator(‘+’)”
>
+
</button>
</div>
<div class=”row”>
<button
class=”button zero”
onclick=”calculator.addDigit(0)”
>
0
</button>
<button class=”button” onclick=”calculator.addDecimal()”>
.
</button>
<button
class=”button”
onclick=”calculator.addOperator(‘=’)”
>
=
</button>
</div>
</div>
</div>
</body>
</html>
أضف إجابة