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 [2024/11/03 22:19]
admin [Flexbox] 		clase:daw:diw:1eval:tema05 [2024/11/03 22:33] (actual)
admin [Flexbox]
Línea 143: Línea 143:
 </div> </div>
 </sxh> </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>
  
  
Línea 156: Línea 160:
  
 <note tip>Se usa entro de los "hijos"</note> <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 ==== ==== flex-basis ====
Línea 204: Línea 214:
  
 La explicación es: La explicación es:
-  * El ''item1'' empieza con un tamaño de ''300px'' pero se puede hacer más pequeño si es necesario +  * 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'' pero **NO** se puede hacer más pequeño +  * 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 '''' y eso incluye hacerlo más grande o pequeño+  * El ''item3'' ocupará todo el espacio que haya libre (por ''flex-grow:1'') y eso incluye hacerlo más grande o pequeño 
  
-<note tip> 
-Si no definimos ''flex-basis'', el item por defecto tiene el tamaño del contenido, así que no tiene sentido user ''flex-shrink:1'' ya que no se puede hacer más pequeño. 
-</note> 
  
-<note tip> 
-Si definimos ''flex-grow'', el item crecerá hasta tener un tamaño mayor , así que no tiene sentido usar flex-shrink:1 ya que se podría hacer más pequeño ni usar ''flex-basis'' ya que no tendrá un tamaño fijo. 
-</note> 
  
 ==== 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. 
  
  
clase/daw/diw/1eval/tema05.1730668753.txt.gz · Última modificación: 2024/11/03 22:19 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