HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link href="css/style.css" rel="stylesheet"
</head>
<body>
<section class="content">
<div class="rosso">1</div>
<div class="verde">2</div>
<div class="giallo">3</div>
<div class="magenta">4</div>
<div class="ciano">5</div>
</section>
<section class="box">
<div class="rosso">1</div>
<div class="verde">2</div>
<div class="giallo">3</div>
<div class="magenta">4</div>
<div class="ciano">5</div>
<div class="nero">6</div>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-size: 20px;
color: azure;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/***********horizontal**************/
.content{
width: 1024px;
height: 240px;
background-color: #ccc;
margin: 50px auto;
display: flex;
flex-wrap: wrap;/*respeta el % asignado al width de los div*/
align-content:space-between;
/*align-content: flex-start;*//*situa los div al top*/
/*align-content: flex-end;*//*situa los div al end */
}
.content .rosso{
width: 50%;
height: 80px;
background-color:#f00;
}
.content .verde{
width: 50%;
height: 80px;
background-color:#080;
}
.content .giallo{
width: 33.33333333%;/*cuando son 3 div*/
height: 80px;
background-color:#ff0;
}
.content .magenta{
width: 33.33333333%;
height: 80px;
background-color:#f0f;
}
.content .ciano{
width: 33.33333333%;
height: 80px;
background-color:#0ff;
}
/*************vertical****************/
.box{
width: 1024px;
height: 600px;/*obligatorio*/
background-color: #ccc;
margin: 50px auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;/*respeta el % asignado al width de los div*/
/*justify-content: space-around;*//*en este ejemplo esta
propiedad no funcionaria*/
align-content: space-around;/*distribulle el espacio*/
justify-content:center;
/*align-content:space-between;*/
/*align-content: flex-start;*//*situa los div al top*/
/*align-content: flex-end;*//*situa los div al end */
}
.box .rosso{
width: 45%;
height: 180px;
background-color:#f00;
}
.box .verde{
width: 45%;
height: 180px;
background-color:#080;
}
.box .giallo{
width: 45%;
height: 180px;
background-color:#ff0;
}
.box .magenta{
width: 25%;
height: 540px;
background-color:#f0f;
}
.box .ciano{
width: 28%;
height: 240px;
background-color:#0ff;
}
.box .nero{
width: 28%;
height: 300px;
background-color:#000;
}
No hay comentarios:
Publicar un comentario