Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

驴De d贸nde venimos y en d贸nde estamos?

2

驴C贸mo fue pensado CSS cuando se cre贸?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

驴C贸mo se lleg贸 al concepto de CSS Grid?

5

驴CSS Grid es una idea nueva? La evoluci贸n de la especificaci贸n

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

T茅cnicas de alineamiento antes de CSS Grid: margin y line-height

8

T茅cnicas de alineamiento antes de CSS Grid: table-cell y positions

9

T茅cnicas de alineamiento antes de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades f铆sicas y l贸gicas en CSS + Quiz

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Qu铆z

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

隆Iniciemos nuestro proyecto! Fase de creatividad e identificaci贸n de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: 驴display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generaci贸n autom谩tica de tracks + Qu铆z

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

隆Manos al c贸digo! Fase de construcci贸n de la grid principal de nuestro proyecto

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

隆Manos al c贸digo! Fase de ubicaci贸n y alineamiento

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Contin煤a con el Curso de Dise帽o Web con CSS Grid y Flexbox

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
23H
47M
18S

T茅cnicas de alineamiento con Flexbox

12/28
Recursos

Aportes 70

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Quiero aportar que justify-content y align-items no se enfocan en posicionamiento horizontal y vertical respectivamente, ya que esto va a depender de la direcci贸n que le demos. justify-content se enfoca en el eje principal y align-items se enfoca en el eje secundario.
Cuando hacemos un display:flex; la direcci贸n por defecto es row, por lo que nuestro eje principal es el eje horizontal y nuestro eje secundario es el vertical. Cuando cambiamos la direcci贸n a column nuestro eje principal es el vertical y nuestro eje secundario es el horizontal.
En este video se explica muy bien sobre como flexbox maneja los ejes.

La propiedad en cuesti贸n que combina tanto align-items como justify-content es place-content

Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content

No encontr茅 cu谩l es la propiedad para meter las dos en una sola :c
.
Solo encontr茅 una propiedad llamada place-content que engloba a justify-content y align-content en una sola propiedad, y lo mismo para place-items que engloba a justify-items y align-items en una sola propiedad, pero no encontr茅 ninguna que englbe a justify-content y align-items en una sola propiedad鈥 馃

S茅 que, al principio es complejo ( no dif铆cil), desarrollar juntos 鈥淕rid鈥, y 鈥淔lexbox鈥. Mi consejo es que lo imaginen de la siguiente manera: Su cuarto (Grid), las cuatro paredes son todo el contenedor; uno de sus muebles (flexbox), pueden jugar con la posici贸n del mueble (flexbox), por cualquier posici贸n dentro de su cuarto. Se complementan.

Para comenzar con Flexbox, necesita convertir su contenedor en un contenedor flexible . Esto es tan f谩cil como:

<#container {  display: flex;}> 


Propiedad # 2: Direcci贸n flexible
Un contenedor Flexbox tiene dos ejes: un eje principal y un eje transversal , que por defecto tienen este aspecto:

<#container {  display: flex;  flex-direction: column;}> 


Hay una distinci贸n importante que hacer aqu铆: flex-direction: column no alinea los cuadrados en el eje transversal en lugar del eje principal. Hace que el propio eje principal pase de horizontal a vertical.
Tambi茅n hay un par de otras opciones para flex-direction: row-reverse y column-reverse.

**Propiedad n. 掳 3: justificar el contenido
**Justify-content controla c贸mo alinea los elementos en el eje principal.

<#container {  display: flex;  flex-direction: row;  justify-content: flex-start;}> 

Tiene cinco comandos a su disposici贸n para usar justify-content :

Flex-start
Flex-end
Center
Space-between
Space-around


Propiedad # 4: Alinear elementos
Alinear elementos ser谩 muy sencillo. Si justify-content funciona a lo largo del eje principal, align-items se aplica al eje transversal.
Las propirdades de alineaci贸n son:
flex-start
flex-end
center
stretch
baseline

Para demostrar mejor los ejes principal y transversal, combinemos justify-content y align-items y veamos c贸mo el centrado funciona de manera diferente para los dos comandos de direcci贸n flexible:

Propiedad # 5: Alinear uno mismo
Align-self le permite manipular manualmente la alineaci贸n de un elemento en particular.
B谩sicamente, anula los elementos de alineaci贸n de un cuadrado. Todas las propiedades son iguales, aunque el valor predeterminado es auto , en el que sigue los elementos de alineaci贸n del contenedor.

<#container {  align-items: flex-start;}
.square#one {  align-self: center;}// Only this square will be centered.> 


