Crear una web con CSS 3 Flexbox

4 minuto(s)

En esta página:

Demo Github

Las Cajas flexibles o FlexBox, es un nuevo modo de maquetar una Web o Aplicación Web. Quizás Años atrás existía esta propiedad pero CSS3 lo llevo a otro nivel. Flexbox es una manera mas sencilla de hacer responsive nuestro diseño mediante bloques, tambien podemos retener estructuras de bloques en linea sin que pierdan su forma. En esta oportunidad les mostrare como crear una pagina web con esta interesante tecnología.

Debemos considerar que:


display: box; /* salio el año 2009. */
display: flexbox; /* salio el año 2011. */
display: flex; /* es la versión actual CSS3.(2015) */

display: box; /* salio el año 2009. */

display: flexbox; /* salio el año 2011. */

display: flex; /* es la versión actual CSS3.(2015) */

Según la W3C la propiedad Flexbox de CSS3 es soportado por las siguientes versiones de Navegadores:

Aclarado este punto, podemos proceder con el tutorial, primero voy a crear mi vista html para visualizar el resultado

HTML

Creamos la siguiente estructura:


<h1>Página Web con Flexbox CSS3</h1>

<!-- Mi Header o Cabecera de la web -->
<header>Header</header>

<!-- Contenedor para el contenido de en Medio de mi Página de la web -->
  <div id='contenedor'>
   <section class="contenido_medio">Contenido medio</section> <!-- Contenido en la parte de en Medio de mi Página de la web -->
   <section class="lado_izquierdo">Lado izquierdo</section> <!-- Contenido de la parte Izquierda de mi Página de la web -->
   <section class="lado_derecho">Lado derecho</section> <!-- Contenido de la parte Derecha de mi Página de la web -->
  </div>

<!-- Mi Footer o Pie de Página de la web -->
<footer>Footer</footer>

<h1>Página Web con Flexbox CSS3</h1>

<header>Header</header>

<section class="contenido_medio">Contenido medio</section>

<section class="lado_izquierdo">Lado izquierdo</section>

<section class="lado_derecho">Lado derecho</section>

</div>

<footer>Footer</footer>

Ahora creamos las propiedades CSS, las cuales aplicaremos a nuestra vista html:

CSS

En los comentarios explico para que sirve cada propiedad flex:


body {
  font-family: Arial;
  font-size: 24px;
  color: #877cb1;
}

h1 {
  text-align: center;
  color: #4f4f52;
}

#contenedor {
  min-height: 800px; /* Para mi contendor del contenido principal le puedo dar un height: 100% y se adaptara también el alto*/
  margin: 0px;
  padding: 0px;
  display: -webkit-flex; /* Le indico que detecte automáticamente la longitud de la pagina */
  display: flex; /* Inicio la propiedad Flexbox con */
  -webkit-flex-flow: row; /* Le indico que las columnas se muestren una fila debajo de otra cuando la pantalla del dipositivo sea de menos ancho */
  flex-flow: row; /* Defino la direccion del bloque es decir con se muestra en fila(row) una debajo de otra cuando la pantalla del dipositivo sea de menos ancho */
}

#contenedor > .contenido_medio {
  min-height: 800px;
  margin: 4px;
  padding: 5px;
  border: 9px solid #ccc5c5;
  background-color: #e8f0f1;

  -webkit-flex: 3 1 60%; /* Llenaré 3/3 (3 tercios) del ancho que quede  y también especifico el ancho del bloque, para navegadores anteriores*/
  flex: 3 1 60%; /* Llenaré 3/3 (3 tercios) del ancho que quede  y también especifico el ancho del bloque, para los Nuevos navegadores */
  -webkit-order: 2; /* Le indico el orden de este columna, es decir la columna de la izquierda es la 1, la que sigue esta la 2 y la de la derecha es la columna 3 */
  order: 2; /* Le indico el orden de este columna, igual que -webkit-order, para otras versiones de navegadores */
  display: -webkit-flex;
  display: flex;
  flex-direction: row; /* Establezco la dirección de los elementos flexibles que hay adentro de este elemento, en orden inverso */

  /* Centro vertical y horizontalmente todo los elementos dentro de este contenedor*/
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#contenedor > .lado_izquierdo {
  min-height: 800px;
  margin: 4px;
  padding: 5px;
  border: 9px solid #ccc5c5;
  background-color: #aac6e8;
  -webkit-flex: 1 6 40%;
  flex: 1 6 20%;
  -webkit-order: 1;
  order: 1;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#contenedor > .lado_derecho {
  min-height: 800px;
  margin: 4px;
  padding: 5px;
  border: 9px solid #ccc5c5;
  background-color: #aac6e8;
  -webkit-flex: 1 6 20%;
  flex: 1 6 20%;
  -webkit-order: 3;
  order: 3;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

header,
footer {
  height: 100px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 100px;
  border: 9px solid #ccc5c5;
  background-color: #cee8f3;
}

.credito {
  font-size: 14px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: #000;
}

.credito a:link {
  color: #317da2;
  text-decoration: none;
}

.credito a:hover {
  color: #317da2;
  text-decoration: underline;
}

