• 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
723 wizyt
pytanie zadane 21 lipca 2021 w HTML i CSS przez Doge Gaduła (3,320 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,320 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,320 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ź 321 wizyt
pytanie zadane 9 listopada 2020 w HTML i CSS przez rob Bywalec (2,440 p.)
0 głosów
0 odpowiedzi 255 wizyt
pytanie zadane 8 listopada 2022 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)
0 głosów
0 odpowiedzi 277 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...