logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza:
clase:daw:diw:1eval:tema05

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
clase:daw:diw:1eval:tema05 [2021/11/05 20:22]
admin 		clase:daw:diw:1eval:tema05 [2024/11/03 22:33] (actual)
admin [Flexbox]
Línea 15: Línea 15:
 Vamos a explicar flex con el siguiente ejemplo: Vamos a explicar flex con el siguiente ejemplo:
 <sxh html> <sxh html>
-<div class="container"> +<div class="l-flex l-flex--direction-row l-flex--justify-content-center"> 
-  <div>Item1</div> +  <div clas="l-flex__area">Item1</div> 
-  <div>Item2</div>  +  <div clas="l-flex__area">Item2</div>  
-  <div>Item3</div> +  <div clas="l-flex__area l-flex__area--grow-2 ">Item3</div> 
-  <div>Item4</div>  +  <div clas="l-flex__area">Item4</div>  
-  <div>Item5</div> +  <div clas="l-flex__area">Item5</div> 
 </div> </div>
 </sxh> </sxh>
Línea 26: Línea 26:
  
 <sxh css> <sxh css>
-.container {+.l-flex {
   display:flex;   display:flex;
-  justify-content:flex-start; 
-  align-content:flex-start 
-  align-items:flex-start; 
 } }
  
  
 +.l-flex--direction-row {
 +  flex-direction:row
 +}
  
 +.l-flex--justify-content-center {
 +  justify-content:center
 +}
 +
 +.l-flex__area--grow-2 {
 +  flex-grow:2
 +}
  
 </sxh> </sxh>
  
 Como vemos hay dos tipos de elementos, el contenedor y los items que hay centro. El contenedor siempre tendrá la siguiente línea ''display:flex;''. Como vemos hay dos tipos de elementos, el contenedor y los items que hay centro. El contenedor siempre tendrá la siguiente línea ''display:flex;''.
 +
 +  * Veamos otro ejemplo:
 +
 +<sxh html>
 +<div class="l-flex l-flex--direction-row l-flex--justify-content-center">
 +  <div clas="l-flex__area">
 +  
 + <div class="l-flex l-flex--direction-row l-flex--justify-content-center">
 +   <div clas="l-flex__area"></div>
 +   <div clas="l-flex__area"></div>   
 + </div>
 +  
 +  </div>
 +  <div clas="l-flex__area">Item2</div> 
 +  <div clas="l-flex__area l-flex__area--grow-2 ">Item3</div>
 +  <div clas="l-flex__area">Item4</div> 
 +  <div clas="l-flex__area">Item5</div> 
 +</div>
 +</sxh>
  
 Ahora veremos algunas de las opciones que permite flex. Ahora veremos algunas de las opciones que permite flex.
Línea 98: Línea 124:
  
 ==== flex-grow ==== ==== flex-grow ====
-Permite que crezca el item si hay mas espacio.+Permite que crezca el item si hay mas espacio. Por defecto el valor es ''0'' que significa que no crece, sino que se queda con el espacio que necesita para su contenido.
  
-  * ''flex-grow:2'' Este item crecería el doble si se hace mas grande el contenedor.+  * ''flex-grow:1'': Todos los items con este valor crecerán para ocupar más espacio pero todos los que tengan este valor tendrán el mismo tamaño entre ellos 
 +  * ''flex-grow:2'': Como al anterior pero todos los que tengan este valor tendrán el mismo tamaño entre ellos pero el **doble** que los de ''flex-grow:1'' 
 +  * ''flex-grow:3'': Como al anterior pero todos los que tengan este valor tendrán el mismo tamaño entre ellos pero el **triple** que los de ''flex-grow:2''
  
 {{:clase:daw:diw:1eval:flex-grow.png|}} {{:clase:daw:diw:1eval:flex-grow.png|}}
  
