Information

Sajt

23 Fyra små rätter med flexbox

Vi ska få till en enkel layoute med flexbox.

  • Gör så att Boxen A är dubbel så bred som alla andra boxar.
  • Se till att ellement B är under alla andra boxar i den box som B är i.
  • Se till att alla element som är i samma box som innehåller C är centrerade.
  • Se till att boxen som innehåller D justeras till höger.

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