Bienvenido a ¨Medellin CSS¨
Estamos Felices con Esta Nueva Comunidad
Luisa Fernanda Vaca Correa.
Front-End Developer - Globant
¨Flexbox¨
Tablas
Float
Clear: Both
Elementos colapsados.
Problemas de alineación.
etc...
Title Text
Un Sistema de Contenedores Flexibles
Escrituras verticales
Escrituras de derecha a izquierda
Comenzar con Flexbox
.div{
display: flex
}La propiedad flex definirá unos valores iniciales.
div {
flex-direction: row;
flex-basis: auto;
flex-wrap: nowrap;
//Los ítems empiezan desde el margen inicial sobre el eje principal.
//Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.
//Los ítems se ajustarán para llenar el tamaño del eje cruzado.
}Valores Computados .
Contenedores Flex Multi-Linea.
div {
flex-wrap: wrap;
}Propiedades aplicadas a los elementos.
div {
flex-grow: /*tamaño n*/;
flex-shrink: /*tamaño n*/;
flex-basis: /*tamaño n*/
}Todas estas propiedades nos ayudarán a setear tamaños, ya sea de crecimiento, de limite o de contracción.
flex-shrink: Especifica el factor de contracción.
flex-basis: Especifica la base flexible.
flex-grow de CSS especifica el factor de crecimiento.
Alineación, justificación y distribución del espacio.
div{
align-items: stretch;
justify-content: flex-start;
}align-items: alinea los elementos de la línea flexible actual de la misma forma que justify-content, pero en dirección perpendicular.
justify-content: Define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.
Done!
Medellin CSS
By LUISA FERNANDA VACA CORREA
