|---------------------------------------------|-------------------------------------------------------------------------------|
| | caja 2 |
| caja 1 |-------------------------------------------------------------------------------|
| | caja 3 |
|---------------------------------------------|-------------------------------------------------------------------------------|
Código
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/estilo.css"/> </head> <body> <section class="flex-container"> <div class="caja c1"> caja 3 </div> <div class="caja c2"> caja 2 </div> <div class="caja c3"> caja 3 </div> </section> </body> </html>
///////////////////////////////////////////////////// el code csss
Código:
*{
box-sizing: border-box;
}
body{
font-family: ARIAL, Helvetica, sans-serif;
margin:0;
padding:0;
background-color:#BFBBBB;
}
.flex-container{
display: flex;
border:1px solid black;
background-color:#212529;
}
.c1{
height: 100px;
width: 30%;
}
.c2{
height: 50px;
width: 70%;
}
.c3{
height: -100px;
width: 20px;
background-color:aqua;
padding: 10px;
}