display: flex nie działa

pytanie zadane 21 lipca 2021 w HTML i CSS przez Doge Gaduła (3,370 p.)

Witam, robię kalkulator i mam następujący kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="container" class="container">
		<div id="calculator" class="calculator">
			<div id="output" class="output">1</div>
			<div id="buttons" class="buttons">
				<div id="button1" class="button">
					1
				</div>
				<div id="button2" class="button">
					2
				</div>
				<div id="button3" class="button">
					3
				</div>
				<div id="button4" class="button">
					4
				</div>
			</div>
		</div>
	</div>
</body>
</html>

*
{
	margin: 0px;
	padding: 0px;
}
.container
{
	width: 100vw;
	height: 100vh;
	background-color: #969696;
	display: flex;
	align-items: center;
	justify-content: center;
}
.calculator
{
	width: 25%;
	height: 75%;
	background-color: #303030;
	display: flex;
	align-items: center;
	justify-content: center;
}
.output
{
	width: 90%;
	height: 10%;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: right;
	font-size: 30px;
}
.buttons
{
	height: 80%;
	width: 95%;
	background-color: blue;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}
.button
{
	height: 10%;
	width: 25%;
	margin: 5px;
	background-color: white;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}

i output powinien być na górze, a buttons pod spodem, lecz rozkładają się po połowie. Jak można to naprawić? Wysokość i szerokość są ustawione na 90% i 95%, a i tak zajmują po 50%.

1 odpowiedź

odpowiedź 21 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 21 lipca 2021 przez Doge

Najlepsza

Próbowałeś ustawić właściwość flex-direction na wartość column na elemencie .calculator?

komentarz 21 lipca 2021 przez niezalogowany

good for You

komentarz 21 lipca 2021 przez Doge Gaduła (3,370 p.)

Teraz działa, ale przy innej stronie kiedy robiłem to tak się nie działo.

2	komentarz 21 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.) Pokaż kod z tej innej strony - tylko, że to już w osobnym temacie, skoro ewidentnie nie działała Ci konkretna własność w CSS.