Centrar elementos con flexbox

Por user Julio Giampiere Grados Caballero
Centrar elementos con flexbox

En este tutorial crearemos un panel de votación electrónica centrando elementos con flexbox. Aprende y agrega más funcionalidades a tus proyectos.

Hola comunidad DevCode, al estar en los días de coyuntura electoral, en este tutorial crearemos un panel de votación electrónica a través de nuestros cursos, realizando 3 vistas diferentes, una de presentación, otra de elección por tu curso preferencial y la última de despedida. Además, aprenderemos a centrar nuestros elementos con Flexbox. Sin más, empecemos el desarrollo de este tutorial. 

En nuestro primera vista tendremos un fondo estable para toda la pantalla, para ello se hará uso de un linear-gradient, de la siguiente manera:

background-image: linear-gradient(90deg, #1D406D, #3F67A9);

E indicamos los siguientes estilos css, para que ocupe toda nuestra pantalla:

position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;

Ahora nos queda centrar todo el texto a través de un text-align: center; adicional a esto, para que tenga un posición fija nuestro linear-gradient debemos indicar el siguiente estilo:

background-attachment: fixed;

Y así veremos que es ocupado por toda la pantalla dicho linear gradient, de acuerdo a la paleta de colores establecida.

Tendremos textos a establecer un color, su tamaño de letra, el peso de la letra e indicar que esten en mayusculas, estos son: “Voto”, “Electrónico”, “2016”.

Posterior a ello, tendremos un span, con un texto pequeño “Ingresa tu nombre”, el cual para que tenga el mismo posicionamiento que los demás tendremos que indicar:

display: block;
text-align: center;

Luego tenemos un input y una etiqueta a, que le deberemos agregar un tamaño estable, y sobre la etiqueta también indicar: display: block, para el posicionamiento de bloque.

Para terminar tenemos el logo como un footer, que debemos posicionarlo a la derecha para ello haremos uso de flex-box, y así posicionar nuestro contenido hacia la derecha:

justify-content: flex-end;

Luego tenemos que agregar un tamaño al logo, y de igual manera al texto “DevCode”.


Pasemos al segundo template, donde tendremos la elección del curso, aquí haremos uso de flexbox para mostrar la cartilla de cursos, empecemos indicando un contenedor para todo el documento, este será:

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

Luego tendremos los textos, uno central y otro izquierdo, posterior a ellos, haremos la cartilla, la cual debemos hacer uso de flexbox con los siguientes estilos:

.row {
  display: flex;
}
.center {
  justify-content: center;
}
.wrap {
  flex-wrap: wrap;
}

Así estamos primero indicando el posicionamiento flex, luego centrando nuestras cajas, y luego el estilo wrap, pues con flexbox por defecto, los elementos serán todos tratados de encajar en una sola línea, se puede cambiar esto según nuestra necesidad gracias a flex-wrap.

Por último el contenedor de toda la caja deberá tener un:

width: 100%;

Además de que cada caja un:

width: 30%;

En cada caja haremos la inclusión de una imagen y texto, sin mayor complicaciones, además de un hover:

.course:hover {
  transform: scale(1.1);
  border: 0px;
}

Estableciendo el traslado de la caja hacia adelante dando la impresión de una sobreposición. Para terminar este template tendremos un botón, que le indicamos lo siguiente:

.course--button {
  background-color: #3673D9;
  color: #fff;
  font-size: 20px;
  border: none;
  padding: 16px 40px 16px 40px;
  border-radius: 2px;
  cursor: pointer;
}

Ahora terminando este tutorial vamos a ver el template final, donde tenemos que indicar el mismo fondo usado en la home y textos centrados:


Y bien esto ha sido todo por este tutorial, si necesitas el proyecto completo te dejo el enlace  github flexbox center y recuerda seguir aprendiendo y practicando con Devcode. Hasta la próxima. 

user

Julio Giampiere Grados Caballero

CTO y Cofundador de Devcode.la. Full stack JavaScript. React | jQuery | Vanilla | Backbone | Node | MongoDB.