Con flexbox más sencillo es imposible. Viejas demos actualizadas 21.3.16
Rehaciendo y simplificando con el "flexbox" una vieja demo de galería que se presenta contraída y al hover sobre un ítem éste se expande y sus hermanos se contraen.
Con flexbox más sencillo es imposible. Viejas demos actualizadas
Al enfrentarte a viejos artículos que incluyen demos es inevitable pensar en lo que se necesitaba hace no tanto para cualquier realización mínimamente imaginativa y lo sencillo que resulta ahora hacer lo mismo y más pero con menos.
Un caso típico de estas situaciones es esta demo (una de las primeras en publicar en el blog) en la que simulo un selector de hermanos precedentes. Fue allá por Febrero de 2012.
Pero la realización era de bastante antes. No recuerdo su primera versión y tampoco amerita sumergirme en viejas y caducas páginas.
La idea es sencilla: distribución equitativa de la caja padre entre sus hijos y aumentar el tamaño del ítem al hacer :hover sobre él disminuyendo todos los demás.
La única dificultad estribaba en lograr disminuir el tamaño de los precedentes si el :hover se hacía en el segundo y siguientes.
Todo se resolvía ocupando todo el espacio del padre por los hijos y que fuese el :hover sobre la caja padre la que disminuyese a los hijos. Para a continuación declarar que al hacer :hover sobre un hijo cualquiera, éste creciese los que sus hermanos merman.
Demo
CSS significativo:
ul.acordeon {
position: relative;
width: 100%;
height: 100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
ul.acordeon > li {
margin: 0;
width: 25%; /*tamaño inicial*/
height: 100%;
float: left;
transition: .7s;
}
ul.acordeon:hover > li {
width: 15%;
}
ul.acordeon > li:hover {
width: 55%;
}
Este planteamiento más que veterano puedes verlo hoy día estuvo implementado en páginas como en el home de Mozilla, entre otras.
Contras
A este tipo de realizaciones se le pueden achacar algún que otro pero:
- Necesitas saber a priori el número de ítems.
- Has de hacer el cálculo de los tamaños de los ítems préviamente. Hoy algo más sencillo con la función 'calc().
- Más cálculos para redimensionar los tamaños al hacer
:hover. - Hay que flotar y limpiar el float. O usar inline-block y anular sus espacios en blanco.
Por citar los más evidentes.
Con flexbox más sencillo es imposible
Todos los "peros" desaparecen y queda automatizado si recurrimos al flebox. Y este podría ser un caso ejemplar entre hacer las cosas a la vieja usanza o con las nuevas herramientas.
- De entrada no es necesario actuar para que los ítems se coloquen uno junto al otro. Nada de flotados.
- Saber el número de ítems es un dato innecesario. Perfecto si se generan por programación y el número es variable.
- Por lo tanto tampoco hay que echar cuentas para distribuir el espacio del padre.
- Y a la hora del hover sólo necesitas una regla con una declaración.
- Y sobre todo, el cambiar la disposición de los ítems mediante @medias queries para pantallas pequeñas sólo necesita 1 línea de código
Primero la demo y después unos apuntes sobre el Css implicado:
See the Pen chromatic flex by Kseso (@Kseso) on CodePen.
El sencillo flex
El primer paso es crear el flexbox. Eso a estas alturas ya no necesita más explicaciones que recordar cómo:
section {
display: flex;
width: 100%;/*al gusto*/
height: 100vh;/*al gusto*/
}
Lo siguiente es colocar los ítems adyacentes y que se distribuyan el espacio como buenos hermanos. La segunda declaración ('transition') es de adorno:
article {
flex: 1;
transition: 1.2s;
}
No se necesita más a nivel estructural. El resto serían para ornamentarlos. A continuación sólo se necesita como te decía una regla con una declaración para hacer la redistribución de espacio al :hover sobre cualquier hijo:
article:hover {
flex: 10;
}
Y por último, si quieres mostrarlos apilados en la vertical en pantallas pequeñas, sólo otra declaración:
@media (max-width:500px) {
section {flex-direction: column;}
}
Y listo el pollo
que diría una amiga
Artículo publicado originalmente el 25 de Junio de 2014. Crédito y origen de la imagen del inicio Alejandro Bergado
![](https://www.pinterest.com/pin/create/button/?url=https://escss.blogspot.com/2014/06/flexbox-mas-sencillo-imposible.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtjQxQa2ttsHPTwQj6Bh8X7pVPC227T4QJFzmGc-1DPWkbt_VRzYdlWcF11x_gwFuPfHOk0L75Gz5Q0jl7iWp7eyv_ZLWeVMaHFsOJ40Drj2boIeaV85QyBLwOVl8fsC3j0qiLYGGppA8/s1600/frias.jpg&description=Rehaciendo y simplificando con el "flexbox" una vieja demo de galería que se presenta contraída y al hover sobre un ítem éste se expande y sus hermanos se contraen.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
es genial!
ResponderEliminarSolo puedo decir, "Hermoso"
ResponderEliminargracias nuevamente, como novato me acabas de enseñar una forma practica sin necesidad de un javascript, me gusta este blog por lo claro de enseñar, saludosss!
ResponderEliminar