Vamos a continuar con la siguiente parte de nuestro proyecto y parece ser que por ejemplo aquí tenemos
este contenido centrado y por ejemplo tenemos el mismo espacio de la izquierda de la derecha estaremos
utilizando la misma clase de contenedor anteriormente si vemos lo que es este texto está centrado así
que estaremos viendo también cómo centrar textos entre muchas otras cosas.
Vamos a comenzar a abrir lo que ese estudio y abrir lo que es el índex dar un poco de scroll puede ser
que tenemos aquí un section.
Entonces tenemos que agregarle una clase o algo similar.
Por lo tanto hay que obtener un Class y ponemos contenedor para que se centre el contenido en ver las
ventajas de nuevo de reutilizar clases como tenemos aquí se centra correctamente.
Ahora puedes ver que si vemos el diseño también tenemos un poco de separación en cada uno de estos elementos
algo que a mí me gusta hacer también es crear como diferentes piezas de CSS que se puedan reutilizar.
Puedes ver que aquí tenemos algunos estilos globales.
Voy a crear aquí un nuevo nuevo grupo que voy a nombrar utilidades si tienes experiencia con Frend Works
por ejemplo aprendiste un poco de vostra o estás creando algunos sitios web.
Es muy similar a lo que ellos hacen en casi cualquier Framework y existe uno que se llama tan linda
que se basa en eso en tener utilidades equivale a crear uno que se llame sección en una sección y va
a tener un margen top de 2 cm y un margen Boron de 2 cm entonces eso nos va a permitir tener separaciones
arriba y abajo.
Utilizamos esta sección aquí también la pegamos y puede ser que tenemos un poco más de separación aquí
viendo bastante bien.
Siguiente paso vamos a crear un poco más de HTML aquí para poder aplicar Flex books de nueva cuenta.
Recuerda que Flex Book solamente afecta al primer nivel y por lo tanto para poder distribuir estos iconos
en esta parte tenemos que crear un contenedor para estos tips que vas a colocar un dip con una clase
que voy a nombrar íconos nosotros y aquí voy a cortar este Dip.
Este día va a rodear todos los tips que tenemos aquí y seleccionamos e intentamos un poco.
Este va a ser el padre para los diferentes tips que tenemos aquí y de esa forma aplicamos Flex Books
y nos vamos a poder posicionar correctamente ahora cada uno de estos tips que hasta aquí también va
a tener una clase.
Por lo tanto seleccionamos aquí presionamos controlé o comande nos va a seleccionar los tres tips y
aquí con las flechas hacia los lados podemos poner una clase que se va a llamar algo así como ícono
entonces podemos copiar por ejemplo este selector de aquí y dar un poco de scroll.
Entonces después de la navegación vamos a tener un nuevo comentario que va a decir iconos nosotros les
ponemos punto y con nosotros eso a seleccionar el padre de todos los iconos.
Aquí vamos a visitar de nueva cuenta Flex.
Por lo tanto display Flex y guardamos cambios puedes ver que posiciona a los elementos uno frente al
otro pero de nueva cuenta si vemos el diseño puede ser que de esta forma poco más centrado etcétera.
Si lo de inspeccionar aquí inspeccionamos puedes ver qué iconos tiene display Flex.
Eso hace que cada hijo tome lo mismo el mismo ancho en cada uno de ellos pero quedan muy juntos muy
pegados en esta parte de aquí y no hemos visto cómo posicionar los elementos o mejor dicho posicionarlos
automáticamente sí pero no darles un tamaño en específico.
Puedes ver que estoy seleccionando el padre es decir iconos nosotros pero para definirle un ancho en
cada uno de estos iconos tenemos que seleccionar el hijo un icono y aquí vamos a poner llaves y vamos
a colocar Flex Basis esta vendría siendo la base y por ejemplo le puedes poner 200 pixeles y guardar
cambios y puede ser que cada uno de estos elementos mide 200 píxeles.
Si has trabajado por ejemplo con HTML CSS tal vez definas el ancho de tus elementos con Wit.
Usualmente es como se hacía anteriormente.
Si utilizas Flex Box tienes que utilizar Flex Basis entonces 200 pixeles no es el adecuado.
Lo ideal es siempre utilizar algo que se conoce como porcentajes pensando un poco más a futuro en lo
que viene siendo Responsive Web Design con el Flex Basis y aquí voy a poner 33.3 por ciento.
Eso es lo que haces toma el 100 por ciento y lo divide entre tres.
Por lo tanto cada elemento va a medir 33.3 por ciento.
Si guardo cambios puedes ver que sigue el mismo problema de que están muy pegados y siguen tomando todo
el espacio disponible.
Esto es como si esto no estuviera en realidad puede ser que no cambia pero esta función de Flex Basis
es muy útil si la combinas con una función que se llama Calc Aquí le puedes poner Calc y por ejemplo
Calc la forma en la que funciona es que te permite realizar una operación matemática.
Le puedes poner x 200 pixeles menos 50 pixeles y van a darle o va a realizar la operación toma los 200
pixeles luego le resta 50 y por lo tanto si revisas tus elementos puedes ver que cada uno de ellos mide
150 pixeles entonces esto es una forma en la que puedes realizar operaciones matemáticas en CSS entonces
aquí voy a eliminar esta parte de aquí y voy a utilizar Calc y 33.3 por ciento para que cada uno mida
lo mismo y en todo el espacio disponible.
Vuelvo a poner menos y voy a utilizar un Reem para que sean menos 10 pixeles.
No sabemos cuántos pixeles sean 33.3 por ciento pero sé que se va a saber cómo hacer la operación y
va a tomar 33.3 por ciento y le barrista el restar los 10 pixeles que vendría siendo un Reem ahora si
guardamos cambios puedes ver que el diseño se sigue viendo junto incluso si te pones aquí sobre iconos
nosotros puedes ver que no está tomando todo el ancho pero esta función es muy útil para que se vea
bien mezcladas con.
Yo estoy contento.
Espais beduina.
De esta forma puedes ver que tenemos más separación aquí y esta es una forma muy común hoy en día para
colocar elementos como están aquí es decir en columnas y se muestren de esta forma.
Si has trabajado con vostra sé exactamente lo que ellos hacen y puedes ver que se ve bastante bien.