Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:1eval:tema06 [2025/11/04 22:32] – Lorenzo
+++ clase:daw:diw:1eval:tema06 [2025/11/07 12:28] (actual) – Lorenzo
@@ Línea 1: / Línea 1: @@
-El código fuente de la wiki con los cambios aplicados, incluyendo el prefijo **"l-"** en todas las clases de *layout* (BEM Blocks, Elements, y Modifiers), es el siguiente. He realizado las sustituciones en todos los bloques de código (`<sxh html>`, `<sxh css>`) y en el texto circundante.
-```
 ====== 6. Flex y Grid ======
 En este tema vamos a explicar principalmente el layout en CSS con //flexbox// y //grid//.
@@ Línea 9: / Línea 6: @@
 Flex se utiliza para colocar cosas de forma horizontal o vertical.
-  * [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|A Complete Guide to Flexbox]]
-  * {{css_flexbox_layout_cheatsheet.pdf|Flexbox Layout Cheatsheet. Otra gía rápida de flexbox}}
+  * [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|A Complete Guide to Flexbox]]
-  * [[https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc|The Complete CSS Flex Box Tutorial]]
+  * {{css_flexbox_layout_cheatsheet.pdf|Flexbox Layout Cheatsheet. Otra gía rápida de flexbox}}
-  * [[https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2|Flexbox — The Animated Tutorial]]
+  * [[https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc|The Complete CSS Flex Box Tutorial]]
-  * [[https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties|In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?]]
+  * [[https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2|Flexbox — The Animated Tutorial]]
-  * [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]]
+  * [[https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties|In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?]]
+  * [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]].
 Vamos a explicar flex con el siguiente ejemplo:
@@ Línea 21: / Línea 20: @@
   <div class="l-flex__area">Item1</div>
   <div class="l-flex__area">Item2</div>
-  <div class="l-flex__area l-Flex-area--grow2">Item3</div>
+  <div class="l-flex__area l-flex__area--grow-2">Item3</div>
   <div class="l-flex__area">Item4</div>
   <div class="l-flex__area">Item5</div>
@@ Línea 712: / Línea 711: @@
 </landing-page>
 </sxh>
-```