• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

display: flex nie działa

VPS Starter Arubacloud
+1 głos
806 wizyt
pytanie zadane 21 lipca 2021 w HTML i CSS przez Doge Gaduła (3,420 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ź

+1 głos
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 Youwinkyes

komentarz 21 lipca 2021 przez Doge Gaduła (3,420 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.
komentarz 21 lipca 2021 przez Doge Gaduła (3,420 p.)

Jednak chodziło po prostu o

flex-wrap: wrap;

ponieważ zapomniałem o tej właściwości i kiedy dałem ją zamiast

flex-direction: column;

efekt jest taki sam i wszystko działa.

Podobne pytania

0 głosów
1 odpowiedź 399 wizyt
pytanie zadane 9 listopada 2020 w HTML i CSS przez rob Bywalec (2,440 p.)
0 głosów
0 odpowiedzi 339 wizyt
pytanie zadane 8 listopada 2022 w HTML i CSS przez zbiku25 Gaduła (3,000 p.)
0 głosów
0 odpowiedzi 298 wizyt

92,829 zapytań

141,771 odpowiedzi

320,814 komentarzy

62,158 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...