Maquetar Diseño de Cajas Flexbox en tu paginas

Diseño de caja flexible
El diseño CSS Flexbox es un módulo de CSS que define un modelo de caja, optimizado para el diseño de interfaces de usuario. En el diseño flex, los nodos hijos se pueden distribuir en dirección vertical u horizontal y se pueden “flexibilizar” sus tamaños, bien sea rellenando el espacio disponible o encogiéndose para evitar salirse del contorno del nodo padre.

Ejemplo Básico
Agregar Cajas Clases Padre (wrapper) y sus clases hijas asi box azul, box verde, box naranja, box rojo:

<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>

<div>Platzi</div>

Master

<div class="“wrapper”">

<div class="“box" azul”="">1</div>

<div class="“box" verde”="">2</div>

<div class="“box" naranja”="">3</div>

<div class="“box" rojo”="">4</div>

</div>

se veria un diseño basico sin estructura, ahora aplicaremos css a nuestro diseño:

<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>
<style><br> * {<br> padding:10px;<br> margin:10px;<br> }<br> body {<br> background-color:#84b279;<br> font-family: “Gill-Sams”, “Gill-Sams MT”, Calibri,“Trebuche MS”,sans-serif;<br> font-weight: 800;<br> }<br> .wrapper {<br> background-color:rgba(255,255,255,0.759);<br> color: white;<br> border: 2px solid black;<br> height: 500px;<br> display: flex;<br> }<br> .box {<br> background-color:#ee6537;<br> border: 5px solid black;<br> box-shadow: black 5px 5px 8px;<br> font-size: 4rem;<br> text-shadow: 5px 5px 8px black;<br> text-align: center;<br> width: 150px;<br> height: 100px;<br> line-height: 100px;<br> }<br> .azul {<br> background-color: rgb(92,125,189)<br> }<br> .verde {<br> background-color: rgb(92,89,119)<br> }<br> .naranja {<br> background-color: rgb(184,144,92)<br> }<br> .rojo {<br> background-color: rgb(189,92,92)<br> }<br></style>

<div>Platzi</div>

Master

<div class="“wrapper”">

<div class="“box" azul”="">1</div>

<div class="“box" verde”="">2</div>

<div class="“box" naranja”="">3</div>

<div class="“box" rojo”="">4</div>

</div>

Explicando los stylos aplicados para el P1 :

• • {
    padding:10px;
    margin:10px;
    }

en el P2 aplicamos stylo al body como color, tipo de fuente.

• body {
  background-color:#84b279;
  font-family: “Gill-Sams”, “Gill-Sams MT”, Calibri,“Trebuche MS”,sans-serif;
  font-weight: 800;
  }

en el P3 aplicamos stylo a la caja contenedora padre (.wrapper) como backgrpund-color, color, border, height y el display: flex

• .wrapper {
  background-color:rgba(255,255,255,0.759);
  color: white;
  border: 2px solid black;
  height: 500px;
  display: flex;
  }

en el P4 aplicamos stylo a las cajas contenedoras hijas (.box) como background-color, border, box-shadow, font-size(tamaño de fuente), text-shadown.

• .box {
  background-color:#ee6537;
  border: 5px solid black;
  box-shadow: black 5px 5px 8px;
  font-size: 4rem;
  text-shadow: 5px 5px 8px black;
  text-align: center;
  width: 150px;
  height: 100px;
  line-height: 100px;
  }

en el P5 aplicamos stylo a cada caja .azul, .verde, .naranja, .rojo aplicamos solo background-color de acuerdo a su color respectivo.

• .azul {
  background-color: rgb(92,125,189)
  }

• .verde {
  background-color: rgb(92,89,119)
  }

• .naranja {
  background-color: rgb(184,144,92)
  }

• .rojo {
  background-color: rgb(189,92,92)
  }