-<note important>Se usa entro de los "hijos"</note>+ 
 +<note tip>Se usa entro de los "hijos"</note> 
 + 
 +En el siguiente ejemplo, ''AAAAA'' tendrá el espacio mínimo para que quepa el texto mientras que ''BBBBB'' y ''CCCCC'' se expandirán hasta ocupar todo el espacio disponible pero ''CCCCC'' ocupará el doble que ''BBBBB'' 
 +<sxh html> 
 +<div style="display: flex;"> 
 +    <div style="flex-grow: 0;border:1px solid red">AAAAA</div> 
 +    <div style="flex-grow: 1;border:1px solid red">BBBBB</div> 
 +    <div style="flex-grow: 2;border:1px solid red">CCCCC</div> 
 +</div> 
 +</sxh> 
 + 
 +<note tip> 
 +Si definimos ''flex-grow'', el item crecerá hasta tener un tamaño mayor o justo el den contenido, así que no tiene sentido usar ''flex-shrink:1'' ya que ya se podría hacer más pequeño ni usar ''flex-basis'' ya que no tendrá un tamaño fijo. 
 +</note> 
 + 
 + 
 +==== flex-shrink ==== 
 +Indica que un item puede reducir su tamaño en comparación con otros items cuando el contenedor es más pequeño que el tamaño total de los elementos. 
 + 
 +  * ''flex-shrink:1'': Los items con este valor pueden reducir su tamaño para ajustarse al contenedor. 
 +  * ''flex-shrink:0'': Los items con este valor no se reducirá, independientemente del tamaño del contenedor. 
 + 
 + 
 +Ejemplo: Si tienes tres elementos en un contenedor y uno tiene flex-shrink: 0, este no se reducirá, mientras que los otros dos se reducirán según sea necesario para encajar en el contenedor. 
 + 
 + 
 +<note tip>Se usa entro de los "hijos"</note> 
 + 
 +<note tip> 
 +Solo tiene sentido usar ''flex-shrink:1'' si se indica ''flex-basis'' y si valor no es ''auto''.  
 + 
 +Ya que si ''flex-basis:auto'' el item ya tendré el tamaño mínimo del contenido así que no se podrá hacer más pequeño y por lo tanto no se necesita ''flex-shrink:1'' 
 +</note> 
 + 
 +==== flex-basis ==== 
 +Define el tamaño inicial de un item antes de que se aplique el crecimiento o la reducción. Es el tamaño en el que se basa el elemento antes de que el espacio adicional sea distribuido (con ''flex-grow'') o el espacio sea reducido (con ''flex-shrink''). El tamaño inicial se puede establecer en ''px'', ''%'', ''em'', etc. Por defecto el tamaño inicial es ''auto'' y significa que el tamaño es el del contenido. 
 + 
 +<note tip>Se usa entro de los "hijos"</note> 
 + 
 +Veamos ahora un ejemplo completo de las 3 propiedades: 
 + 
 +<sxh python> 
 +<!DOCTYPE html> 
 +<html lang="es"> 
 +<head> 
 +    <meta charset="UTF-8"> 
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 +    <title>Ejemplo de Flexbox</title> 
 +    <style> 
 +        .container { 
 +            display: flex; 
 +        } 
 +        .item { 
 +            border: 1px solid #FF0000; 
 +        } 
 +        .item1 { 
 +            flex-basis: 300px;  
 +            flex-shrink: 1; 
 +        } 
 +        .item2 { 
 +            flex-basis: 300px; 
 +            flex-shrink: 0; 
 +        } 
 +        .item3 { 
 +            flex-grow:1 
 +        } 
 +    </style> 
 +</head> 
 +<body> 
 + 
 +<div class="container"> 
 +    <div class="item item1">AAAAAAAAAAAAAAA</div> 
 +    <div class="item item2">BBBBBBBBBBBBBBB</div> 
 +    <div class="item item3">CCCCCCCCCCCCCCC</div> 
 +</div> 
 + 
 +</body> 
 +</html> 
 +</sxh> 
 + 
 +La explicación es: 
 +  * El ''item1'' empieza con un tamaño de ''300px'' (por ''flex-basis: 300px;'') pero se puede hacer más pequeño si es necesario (por ''flex-shrink: 1;'') 
 +  * El ''item2'' empieza con un tamaño de ''300px'' (por ''flex-basis: 300px;'') pero **NO** se puede hacer más pequeño (por ''flex-shrink: 0;'') 
 +  * El ''item3'' ocupará todo el espacio que haya libre (por ''flex-grow:1'') y eso incluye hacerlo más grande o pequeño 
 + 
  
  
 ==== flex ==== ==== flex ====
 Es poner en una misma linea ''flex-grow'', ''flex-shrink'' y ''flex-basis'' Es poner en una misma linea ''flex-grow'', ''flex-shrink'' y ''flex-basis''