Canva al ver que no pagaron la licencia:

Les comparto un juego para que puedan practicar con flexbox:
Flexbox Forggy

me vine a aprender Grid Layout y termine por entender Flex-box :v
revuelvo de todo en mis codigos 馃槂

Nota Importante

Sinceramente al principi贸 hace mucho tiempo cuando empec茅 siempre confund铆a estas dos propiedades.

Debemos recordar lo siguiente:

Justify Content: Ordena los elementos de manera horizontal, todo lo que se mueva por medio del eje x

Align-items: Ordena los elementos de manera vertical, todo lo que se mueva por medio del eje y

Titulo del curso: Curso Profesional de CSS Grid Layout.
Lo cierto: hasta esta clase 0 de Grid.

Apuntes / Notas / Resumen 馃槉

Esta es la manera que mas he utilizado para alinear elementos 馃榿

Si ya pasaron el juego de la ranita froggy, esta clase es pan comido 馃槃 jasjasa

Cuando haces pruebas con devTools de google chrome y empiezas a jugar con grid y flexbox te da ilustraciones de alineamiento muy did谩cticas y r谩pidas!

Encontr茅 una forma de resolverlo utilizando una 煤nica declaraci贸n en cada container.

Como ya mencionaron en otros aportes de esta clase, existe la propiedad place-content, que es un short-hand de las propiedades:

Esto sirve, pero teniendo en cuenta un detalle importante. Para que la propiedad align-content nos funcione como deseamos es necesario que los containers contengan la declaraci贸n: flex-wrap: wrap;. Esta lo que produce es que los elementos hijos de un flex-container puedan saltar a la siguiente l铆nea o columna si su ancho o su alto excede el contenedor. Por defecto la propiedad flex-wrap tiene como valor no-wrap, lo cual impide ese 鈥渟alto鈥.

Ahora bien, no se estar铆a cumpliendo la condici贸n de que sea con una sola declaraci贸n, solo estar铆amos cambiando las propiedades align-items y justify-content por flex-wrap y place-content鈥 Pero, se puede agregar la declaraci贸n del wrap 煤nicamente al selector .container, eso har谩 que todos los containers se vean afectados, ya que utilizan su regla por el @extend.

@extend es un 鈥渟uperpoder鈥 que le da SASS a CSS, que permite transferir las reglas de un selector a otro/s. En este caso se podr铆a hacer lo mismo con CSS puro, utilizando selectores de atributo.


Dejo el c贸digo de c贸mo ser铆a con CSS puro:

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  font-family: "Lato", sans-serif;
  width: 550px;
}

[class^="container"] {
  background: turquoise;
  width: 180px;
  height: 180px;
  flex-wrap: wrap;
}

[class^="element"] {
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
}

.element1 {
  background: papayawhip;
}

.element2 {
  background: pink;
}

.element3 {
  background: lightcyan;
}

.container1 {
  display: flex;
  place-content: flex-start;
}

.container2 {
  display: flex;
  place-content: center flex-start;
}

.container3 {
  display: flex;
  place-content: flex-end flex-start;
}

.container4 {
  display: flex;
  place-content: flex-start center;
}

.container5 {
  display: flex;
  place-content: center;
}

.container6 {
  display: flex;
  place-content: flex-end center;
}

.container7 {
  display: flex;
  place-content: flex-start flex-end;
}

.container8 {
  display: flex;
  place-content: center flex-end;
}

.container9 {
  display: flex;
  place-content: flex-end;
}

Tambi茅n dejo mi resoluci贸n en CodePen por si quieren revisarla. Espero les sirva 馃槃

Este curso la verdad a mi en lo personal, es demasiado f谩cil. Es importante ver los cursos de HTML y CSS con el profe Diego de Granda. Y este ser谩 pan comido jaja!

A alguien mas le entro ganas de aprender tailwind despues de ver repetidas veces un logo similar en las diapositivas del video?

mensaje subliminal, es usted malevola Estefany

Las propiedades que tenemos que tener en cuenta para el alineamiento son estas 3:

  • Display: Flex
  • Justify-content: Es para los elementos en su alineaci贸n horizontal
  • align-items: Es para alinear los elementos de forma vertical.

ESTOS ELEMENTOS SOLO SON PARA LOS ELEMENTOS PADRES

Cuando la profesora dice que puede centrar el contenido con una sola linea de c贸digo. Nos esta hablando de:

place-content: center;
<code> 

Esta propiedad centra el contenido tanto vertical, como horizontal

La propiedad que dijo la profesora para alinear tanto verticalmente como horizontalmente en una sola l铆nea es:

place-content: space-around center;

Dejo enlace a la p谩gina de box allignment y place-content
As铆 se ve m谩s o menos:

La propiedad justify-content y align-items dependen de la orientaci贸n que se les d茅. Sea por defecto filas row o columnas column. En este caso particular del ejercicio es por columnas, entonces los ejes que toman son:

  • Justify-content: horizontal flex-start para izquierda y flex-end para derecha, center para centro.

  • Align-items: vertical flex-start top, flex-end bottom y center para centrar.

Si sabes ingles, flexbox es literalmente hablarle al navegador para que te haga el dise帽o, como diria Freddy, hay una escuela de ingles en Platzi, jeje

Para mi personalmente es la forma mas facil de centrar o posicionar un contenido con flexbox ya que las formas de posicionamiento anterior que hemos visto si bien no las conocia se me hicieron mas confusas, creeria que estas son las mas usadas por su practicidad

Me adelante como desafio al ejercicio, y utilice tanto en justify-content como en align-items, solo start, end y center. Salio perfecto!, entonces no entiendo bien para que anteponer la flex- si ya lo declaramos con el display.

Flexbox en mi coraz贸n. 馃挅

Este reto no se me complic贸 como los anteriores de alineaci贸n jaja 馃槃

la magia de flex haciendose presente y facilitandonos dar estructura y alineacion a nuestros template

La idea principal detr谩s del flex-box es darle al contenedor la capacidad de alterar el ancho / alto (y el orden) de sus elementos para llenar mejor el espacio disponible (principalmente para adaptarse a todo tipo de dispositivos de visualizaci贸n y tama帽os de pantalla). Un contenedor flex-box expande los art铆culos para llenar el espacio libre disponible o los encoge para evitar que se desborden.

Tkm felxbox

que es @extend y porque no funciona en css en 2023?

Genial como ha avanzado CSS, todo se vuelve m谩s intuitivo y un poco m谩s f谩cil.

As铆 quedo mi c贸digo:

.wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 5px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 550px;
}

[class^="container"]{
    background: turquoise;
    width: 180px;
    height: 180px;
    flex-wrap: wrap; /* Se agrega un flexwrap, para que se pueda aplicar la propiedad place-content y combinar justify-content align-item */
}
[class^="element"]{
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
}
.element1{
    background-color: rgb(248, 106, 106);
}
.element2{
    background-color: rgb(51, 131, 100);
}
.element3{
    background-color: rgb(182, 80, 207);
}
.container1{
    display: flex;
    /* justify-content: flex-start;
    align-items: flex-start; */
    /* Propiedad que se puede utilizar para ahorrar las l铆neas de c贸digo de arriba */
    place-content: flex-start flex-start;
}
.container2{
    display: flex;
    /* justify-content: flex-start;
    align-items: center; */
    place-content: center flex-start;
}
.container3{
    display: flex;
    /* justify-content: flex-start;
    align-items: flex-end; */
    place-content: flex-end flex-start;
}
.container4{
    display: flex;
    /* justify-content: center;
    align-items: flex-start; */
    place-content: flex-start center;
}
.container5{
    display: flex;
    /* justify-content: center;
    align-items: center; */
    place-content: center center;
}
.container6{
    display: flex;
    /* justify-content: center;
    align-items: flex-end; */
    place-content: flex-end center;
}
.container7{
    display: flex;
    /* justify-content: flex-end;
    align-items: flex-start; */
    place-content: flex-start flex-end;
}
.container8{
    display: flex;
    /* justify-content: flex-end;
    align-items: center; */
    place-content: center flex-end;
}
.container9{
    display: flex;
    /* justify-content: flex-end;
    align-items: flex-end; */
    place-content: flex-end;
}

Pense que este curso seria solo aprender a escribir las 5 lineas mas utilizadas en grid, y alguna que otra mas mientras realiz谩bamos una maquetacion鈥 pero no.
No era broma que grid cambia la manera en la que pes谩bamos todo, no paro de pensar en diferentes escenarios donde toda la teor铆a hasta ahora es super util.

En esta clase se empieza a manejar el tema de la herencia por medio del uso extensivo de flexbox de padres a hijos.

La tarea de centrar los elementos dentro de un contenedor, se soluciona con la propiedad de place-self: center.

La documentaci贸n ac谩: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self

Para el elemento 5 podemos usar la propiedad:

justify-content: space-between;

