Deja de usar floats para los layouts en css

abril 14, 2020

Por fin (Después de años de flexbox) he encontrado un approach fácil de entender para dejar de usar el típico float left para hacer layouts

.row { overflow: hidden }
.col { float: left }
.col-50 { width:50% }
@media (max-width: 600px){ .col-50 { width: 100% } }
Ejemplo de mis típicos tristes layouts de CSS

El cambio es usar display: flex y flex-wrap: wrap para sustituir floats y overflows con muchas ventajas como tener mejor control de tus márgenes y padding y calcular mejor tus columnas. Si eres oldschool como yo, puedes poner columnas dentro con porcentajes y quedaría asi

.row { display: flex; flex-wrap: wrap; }
.col-50 { width:50% }
@media (max-width: 600px){ .col-50 { width: 100% } }
Ejemplo de mis típicos tristes layouts de CSS pero ahora con flexbox

Pero espera, se pone mejor

Y ya como última vuelta de tuerca es cómo escribimos los mediaqueries, es mucho más limpio usar min-width y afrontar esta lógica desde dispositivos pequeños (Mobile first)

@media (min-width: 600px){
.row { display: flex; flex-wrap: wrap; }
.col-50 { width:50% }
}
Ejemplo mejorado de layouts de CSS pero ahora con flexbox y menos código

Le debo todo esto al super master Kevin Powell en su video

Tags: Etiquetas: , ,