Flujo normal del documento: display block, inline e inline-block

Que buen dato el que Estefany dió en el minuto 03:02. Básicamente:

display: inline-flex;

En este caso, flex es el comportamiento interno del contenedor, mientras que inline es el comportamiento externo del contenedor ante todo el HTML. Lo mismo pasa con inline-grid y también con grid y flex (que en realidad son block-grid y block-flex).
.
Primer valor: Comportamiento externo de un contenedor.
Segundo valor: Comportamiento interno de un contendor.

📄 Flujo normal del documento: Display block, inline e inline-block

Display ⇒ Verbo: desplegar, colocar a la vista, exhibir, lucir, mostrar, presentar

flujo normal del documento ⇒ como se comportan los elementos HTML por defecto

• Display ⇒ Definir el tipo de visualización de un elemento
• Cuando usamos display: flex; o display: grid; Nos centramos más en los valores y no en la propiedad por si sola

• Block ⇒ Se extienden ocupando todo el espacio disponible para ellos
• Inline
  • Son como palabras en una oración, una después de otra
  • Se separan por medio de un espacio en blanco entre ellos

El comportamiento de los elementos en bloque y en línea es fundamental para CSS y el hecho de que un documento HTML marcado correctamente será legible por defecto. Este diseño se conoce como “Diseño de bloque y en línea” o “Flujo normal” porque esta es la forma en que los elementos se presentan si no les hacemos nada más.

• Block e Inline definen:
  • Valor externo de visualización
  • Valor interno de visualización
• Lo que significa es que cuando usamos display: grid; estamos diciendo display: block-grid;
• Un elemento que tenga los atributos de bloque puede establecer:
  • Ancho
  • Alto
  • Padding
  • Margin
  • Estirarse en todo el espacio
• Pero los hijos de un contenedor display: grid; se les ha dado un valor interno de grid
• Esta forma de pensar es util porque cuando usamos display: inline-flex;
  • Pensaremos que el primer valor es el comportamiento externo y el segundo valor es el interno del contenedor
• Siempre volveremos al flujo normal del documento
  • Si trabajamos de esta forma obtendremos:
    • Flujo más agradable y legible
    • CSS mucho más fácil
    • Menos probable de tener problemas de accesibilidad (ya que está trabajando con el orden de los documentos que es exactamente lo que está haciendo un lector de pantalla o una persona que revisa el documento)

RESUMEN: El flujo normal del documento sera la forma en que se mostraran los elementos si no modificamos nada, se basan en block e inline ambas propiedades se usan a lo largo del desarrollo como cuando usamos display: grid; o display: inline-grid; estarás marcando de alguna forma si el comportamiento externo es de bloque o en línea además que en la segunda propiedad indicas que comportamiento interno tendrá.

Aquí hay algunos conceptos fundamentales de entender que aprendimos en el Curso de CSS Grid Layout 👀.
.
Aquí se empieza a trabajar de una forma diferente con las propiedades CSS, ya no los llamamos “vertical”, “horizontal”, “derecha”, “izquierda”. sino que, ahora teniendo en cuenta los diferentes modos de escritura, empezamos a pensar de una forma diferente, ahora tenemos elementos tipo inline o block y tenemos start y end.
.

1. Elementos inline: Son los elementos que comúnmente conocemos como horizontales, aunque realmente este concepto puede cambiar si cambiamos el modo de escritura
2. Elementos block: Son los elementos que comúnmente conocemos como verticales, aunque realmente este concepto puede cambiar si cambiamos el modo de escritura

.
Esto es muy importante tenerlo en cuenta al momento de hablar de Flexbox y CSS Grid porque es la nueva forma de como tenemos que empezar a ver a CSS 👀.

De manera predeterminada, el contenido de un elemento de nivel de bloque es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los elementos en línea tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con display: block; (o incluso, display: inline-block;, que combina características de ambos).
.
EJEMPLO
.

<h1>Flujo de los documentos básicos</h1>

<p>Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.</p>

<p>Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.</p>

<p>Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.</p>