- 
-  * ''flex: 1 1 auto'' Si se indica en todos los hijos, hace que todos los //hijos// ocupen todo el espacio  y todos ellos tengan el mismo ancho. 
  
  
-<note important>Se usa entro de los "hijos"</note>+<note tip>Se usa entro de los "hijos"</note>
  
 Mas información en: Mas información en:
Línea 145: Línea 257:
  
 <note tip> <note tip>
-{{ :clase:daw:diw:1eval:flex-frog.png?direct&400 |}}+{{ :clase:daw:diw:1eval:flex-frog.png?direct&100 |}}
 Para aprender flexbox puede jugar a [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]] Para aprender flexbox puede jugar a [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]]
  
Línea 163: Línea 275:
     * [[https://css-tricks.com/css-grid-replace-flexbox/|Does CSS Grid Replace Flexbox?]]     * [[https://css-tricks.com/css-grid-replace-flexbox/|Does CSS Grid Replace Flexbox?]]
   * Mas información:   * Mas información:
-    * [https://css-tricks.com/almanac/properties/j/justify-items/|justify-items]]+    * [[https://css-tricks.com/almanac/properties/j/justify-items/|justify-items]]
     * [[https://www.youtube.com/watch?v=0Gr1XSyxZy0|Los 9 grandes errores con CSS Grid]]     * [[https://www.youtube.com/watch?v=0Gr1XSyxZy0|Los 9 grandes errores con CSS Grid]]
     * [[https://css-tricks.com/things-ive-learned-css-grid-layout/|Things I’ve Learned About CSS Grid Layout]]      * [[https://css-tricks.com/things-ive-learned-css-grid-layout/|Things I’ve Learned About CSS Grid Layout]] 
Línea 201: Línea 313:
 Ejemplos: Ejemplos:
   * ''grid-template-columns: 1fr 1fr 2fr'' La última columna tendrá el doble de tamaño que las anteriores   * ''grid-template-columns: 1fr 1fr 2fr'' La última columna tendrá el doble de tamaño que las anteriores
-  * ''grid-template-columns: 1fr 1fr 50px'' La segunda columna tendrá el doble de tamaño que la primera. La última siempre 50px+  * ''grid-template-columns: 1fr 1fr 50px'' La segunda columna tendrá el mismo de tamaño que la primera. La última siempre 50px
   * ''grid-template-columns: 1fr 2fr 80px auto'' La última tendrá un tamaño mínimo posible, la tercera tendrá 80px, la segunda el doble que la primera.   * ''grid-template-columns: 1fr 2fr 80px auto'' La última tendrá un tamaño mínimo posible, la tercera tendrá 80px, la segunda el doble que la primera.
  
Línea 255: Línea 367:
  
 Que hará que cada columna ocupe como mínimo 100px y si hay mas espacio crecerá hasta ocupar todo. Pero se crearán tantas filas como sea necesario. Mas información en   [[https://timwright.org/blog/2017/08/26/css-grid-layout/|repeat,auto-fit,minmax,1fr]]  y en [[https://www.youtube.com/watch?v=mVQiNpqXov8|MinMax in CSS Grid — 3/3 Flexibility]] Que hará que cada columna ocupe como mínimo 100px y si hay mas espacio crecerá hasta ocupar todo. Pero se crearán tantas filas como sea necesario. Mas información en   [[https://timwright.org/blog/2017/08/26/css-grid-layout/|repeat,auto-fit,minmax,1fr]]  y en [[https://www.youtube.com/watch?v=mVQiNpqXov8|MinMax in CSS Grid — 3/3 Flexibility]]
 +
 +<note tip>
 +La función ''minmax'' es similar a las propiedades css de:
 +  * ''min-width''
 +  * ''min-height''
 +  * ''max-width''
 +  * ''max-height''
 +</note>
 +
 +==== Ejemplo ====
 +Veamos ahora un ejemplo de la diferencia entre ''repeat(4,1fr)'' , ''repeat(auto-fit,100px)'' y ''repeat( auto-fit, minmax( 100px, 1fr ) )''
 +
 +<sxh css>
 +.container {
 +    display:grid;
 +    grid-template-columns: repeat(4,1fr);
 +}
 +.container2 {
 +    display:grid;
 +    grid-template-columns: repeat(auto-fit,100px);
 +}
 +.container3 {
 +    display:grid;
 +    grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
 +} 
 +
 +.container4 {
 +    display:grid;
 +    grid-template-columns: repeat( 4, minmax( 100px, 1fr ) );
 +} 
 +  
 +.item {
 +    border:1px solid red;
 +}
 +.item2 {
 +    border:1px solid green;
 +}
 +.item3 {
 +    border:1px solid blue;  
 +}
 +
 +.item4 {
 +    border:1px solid pink;  
 +}
 +</sxh>
 +
 +<sxh html>
 +  <p>repeat(4,1fr)</p>
 +<div class="container">
 +  <div class="item">Item1</div>
 +  <div class="item">Item2</div>
 +  <div class="item">Item3</div>  
 +  <div class="item">Item4</div> 
 +  <div class="item">Item5</div> 
 +  <div class="item">Item6</div> 
 +  <div class="item">Item7</div>
 +  <div class="item">Item8</div>  
 +</div>
 +<br>
 +<p>repeat(auto-fit,100px)</p>
 +<div class="container2">
 +  <div class="item2">Item1</div>
 +  <div class="item2">Item2</div>
 +  <div class="item2">Item3</div>  
 +  <div class="item2">Item4</div> 
 +  <div class="item2">Item5</div> 
 +  <div class="item2">Item6</div> 
 +  <div class="item2">Item7</div>
 +  <div class="item2">Item8</div>  
 +</div>
 +<br>
 +<p>repeat( auto-fit, minmax( 100px, 1fr ) )</p>
 +<div class="container3">
 +  <div class="item3">Item1</div>
 +  <div class="item3">Item2</div>
 +  <div class="item3">Item3</div>  
 +  <div class="item3">Item4</div> 
 +  <div class="item3">Item5</div> 
 +  <div class="item3">Item6</div> 
 +  <div class="item3">Item7</div>
 +  <div class="item3">Item8</div>  
 +</div>
 +
 +<p>repeat( 4, minmax( 100px, 1fr ) )</p>
 +<div class="container4">
 +  <div class="item4">Item1</div>
 +  <div class="item4">Item2</div>
 +  <div class="item4">Item3</div>  
 +  <div class="item4">Item4</div> 
 +  <div class="item4">Item5</div> 
 +  <div class="item4">Item6</div> 
 +  <div class="item4">Item7</div>
 +  <div class="item4">Item8</div>  
 +</div>
 +
 +</sxh>
  
 ==== grid-template-rows ==== ==== grid-template-rows ====
Línea 269: Línea 477:
  
 {{:clase:daw:diw:1eval:grid-gap.png|}} {{:clase:daw:diw:1eval:grid-gap.png|}}
 +
 +
 +<note important>
 +La propiedad ''gap'' también funciona con **flex**</note>
 +
  
  
Línea 317: Línea 530:
 </sxh> </sxh>
  
 +==== span ====
 +Se puede hacer que un elemento ocupe más de una columna con ''grid-column: span x;'' siendo ''x'' el número de columnas que quieres que se expanda.
 +
 +<sxh css>
 +.l-columns {
 +  display: grid;
 +}
 +
 +.l-columns--4{
 +  grid-template-columns: repeat(4, 1fr);
 +}  
 +
 +.l-columns__area {
 +
 +}
 +.l-columns__area--span-2 {
 +  grid-column: span 2;
 +}
 +</sxh>
 +
 +
 +<sxh html>
 +  <div class="l-columns l-columns--4">
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area l-columns__area--span-2"></div>
 +    <div class="l-columns__area"></div>                    
 +  </div>
 +</sxh>
 +
 +  * Mas información
 +    * [[https://webdesign.tutsplus.com/how-to-build-web-form-layouts-with-css-grid--cms-28776t|How to Build Web Form Layouts With CSS Grid]]
 +    * [[https://www.scale.at/blog/responsive-form-layout-css-grid|Tutorial: A Responsive Form Layout with CSS Grid]]
 ===== Reglas BEM de Layout ===== ===== Reglas BEM de Layout =====
 Para hacer una clase de Layout hay que seguir las siguientes reglas: Para hacer una clase de Layout hay que seguir las siguientes reglas:
clase/daw/diw/1eval/tema05.1636140141.txt.gz · Última modificación: 2021/11/05 20:22 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki