css - bootstrap - flexbox html
¿Cómo mantener los elementos flexibles envueltos del mismo ancho que los elementos en la fila anterior? (10)
Tengo una <ul> que es una caja flexible y un grupo de <li> s que son los elementos flexibles.
Estoy intentando que el <li> tenga un ancho flexible, que se mantenga entre dos tamaños con min-width y max-width. Funciona muy bien siempre que estén en la misma línea. Sin embargo, cuando se envuelven, los <li> s en la nueva línea usan tanto espacio como pueden. Lo que significa que son pequeños en la primera línea y grandes en la segunda línea cuando solo hay unos pocos.
¿Hay alguna manera de decirle a flexbox que mantenga el ancho de los artículos después del envoltorio, manteniendo el ancho flexible?
envoltura demo:
Mi código se ve así:
<ul>
<li>
<figure>
<img src="http://placekitten.com/g/250/250">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/100/100">
</figure>
</li>
<!-- ... -->
</ul>
Y el CSS:
ul
display: flex
flex-wrap: wrap
li
min-width: 40px
max-width: 100px
flex: 1 0 0
Aquí hay un ejemplo en vivo en el codepen con algunos comentarios adicionales , cambie el tamaño de su ventana para ver cómo se envuelve.
TL; DR
Esto no es algo que llamaría una solución per se, pero es una solución bastante elegante que solo utiliza consultas de medios, y más importante, ¡ no JavaScript !
Mixin (SCSS):
@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
flex-grow: 1;
flex-basis: $flex-basis;
max-width: 100%;
$multiplier: 1;
$current-width: 0px;
@while $current-width < $max-viewport-width {
$current-width: $current-width + $flex-basis;
$multiplier: $multiplier + 1;
@media(min-width: $flex-basis * $multiplier) {
max-width: percentage(1/$multiplier);
}
}
}
Uso:
Aplique mixin a su elemento flexible:
.flex-item {
@include flex-wrap-fix(100px)
}
Actualizar:
La mezcla anterior debería funcionar, siempre que el ancho de su contenedor flexible coincida con el tamaño de su ventana gráfica, como es el caso en el ejemplo de OP. Las consultas de medios no le ayudarán de otra manera, porque siempre se basan en el ancho de la ventana gráfica. Sin embargo, puede usar la biblioteca css-element-queries y sus consultas de elementos en lugar de las consultas de medios del navegador. Aquí hay una mezcla que puede aplicar al contenedor flexible:
@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) {
display: flex;
flex-wrap: wrap;
> * {
max-width: 100%;
flex-grow: 1;
flex-basis: $flex-basis;
}
$multiplier: 1;
$current-width: 0px;
@while $current-width < $max-expected-width {
$current-width: $current-width + $flex-basis;
$multiplier: $multiplier + 1;
&[min-width~="#{$flex-basis * $multiplier}"] > * {
max-width: percentage(1/$multiplier);
}
}
}
Explicación:
Digamos que, según el ejemplo del PO, queremos que cada elemento tenga un ancho máximo de 100px , por lo que sabemos que para un ancho de navegador de 100px podemos caber un artículo por fila, y así sucesivamente:
| Viewport Width | Max Item Count Per Row | Item Width (min-max) |
|----------------|------------------------|----------------------|
| <= 100 | 1 | 0px - 100px |
| <= 200 | 2 | 50px - 100px |
| <= 300 | 3 | 50px - 100px |
| <= 400 | 4 | 50px - 100px |
| <= 500 | 5 | 50px - 100px |
| <= 600 | 6 | 50px - 100px |
Podemos escribir consultas en los medios para crear las siguientes reglas:
| Viewport Width | Max Item Count Per Row | Item Max Width | Calculation |
|------------------------------------------------------------------------|
| <= 100px | 1 | 100% | (100/1) |
| <= 200px | 2 | 50% | (100/2) |
| <= 300px | 3 | 33.33333% | (100/3) |
| <= 400px | 4 | 25% | (100/4) |
| <= 500px | 5 | 20% | (100/5) |
| <= 600px | 6 | 16.66666% | (100/6) |
Me gusta esto:
li {
flex: 1 0 0
max-width: 100%;
}
@media(min-width: 200px) {
li { max-width: 50%; }
}
@media(min-width: 300px) {
li { max-width: 33.33333%; }
}
@media(min-width: 400px) {
li { max-width: 25%; }
}
@media(min-width: 500px) {
li { max-width: 20%; }
}
@media(min-width: 600px) {
li { max-width: 16.66666%; }
}
Por supuesto, eso es repetitivo, pero lo más probable es que esté utilizando algún tipo de preprocesador, que puede ocuparse de la repetición para usted. Eso es precisamente lo que hace la mixina en la sección anterior TL; DR .
Todo lo que tenemos que hacer ahora es especificar 100px como nuestra flex-basis , y opcionalmente el ancho máximo de la ventana del navegador (por defecto es 2000px ) para crear las consultas de medios para:
@include flex-wrap-fix(100px)
Ejemplo
Finalmente, una versión bifurcada del ejemplo original de CodePen con la salida deseada, utilizando la mezcla anterior:
Creo que lo tengo ... pero es hacky. El resultado son las 14 imágenes, cada una de las cuales varía desde 100 píxeles de ancho hasta 40 píxeles, incluso en varias filas.
- Se agregó un conjunto duplicado de los 14
<li>originales y se agregaron a flex<ul>. Luego, el segundo conjunto se volvió invisible:
li:nth-of-type(n + 15) { visibility: hidden; }Para mantener una flexibilidad uniforme, los siguientes cambios a cada
<li>:li { min-width: 40px; max-width: 10%; flex: 1 0 100px; }
Por favor revisa el CodePen
y / o el fragmento en modo de página completa.
ul {
display: flex;
flex-wrap: wrap;
max-height: 258px;
}
li {
min-width: 40px;
max-width: 10%;
flex: 1 0 100px;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
background-color: tomato;
}
li {
margin: 0.5em;
background-color: darkgreen;
}
li img {
width: 100%;
opacity: 0.5;
}
li figure,
li img {
margin: 0;
padding: 0;
}
li:nth-of-type(n + 15) {
visibility: hidden;
}
<ul>
<li>
<figure>
<img src="http://placekitten.com/g/250/250">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/101/101">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/201/201">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/80/80">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/111/111">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/40/40">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/110/110">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/75/75">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/89/89">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/32/32">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/61/61">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/320/320">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/250/250">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/101/101">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/201/201">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/80/80">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/111/111">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/40/40">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/110/110">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/75/75">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/89/89">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/150/150">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/32/32">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/61/61">
</figure>
</li>
<li>
<figure>
<img src="http://placekitten.com/g/320/320">
</figure>
</li>
</ul>
Establecer el min-width max-width como porcentajes ha permitido que todas las imágenes mantengan el mismo ancho cuando se dividen en la siguiente línea. No es ideal, ¿pero está más cerca de lo que buscas?
li {
min-width: 15%;
max-width: 15%;
}
Esto no es perfecto, pero vale la pena intentarlo. http://codepen.io/anon/pen/MKmXpV
Los cambios son
li
width: 7.1428%
flex: 0 0 auto
figure
margin: 0 auto
background-color: darkgreen
min-width: 40px
max-width: 100px
- cambió li flex a "0 0 auto" y el ancho li a un porcentaje basado en el número de lis.
- movió los anchos mínimo y máximo del li a la figura
- movió el fondo verde a la figura y centró las figuras en la lis
He estado experimentando con su codepen y he configurado flex: 0 1 10%
Por supuesto, puede establecer la base flexible según lo que desee, solo quería probar el punto, que si establece la base flexible y permite que se encoja, se comportará mucho mejor en este caso.
Creo que esto es lo que necesitabas. Aquí está la vista previa: http://codepen.io/anon/pen/bwqNEZ
Aclamaciones
Mi solución no es ideal, ya que se apoya en JQuery: http://codepen.io/BigWillie/pen/WwyEXX
CSS
ul {
display: flex;
flex-wrap: wrap;
}
li {
min-width: 40px;
max-width: 100px;
flex: 1;
}
JavaScript
var eqRowFlexItem = function(elem) {
var w;
var $elem = $(elem);
// Clear out max-width on elements
$elem.css(''max-width'', '''');
w = $(elem).eq(0).width();
$(elem).css(''max-width'', w);
}
eqRowFlexItem(''li'');
$(window).resize(function() {
eqRowFlexItem(''li'');
});
No estoy del todo seguro de si responde al problema. Encontré esta publicación, ya que el título coincidía con el problema que estaba teniendo. Estaba buscando un efecto por el cual tuviera una mayor cantidad de elementos por fila en pantallas más grandes y menos elementos por fila en pantallas más pequeñas. En ambos casos, estos elementos también deben escalarse para adaptarse ... a todos los dispositivos.
Sin embargo, esos elementos extraviados en la última fila siempre se expandirían para llenar el espacio restante.
JQuery obtiene el ancho del primer elemento y lo aplica como un ancho máximo para cada elemento. El OP quería que los bloques cayeran dentro de una furia de mínimo ancho / máximo de ancho. Establecer el ancho máximo en CSS parece funcionar. Limpiamos el ancho máximo del elemento, por lo que el valor predeterminado es el ancho máximo en el CSS ... y luego obtiene el ancho real.
No funciona muy bien, pero puedes lograr algo en esta dirección con columnas.
column-gap: 10px;
column-width: 150px;
Para Stylus puede usar este mixin: https://codepen.io/anon/pen/Epjwjq
flex-wrap-fix($basis, $max) {
flex-grow: 1
flex-basis: $basis
max-width: 100%
$multiplier = ceil($max / $basis)
for i in (1..$multiplier) {
@media(min-width: ($basis * i)) {
max-width: percentage(1/i)
}
}
}
Tuve el mismo problema, así que utilicé un poco de Jquery para controlar el ancho de las cajas y hacerlas del mismo ancho incluso una vez que se envuelven.
Mi demostración está en CodePen Flex wrap, con el mismo ancho en la nueva fila
function resize(){
var colWidth;
var screen = $(window).width();
if(screen < 576){
colWidth = Math.round(screen / 2) - 31;
$(".item").width(colWidth);
}
if(screen > 575 && screen < 768){
colWidth = Math.round(screen / 3) - 31;
$(".item").width(colWidth);
}
else if (screen > 767 && screen < 992){
colWidth = Math.round(screen / 4) -31;
$(".item").width(colWidth);
}
else if (screen > 991 ){
colWidth = Math.round(screen / 6) -31;
$(".item").width(colWidth);
}
}
window.onresize = function() {
resize();
}
resize();
html,
body{
padding:0;
margin:0;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
justify-content: left;
background-color:#ddd;
}
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.item {
background: tomato;
height: 100px;
margin:0 15px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="flex-container wrap">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
use max-width: 40px no max-width: 100px