0

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.

Everything in normal flow has a value of display, used as the default way that elements they are set on behave.

Hasta aquí comprendo que el flujo normal es el como los navegadores colocan los elementos por defecto, siempre usando la propiedad display.

Luego me confundo un poco con lo que sigue

The display property — Standard values such as block, inline or inline-block can change how elements behave in normal flow

Cambiando el valor de display solo cambio como el elemento se comporta en el flujo normal pero no sale del flujo normal.

When you use CSS to create a layout, you are moving the elements away from the normal flow

Cuando utilizo display: flex estoy creando un layout, de acuerdo con la cita de arriba (justo arriba de este párrafo) ademas yo movería al elemento del flujo normal.

Entonces con display solo cambio como la caja se comporta en el flujo normal no lo muevo del flujo normal a como da a entender la segunda cita, entonces no se que es el flujo normal...porque cuando toca explicar la propiedad position en el articulo que estoy leyendo,dice que position causa que el elemento salga completamente del flujo normal. Pero no se que es exactamente estar en el flujo normal. ¿Es el flujo normal cuando los elementos se colocan de acuerdo a la propiedad display? entonces decir que usar position saca al elemento del flujo normal porque ya no obedece a la propiedad display tiene sentido pero no se, estoy confundido. ayuda, por favor.

Bueno las citas las saque de aquí, que es donde estoy aprendiendo css:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

1
  • position es como se posiciona el elemento dentro de su contenedor. Static es lo normal, que es dentro del flujo. Absolute, te permite ponerlo en un lugar fijo. Y relative es relativo a su posición static. Cuando position no es static, se dice que está posicionado. Y cuando está posicionado podes usar top bottom left y right para setear la posición.
    – Juan
    Commented el 20 abr. 2020 a las 23:09

2 respuestas 2

0

Te respondo debajo de cada pregunta para llevar un orden.

¿Es el flujo normal cuando los elementos se colocan de acuerdo a la propiedad display? entonces decir que usar position saca al elemento del flujo normal porque ya no obedece a la propiedad display tiene sentido pero no se, estoy confundido. ayuda, por favor.**

El flujo normal es la forma en la que el navegador coloca inicialmente los elementos en la pantalla. De hecho de acuerdo a la **w3c el flujo normal son los elementos siendo colocados como cajas de bloque o cajas en linea.**

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously.

Cuando alteras este comportamiento estas sacando a los elementos del flujo normal

0

Las etiquetas HTML cuando son renderizadas en el navegador siguen 2 reglas para su disposición:

  • block
  • inline

Donde la primera genera que los elementos:

  • Se acomoden de extremo a extremo y queden apilados uno sobre otro

Mientras que los elementos en línea

  • Quedan en fila uno después del otro

Para caso práctico debes recordar que a los elementos en bloque si les puedes declarar un ancho y un alto mientras que para los elementos en línea no.

Caso 1

Entonces una web con una etiqueta de naturaleza bloque y 2 de naturaleza inline se verían así:

introducir la descripción de la imagen aquí

Nota

Pero esta disposición de los elementos que da el navegador por lo ya antes mencionado se puede perfectamente modificar si a los elementos que son bloque los volvemos en línea y/o al revés.

Caso 2

Por ejemplo al primer elemento lo volvemos en línea y a los 2 restantes en bloque lucirían algo asi:

introducir la descripción de la imagen aquí

Nota

Entonces con esa clave y valor facilmente modificamos el flujo regular que dichas etiquetas tienen.

Caso 3

De hecho con display: inline-block; poseemos una tercer opción para disponer elementos y si para nuestro ejemplo se lo aplicamos a los elementos in linea que son los de color tomate quedaría así:

introducir la descripción de la imagen aquí

Podemos observar que si modificamos esta propiedad de los elementos si alteramos el flujo regular que tienen en su acomodo pues dependiendo cual de las 3 según sea el caso apliquemos entonces pueden pasar de fila a columna.

Como referencias importantes de leer:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.