Técnicas de alineamiento con Flexbox

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 “Grid”, y “Flexbox”. 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 😊

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:

• align-content (CSS-Tricks).
• justify-content (CSS-Tricks).

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 “salto”.

• Documentación1: flex-wrap (CSS-Tricks)
• Documentación2: flex-wrap (MDN)

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 “superpoder” 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

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

A complete guide tutorial on:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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: “Main Axis” y “Cross 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’s definitive CSS and HTML course.

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?