Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

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

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Dinámica: ¿Qué usarías? (Parte 1)

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Contextos de formato: Formato de Contexto de Bloque (BFC)

4/28
Recursos

Aportes 46

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

esta muy bien la información pero seria mejor si los ejemplos se hacen deferente en código con el VScode

Horrible. A ver si se esmeran y ponen algun curso de lo mismo pero con ejemplos practicos. No me suma nada alguien hablando 200 palabras por minutos y no me muestra nada de lo q esta diciendo. Esta chica piensa q tengo un chrome insertado en mi cabeza.

Apuntes de la clase:

Block formatting context (BFC)

Es el layout interno de un elemento, que se comporta de manera independiente a como se comporta el resto de la página

Si bien maneja la estructura interna de un elemento, utilizando position se puede sacar al elemento del flujo normal del documento, haciendo que este se reordene de una forma distinta

¿Que pasa con flexbox y grid?

Ambos formatos nacieron con la intensión de facilitar el diseño de la página. Mientras flexbox se basa en un formato donde se le da flexibilidad a los elementos y al contenedor, grid adquiere un formato de cuadricula** realmente facil de ordenar**

¿E Inline-block?

Inline-block es bastante facil de entender. Consta en una fusión de ambas partes, donde al igual que inline-flex e inline-block, externamente el elemento se situa de forma inline, pero por dentro puede adoptar propiedades block como width, left, etc…

Sobre flow-root
Personalmente no entendí cual es la funcionalidad de flow-root. Tuve que buscar en documentación y aun así no me quedó del todo clado su uso, pero entre sus caracteristicas resetea el flujo del documento, permitiendo posicionar correctamente los elementos float (que, al ser float, se descolocan del flujo, y al resetearlo lo vuelve a ubicar) esto es genial para casos donde tenes que usar elementos flotantes y no queres que se te desordene toda la caja

Aquí dejo más documentacion al respecto
https://www.programandoamedianoche.com/2018/05/conoce-flow-root-la-solucion-al-desborde-de-un-elemento-con-float/
https://www.campusmvp.es/recursos/post/display-flow-root-para-limpiar-floats-css.aspx

Vengo del curso de CSS Grid Layout, y este tiene el mismo problema que el otro: diapositivas, tal vez sea la forma en que ella enseña mejor. Pero se siente como una presentación de Slideshare o Prezi. La verdad no me está gustando este curso, espero que haya un poco más de práctica a lo largo del curso. 😥

Si no sabes que es “Posicionamiento flotante” puede ser que te impida entender bien la clase, yo necesité leerlo para entender.
Aquí puedes revisar el concepto:
https://uniwebsidad.com/libros/css/capitulo-5/posicionamiento-flotante

🍞 Contextos de formato: Formato de Contexto de Bloque (BFC)

<h4>Apuntes</h4>
  • BFC (Block Formatting Context) ⇒ Es un mini layout dentro de tu layout
    • En español significa “Formato de contexto de Bloque”
    • Se comporta de manera independiente a cómo se comporta el resto de la página
    • Si bien maneja la estructura interna de un elemento, utilizando position se puede sacar al elemento del flujo normal del documento, haciendo que este se reordene de una forma distinta
  • Tenemos un elemento flotante en el ejemplo anterior, en el cual las letras rodean al mismo, pero que pasaría si quitamos ese texto de alrededor
  • El layout interno se rompe una vez quitado el mismo
  • Si analizamos el elemento, lo que está pasando es que reducimos el contenedor, pero en el exterior se está creando un margen, pero tiene solución
  • Si usamos overflow: auto; se arregla

¿Por qué funciona?

  • Porque la propiedad overflow crea un BFC si su valor es diferente al inicial (visible)
  • Una característica de BFC es que contiene flotantes
<h4>¿Qué más crea un BFC?</h4>
  • Utilizar position: absolute o position: fixed
  • El uso de
    • display: inline-block
    • display: table-cell
    • display: table-caption

<h4>Flexbox y Grid</h4>
  • Ambos formatos nacieron con la intensión de facilitar el diseño de la página

Flexbox y CSS Grid también crean algo así como un BFC, excepto que se describen como:

<h4>Flexbox</h4>
  • Contexto de formato flexible ⇒ El elemento está participando en un diseño flexible
  • Se basa en un formato donde se le da flexibilidad a los elementos y al contenedor
<h4>CSS Grid</h4>
  • Contexto de formato de cuadricula ⇒ El elemento está participando en un diseño de cuadricula
  • Adquiere un formato de cuadricula realmente fácil de ordenar

  • display: inline-block crea un BFC y su hermano display: flow-root
    • display: inline-block ⇒ Da un BFC en una caja en línea
      • Consta en una fusión de ambas partes, donde al igual que inline-flex e inline-block, externamente el elemento se sitúa de forma inline, pero por dentro puede adoptar propiedades block como width, left, etc…
    • display: flow-root ⇒ Da un BFC en una caja de bloque
      • Permite posicionar correctamente los elementos float (que, al ser float, se descolocan del flujo, y al resetearlo lo vuelve a ubicar) esto es genial para casos donde tienes que usar elementos flotantes y no quieres que se te desordene toda la caja
  • Todo lo trabajamos bajo los conceptos de block e inline y se explica el diseño de CSS bajo estos dos conceptos
  • Podemos controlar el tipo de cuadro que se genera utilizando la propiedad display

RESUMEN: BFC (Block Formatting Context) es un pequeño layout el cual esta aparte de todo el documento. Este mismo se puede generar a partir de la propiedad position, pero cada una tiene su característica de manejar el contexto de formato. Diferentes elementos tienen su contexto de bloque

Ahora todo tiene sentido, siempre que aprendía sobre CSS decían: “Coloca el float: left; pero también ponle un overflow para que se arregle”, pero nadie decía por qué se arreglaba, ahora comprendo mejor el concepto.
.
Básicamente es como crear pequeños layouts dentro del mismo elemento por lo que entiendo, y en el caso del inline-block, se crean ambos layouts, lo que nos permite trabajar con las propiedades de ambas 🤔

como alguien que maqueta hace años, les digo que la mayoría de esta información es totalmente innecesaria, en más de 10 años jamás supe ni que existía el termino BFC. Maquetar es 99% práctica, este curso es 99% teoría…

por favor platzi actualizen el curso ¡¡¡¡¡ porfavor recomiendo mas practica que teoria

Acá le dejo el código del ejemplo del video para que puedan experimentar con las propiedades.
HTML.

 <div class="outer">
        <div class="float"> I am a floated element.</div>
        I am text inside the outer box

    </div>

CSS.

.outer {
    border: 5px dotted rgb(214, 129, 137);
    border-radius: 5px;
    width: 450px;
    padding: 10px;
    margin-bottom: 40px;
    overflow: auto;
}

.float {
    padding: 10px;
    border: 5px solid rgba(214, 129, 137, .4);
    border-radius: 5px;
    background-color: papayawhip;
    float: left;
    width: 200px;
    margin: 0 20px 0 0;
    
}

Porque yo tampoco entendí nada en esta clase… Aquí hay una segunda explicación de todo

Más practicidad por favor. Supongo que eso ya esta documentado en la red… Necesitamos practicidad, desenvolmimiento real de los temas expuesto. Siento que cada vez es peor

Estoy retomando esta ruta luego de llevarme una gran decepción con el curso anterior de Estefany. Les recomiendo que busquen en YouTube los cursos de Flex y Grid Layout de Kiko Palomares y FalconMasters. No tienen desperdicio, son muy didácticos y les van a aclarar un montón de dudas.

Hace falta mas practica en este tipo de clases.

Hola,

En las diapositivas se usan colores pastel de fondo y las fuentes de color blanco, lo que no genera contraste y hace que se force un poco la vista al ver los videos.

Quizá sea solo en mi caso, pero lo pongo a consideración del team para futuras revisiones del diseño.

Les recomiendo leer este post:
https://www.paradigmadigital.com/dev/css-display-dos-caras-de-misma-moneda/ me ayudo mucho a entender el tema de los display complementa muy bien lo de la clase sobre todo por los Outer/Inner values que no se mencionan

Oooh 😮 Que interesante!! Los he utilizado, pero no sabia lo que había detrás de todo esto.

Algunos elementos inline, block y inline-block

Por defecto, los elementos se presentan como block o inline, depende de que elemento hablemos, pero cuando colocamos display:grid/flex, le estamos dando un valor de BOXGRID o FLEXBOX, por eso, si nosotros queremos un comportamiento inline dentro del grid o flex debemos colocar INLINE-FLEX o INLINE-GRID.
Pero tambien hay una mezcla de ambos de los estilos por defecto, INLINE-BLOCK. Para entender esto, debemos conocer el BFC (Block Formatting Context), esto es como una interfaz dentro de nuestra interfaz y asi poder tener estructuras dentro de la estructura general, por ejemplo, si nosotros colocamos un texto corto y queremos agregarle una imagen mas alta que el texto con un float: left; y a esto le agregamos un border, el border tendra menos height que la imagen, esto se puede arreglar con un overflow: auto;
¿y por qué esto funciona? Porque el overflow crea un BFC si su valor es diferentea “visible”. Otras propiedades que crean un BFC son el position: absolute/fixed; y el uso de display: inline-block/table-cell/table-caption;
VALE ACLARAR que normalmente en nuestros layouts utilizamos bloques en linea
Cuando hablamos de display: inline-block; este nos generara un BFC en una caja EN LINEA. A diferencia de su hermano, display:flow-root; que nos generara un BFC en una caja de bloque
Para FlexBox, en vez de crar un BFC, se crea un “contexto de formato flexible” que quiere decir que es parte de un flexible, y para Grid un “contexto de formato de cuadricula” que significa que forma parte de una cuadricula.

vengo de tomar todos los demas cursos de Css y Html y la verdad me esta ayudando a comprender mucho mejor los conceptos que ya se han practicado.

Como crítica constructiva en el min 4:08, deberían revisar bien los colores que usan para las diapos de las clases. No se ve bien el color “turquesa”, cansa la vista.

Luego todo bien.

gracias @teffcode, la documentacion y la clase me permitio arreglar mi pagina sin crear tediosas scrollbars
![](
![](

No me está gustando nada las clases así que solo explica y nada de práctica espero arreglen este problema porque siento que es algo súper interesante pero lo explican en modo escuela tradicional a pura diapositiva 👎🏻

La informacion esta brutal cosa que no esta tan explicada en otros cursos pero seria muchisimo mejor si explicara con codigo. porque asi se puede practicar, en cambio absorber informacion como una esponja no tiene el mismo efecto.

  • La fundamentación teórica es un proceso necesario para la resolución de problemas.
    En esta clase se abordaron temas como display inline-block, BFC, overflow; auto;

  • Como interactuan flexbox y grid en la tematica de flotantes, y se explica el proque podemos resolver los problemas con overflow y que se genera para solucionar ese problema.

  • Conocer un poco más de las propiedades de las etiquetas de HTML nos hará mejorar el flujo normal.

Estoy pagando por un curso que no cumple mis expectativas. FalconMaster en youtube tiene muchísimo mejores cursos. Desesperada por dar de nuevo con algún curso de Diego de Granda.

Esto es demasiado teórico. Se me están haciendo aborrecibles los cursos de esta profesora. Entre mal estructurados y que le da mucho peso a aspectos teóricos no tan importantes y pasa al vuelo lo que sí es de importancia práctica, se han ido los cursos de flex y grid.

Overflow, básicamente es un “desbordamiento” del hijo sobre el padre, tu decides que hacer con lo que “sobra”

Esto me ayudo a comprender lo que explicó. Tiene varios ejemplos de uso:
https://medium.com/@ritz078/block-formatting-contexts-in-css-3a9555355019

Si bien algunos ya las conocía, estoy aprendiendo muchos conceptos nuevos que me están volando la cabeza, jaja. Si bien tanta teoría parece pesada para una escuela que es bastante práctica, creo que este formato teórico le da más profesionalismo al curso.

Me siento bastante contento.

Este artículo es muy bueno y ayuda a complementar la clase: https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/

Block Formatin Context => Es un mini layout dentro de tu layout.

  • Display: inline-block; => Da un BFC en una caja en línea.
  • Display: flow-root; => Da un VFC en una caja de bloque.

Es un mini layout dentro de nuestro layout.

En ocaciones cuando tenemos elementos flotntes dentro de contenedores, estos se achican y el elemento flotante queda ahi sobrando o desvordandose. Para poder arreglar esto podemos un overflow:auto. Esto funciona porque la propiedad overflow crea un BFC si su valor es diferente al inicial. Y una de las caracteristicas de BFC es que contiene flotantes.

Un BFC tambien nos permite utilizar un position: absolute o fixed.

El uso de display:inline-block display:table-cell o display:table-caption.

Flexbox y CSS Grid crean algo asi como un BFC, excepto que se describe de la siguiente manera:

Flexbox: Contexto de Formato Flexible

Grid: Contexto de formato de cuadricula.

Display:Inline-block crea un BFC pero tiene un hermano menor que es Display:Flow-root que nos crea una caja de bloque.

Podemos controlarel tipo de cuadrado que se genera utilizando la propiedad display.

Hasta el momento 6/10

Resumiendo para crear un BFC y salvar el error hay dos alternativas, la primera sin usar flex o grid y la segunda usando flex o grid
Sin flex o grid
En este caso en la clase padre defino alguna de las siguientes reglas

display: inline-block;
overflow: auto;
position: absolute;
position: fixed;

Y en la clase hijo mantengo la propiedad
float: left;

Con flexbox
Es mas intuitivo ya que no necesito en la clase hijo la propiedad
float: left;
La elimino y agrego en la clase padre la propiedad
display:flex
y con esto soluciono el problema

Si valiosa información quieres obtener, nunca parar de aprender entonces debes
"Yoda version "

Formato de Contexto de Bloque (BFC).
Es un layout pequeño, dentro de nuestro layout principal. Es como tener pequeñas estructuras dentro de nuestra estructura general.
Cuando uno de los elementos pequeños sobre pasa los límites del elemento principal, se produce un overflow, que podemos arreglar con la propiedad overflow: auto;.

overflow: auto;: Crea un BFC si su valor es diferente al inicial (visible).

BFC (block formatting context).

  • Tiene como característica contener flotantes.
  • Puedes utilizar position: absolute | fixed.
  • Puedes usar display: inline-block | table-cell | table-caption.

El similar de BFC.
Flexbox: Contexto de Formato Flexible, significa que el elemento está participando en un diseño flexible.
CSS Grid: Contexto de Formato de Cuadrícula, significa que el elemento está participando en una cuadrícula.

display: inline.block; Da un BFC en una caja en línea.
display: flow-root; Da un BFC en una caja de bloque.

Notas de la clase

Excelente aporte

Y yo creyendo que ya sabia mucho de CSS 🤔

Entender lo que hacemos vuelve el trabajo algo más efectivo y racional, al menos en mi caso siempre que escribía líneas y líneas a veces definía un width, un margin o cualquier propiedad inherente a un elemento en _bloque _y simplemente no funcionaba, como resultado me frustraba o pasaba horas intentando averiguar el error. Tener bases teóricas ayuda realmente en la solución de muchos errores

Todas las etiquetas del lenguaje HTML se pueden clasificar en etiquetas de línea o de bloque.

Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario en horizontal, y permite que otro elemento se coloque a su lado. En cambio una etiqueta de bloque, ocupa todo el ancho disponible y no permite que otro elemento se coloque a su lado (aunque aparentemente tenga lugar suficiente).

Etiquetas de línea (las más usadas):
<a>, <span>, <strong>, <img>, <input>, <code>

Etiquetas de bloque (las más usadas):
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <div>, <header>, <nav>, <section>, <article>, <footer>, <form>, <table>

Me encanto este dato! Muchas gracias!

Un contexto de formato de bloque es parte del renderizado CSS visual de una página web. Es la región en que ocurre la disposición de las cajas de bloque y en la cuál los elementos flotantes interactúan los unos con los otros.