.credito a:visited {
  color: #317da2;
  text-decoration: none;
}

/* Cuando tenga el ancho de 640 px, que se visualize en una sola columna los bloques de mi Pagina Wéb  */
@media all and (max-width: 640px) {
  #contenedor {
    -webkit-flex-flow: column;
    flex-direction: column; /* Que se visualize en una sola columna los bloques de mi Pagina Wéb */
  }

  #contenedor > contenido_medio,
  #contenedor > lado_izquierdo,
  #contenedor > aside {
    /* Retorno el orden del documento */
    -webkit-order: 0;
    order: 0;
  }

  #contenedor > lado_izquierdo,
  #contenedor > aside,
  header,
  footer {
    min-height: 50px;
    max-height: 50px;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

body {

font-family: Arial;

font-size: 24px;

color: #877cb1;

}

h1 {

text-align: center;

color: #4f4f52;

}

#contenedor {

min-height: 800px; /* Para mi contendor del contenido principal le puedo dar un height: 100% y se adaptara también el alto*/

margin: 0px;

padding: 0px;

display: -webkit-flex; /* Le indico que detecte automáticamente la longitud de la pagina */

display: flex; /* Inicio la propiedad Flexbox con */

-webkit-flex-flow: row; /* Le indico que las columnas se muestren una fila debajo de otra cuando la pantalla del dipositivo sea de menos ancho */

flex-flow: row; /* Defino la direccion del bloque es decir con se muestra en fila(row) una debajo de otra cuando la pantalla del dipositivo sea de menos ancho */

}

#contenedor > .contenido_medio {

min-height: 800px;

margin: 4px;

padding: 5px;

border: 9px solid #ccc5c5;

background-color: #e8f0f1;

-webkit-flex: 3 1 60%; /* Llenaré 3/3 (3 tercios) del ancho que quede y también especifico el ancho del bloque, para navegadores anteriores*/

flex: 3 1 60%; /* Llenaré 3/3 (3 tercios) del ancho que quede y también especifico el ancho del bloque, para los Nuevos navegadores */

-webkit-order: 2; /* Le indico el orden de este columna, es decir la columna de la izquierda es la 1, la que sigue esta la 2 y la de la derecha es la columna 3 */

order: 2; /* Le indico el orden de este columna, igual que -webkit-order, para otras versiones de navegadores */

display: -webkit-flex;

display: flex;

flex-direction: row; /* Establezco la dirección de los elementos flexibles que hay adentro de este elemento, en orden inverso */

/* Centro vertical y horizontalmente todo los elementos dentro de este contenedor*/

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

#contenedor > .lado_izquierdo {

min-height: 800px;

margin: 4px;

padding: 5px;

border: 9px solid #ccc5c5;

background-color: #aac6e8;

-webkit-flex: 1 6 40%;

flex: 1 6 20%;

-webkit-order: 1;

order: 1;

display: -webkit-flex;

display: flex;

flex-direction: row;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

#contenedor > .lado_derecho {

min-height: 800px;

margin: 4px;

padding: 5px;

border: 9px solid #ccc5c5;

background-color: #aac6e8;

-webkit-flex: 1 6 20%;

flex: 1 6 20%;

-webkit-order: 3;

order: 3;

display: -webkit-flex;

display: flex;

flex-direction: row;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

header,

footer {

height: 100px;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row;

flex-direction: row;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

min-height: 100px;

border: 9px solid #ccc5c5;

background-color: #cee8f3;

}

.credito {

font-size: 14px;

padding-top: 20px;

padding-bottom: 20px;

text-align: center;

color: #000;

}

.credito a:link {

color: #317da2;

text-decoration: none;

}

.credito a:hover {

color: #317da2;

text-decoration: underline;

}

.credito a:visited {

color: #317da2;

text-decoration: none;

}

/* Cuando tenga el ancho de 640 px, que se visualize en una sola columna los bloques de mi Pagina Wéb */

@media all and (max-width: 640px) {

#contenedor {

-webkit-flex-flow: column;

flex-direction: column; /* Que se visualize en una sola columna los bloques de mi Pagina Wéb */

}

#contenedor > contenido_medio,

#contenedor > lado_izquierdo,

#contenedor > aside {

/* Retorno el orden del documento */

-webkit-order: 0;

order: 0;

}

#contenedor > lado_izquierdo,

#contenedor > aside,

header,

footer {

min-height: 50px;

max-height: 50px;

}

Por ultimo agregamos la siguiente etiqueta entre las etiquetas <head></head> esta etiqueta da la funcionalidad de que el contenido se adapte a la ventana del dispositivo


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Es una manera muy sencilla de hacer adaptable a cualquier dispositivo nuestra Página web, si vamos a trabajar un proyecto entero con Flexbox es mejor usar un Framework ya que hacer todo manualmente nos demandaría mucho tiempo, eso depende de uno. Un buen Framework o marco de trabajo es:
Flexboxgrid.

Nota(s)

Algunos de los pasos mencionados pueden variar en futuras versiones de CSS, esto no depende de nosotros si no de los desarrolladores que dan soporte a CSS y cambian las funciones y las opciones mencionadas.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.