Para convertir dos lineas en una. Diciendole al objeto que se organice de acuerdo al espacio que tiene, en este caso se autocentra.

Por fin!! Flexbox!!

justify-content nos alinea el contenedor hijo horizontalmente,los valores son: flex-start/center/flex-end (tambien acepata los valores right/left)
align-items nos alinea el contenedor hijo verticalmente, sus valores son:flex-start/center/flex-end

Te quiero mucho flexbox

la documentaci贸n de CSS tricks es la mas bacana que he visto para cualquier cosa, sino lo entiendes ahi no lo vas a entender nunca

me quedo todo mas claro objetivos, uso de la tcnica y la profe logro transmitir de una manera progresiva las tecnicas y sus diferencias! Gracias @Estefany Aguilar o mas conocida como TeffCode!

Buena clase!

flecksen

ahhh pense que era dificil pero resulto ser sencillo de aprender

Hay una clase enfocada a FlexBox muy buena en el curso de front-end developer

flexbox rules!

Una gran forma de aprender, entender y practicar FlexBox es mediante la pagina https://flexboxfroggy.com/ donde aprendes de Flexbox como si fuera un juego.

De flexbox no encontre dicha propiedad 馃槮 .
Sin embarbo si esta Margin: auto; que nos centrar谩 vertical y horizontalmente.

Por si de pronto lo desconocen, este es un juego muy divertido para aprender Flexbox.
https://flexboxfroggy.com/#es

La propiedad que nos sirve como Shorthand para alinear en los ejes: 鈥淢ain Axis鈥 y 鈥淐ross Axis鈥 es place-content. Pero OJO, es un shorthand de justify-content y align-content.

Esta 煤ltima lo que hace es distribuir el contenido en el eje transversal(Cross Axis), SOLO SI, el contenedor flexible es de varias l铆neas. Si el contenido flexible es de una sola linea, no se mover谩 en el eje transversal (al menos que agreguen align-items)

Que gran curso!

PARA ENTENDER FLEX-BOX **
ay que entender esta imagen

** justify-content y align-items no se enfocan en posicionamiento horizontal y vertical respectivamente, ya que esto va a depender de la direcci贸n que le demos. justify-content se enfoca en el eje principal y align-items se enfoca en el eje secundario.

Good class. It was a review of Diego鈥檚 definitive CSS and HTML course.

La mejor clase que he recibido, cuando compre la laptop me pondr茅 a realizar estos proyectos. 馃挭馃徑馃榿 Gracias profe.
馃槸 Pasaron muchos a帽os para esto Flexbox.

En mi parecer combinaria grid y flexbox de la sguiente manera.
Flex cuando quiero alinear en una sola dimension.
Grid cuando quiero alinear en multiples dimensiones, entendiendo esto como una matriz si se vale la comparacion.

Estas propiedades yo las aprend铆 en el curso definitivo de html y css. Lo nuevo es que ahora entiendo el porque se debe usar flex-start y flex-end. Ya que la propiedad de justify-content tambi茅n se puede declarar como left o right. Pero ahora que se lo de las propiedades l贸gicas y las distintas formas de escritura en el mundo todo toma sentido y me doy cuenta que el left y right son malas practicas.

Creo que no esta dem谩s poner este divertido juego para practicar un poco el flexbox, 隆Froggy!

Pase el curso de CSS y mobile first y en esta clase por fin me quedo claro.

馃憣

Aqu铆 pueden ver un portafolio que hice personalmente justo cuando termine los primeros cursos, lo hice como pr谩ctica. Desde ah铆 pueden entrar a github y ver el repositorio con el c贸digo, utilice CSS puro, tengo que mejorar algunas cosas pero ah铆 aplique t茅cnicas de alineamiento con flexbox.

Ac谩 le comparto una pagina muy interactiva para poder practicar mucho mas las propiedades de Flexbox. Es como especie de un juego.
https://flexboxfroggy.com/#es

con esto aprenden flex, recuerden , el padre siempre es display: flex;
https://flexboxfroggy.com/#es

Flexbox y position son mis favoritos para alinear, y precisamente estoy tomando este curso para que Grid sea de mis favoritos

yuju estas clases son de otro nivel 100% practico y se aprende mucho鈥 platzi sigue as铆

https://flexboxfroggy.com/#es
Comparto esta juego con el cual tambi茅n puedes aprender flexbox, un compa帽ero en la clase de Curso definitvo de HTML y CSS lo compartio 馃槂

En que tema explican el .Wrapper y las propiedades que se le adicionan en este caso el display:grid y el grid-template-columns?