<p>Los elementos en línea <span>como este</span> y <span>este otro</span> se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, <span>sigue por la línea siguiente, si es posible (como la que contiene este texto)</span>, o simplemente pasa a una línea nueva, como hace esta imagen: <img src="https://s2.qwant.com/thumbr/0x380/f/a/a1d574eae9a53f2a03977244442557544cd0074c90697b391e1e2d09255b3a/Dragon-Ball-Z-Kakarot_Goku.png?u=https%3A%2F%2Fassets.rpgsite.net%2Fimages%2Fimages%2F000%2F083%2F181%2Foriginal%2FDragon-Ball-Z-Kakarot_Goku.png&q=0&b=1&p=0&a=1"></p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255,84,104,0.3);
  border: 2px solid rgb(255,84,104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}```

**EL VILLANO **

Amo utilizar inline-block por que me permite posicionar elementos en linea, sin necidad de usar el fastidioso float (al que luego toca hacerle un clear), y a la vez puedo definirle al elemento ancho, alto y margen. Con estos cursos de Teff estoy aprendiendo que con flex y grid se puede lograr lo mismo y mucho más… Pero los confieso, soy #teamVillanoInlineBlock 😈

• La propiedad display tiene dos valores:

1. El primer valor representa el comportamiento externo del contenedor:

display: flex;  y display: grid;

se comportaran como elementos block es como si tuvieramos :

display: block-flex;  y display: block-grid; 

Con respecto a los otros elementos padres se ubicaran uno debajo sin importar el ancho que pueda utilizar dicho elemento.

Mientras que los elementos con propiedad:

display: inline-flex;  y display: inline-grid;

Se posicionaran uno después del otro en forma lineal:

1. El segundo valor representa el comportamiento interno del contenedor:

display: grid;

Por defecto los contenedores hijos valor grid se comportaran de esta manera:

• Mientras que con flex como segundo valor tenemos lo siguiente:

display: flex;

Independientemente que tenga inline o block su valor interno dependera del segundo valor. (recordemos que si no le colocamos el primer valor a el display se tomara como valor block.

quedé 🤯 solo con esta clase
FrontEnd dev + 1 level up !

Display:

• Diccionario: Desplegar, Color a la vista, exhibir,
• CSS: Define el tipo de visualizacion del elemente

Nos centramos mas en los valores y no en la propiedad

• Bloque: Se extienden ocupando todo el espacio disponible entre ellos
• Inline: Son como palabras en una oracion: Se separan por medio de un espacio blanco entre ellos

Estos definen el valor externo de visualizacion y el valor interno de visualizacion.

Display:Grid realmente es un Display:Block Grid

Los bloques tienen ancho,alto, padding margin y estirarse en todo el espacio.

A los elementos internos del contenedor gird se les ha dado un valor interno de grid.

Ahora sabemos que el display:Flex es realmente un display:inline-flex

Siempre volveremos al flujo normal del documento, esto es como se comportan los elementos de HTML por defecto.

BENEFICIOS DE TRABAJR CON EL FLUJO NORMAL:

• Flujo mas agradable y legible
• CSS mucho mas facil
• Menos problemas de accesibilidad

👌

Para quienes quieren leer más al respecto.

MDN display

Entonces Block y Inline es el diseño prediseñado basado en las propiedades de las etiquetas de html.

Vi este termino Inline-block de manera autodidacta hace unos meses, pero ahora lo comprenderé mejor ya teniendo como basea CSS Grid y flexbox.

block-grid = grid
block-flex = flex
inline-grid y el inline-flex ambos se comportaron de manera externa en inline, e internamente grid y flex respectivamente

Comparto este articulo bien interesante donde hicieron una encuesta sobre cómo organizar las propiedades de CSS: https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685

Definición de display: desplegar, colocar a la vista, exhibir, lucir, mostrar, presentar.

• block elements: Se extienden ocupando todo el espacio disponible para ellos.
• inline: Son como palabras en una oración: se separan por medio de un espacio en blanco entre ellos.

El flujo normal del documento usa block e inline.

Estefa muchas gracias, no conocia las propiedades inline-flex, inline-grid, excelente dato

espero que les ayude a comprer mejor estos conceptos
DISPLAY : FLEX

DISPLAY : GRID

los inline simpre toman el ancho y alto de su contenido

Realmente teffcode si nos cambia la forma en que vemos CSS, ya no los vemos como un lenguaje de trucos para dar estilos, sino mas bien ya como un lenguage de estilos mejor estructurado y estable.

Notas de la clase

Si trabajamos de esta forma obtendremos:
Flujo más agradable y legible
CSS mucho más fácil
Menos probable de tener problemas de accesibilidad (ya que está trabajando con el orden de los documentos que es exactamente lo que está haciendo un lector de pantalla o una persona que revisa el documento)

Dejo un par de enlaces donde pueden aprender màs sobre el flujo del documento

https://desarrolloweb.com/articulos/flujo-html-atributos-css.html

https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Normal_Flow

No me acordaba de estos segnificados, estoy muy emocionado al ver este curso

Siempre está lo malo y lo bueno y debemos saber liderar con el villano que es inline-block