Information

Sajt

24 Stor och liten skärm

Vi ska få till en enkel layoute med flexbox.

  • Gör så om skärmen är stor ska "AAA" vara blå.
  • Gör så om skärmen är mellan stor ska "AAA" vara gul.
  • Gör så om skärmen är liten ska "AAA" vara grön.

Du kan själv bestämma hur stor skärmen ska vara.

Kod 


<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<style>
	
	</style>
	<style>
	  #container-big {
	 display: flex;
	 flex-direction: column;
margin: 10px;
padding: 10px;
border-style: solid;
border-color: black;
background-color: blue;
	}
	     
.container {
	 display: flex;
	 height: 200px;
	 width: 400px;
margin: 10px;
padding: 10px;
border-style: solid;
border-color: black;
background-color: red;
	     }
	     .item {
	background-color: green;
border-style: solid;
margin: 10px;
padding: 10px;
width: 50px;
height: 50px;
font-size: 32px;
		   } 
	</style>
</head>
<body>
<div id="container-1" class="container" >
	<div class="item" >
	     1
	</div>
<div id="A" class="item" >
	     A
	</div>
	<div class="item" >
	     3
	</div>
</div>
<div id="container-2" class="container" >
	<div class="item" >
	     1
	</div>
<div id="B" class="item" >
	     B
	</div>
	<div class="item" >
	     3
	</div>
	</div>
<div id="container-3" class="container" >
	<div class="item" >
	     1
	</div>
<div id="C" class="item" >
	     C
	</div>
	<div class="item" >
	     3
	</div>
	</div>
<div id="container-4" class="container">
	<div class="item" >
	     1
	</div>
<div id="D" class="item" >
	     D
	</div>
	<div class="item" >
	     3
	</div>
</div>
</div>
</body>
</html>

Du ska bara lägga till något mellan första style-tagarna.

Nyheter