css3 - bootstrap - flexbox order
¿Cómo uso "flex-flow: column wrap"? (2)
Esto fue un error de hecho. Aquí los enlaces al rastreador:
https://bugs.chromium.org/p/chromium/issues/detail?id=247963 https://bugs.chromium.org/p/chromium/issues/detail?id=507397
Como OP quería:
Necesito la flexbox para reducir el tamaño de sus columnas. ¿Por qué? Intento usar flexbox en un sitio web de desplazamiento horizontal. De acuerdo, podría dejar que los niños se desborden, pero ese desbordamiento tiende a ... romper cosas. Así que pensé que necesitaba flex-flow: wrap de columna con pantalla: inline-flex. Esperaba un efecto de "arriba a abajo, de izquierda a derecha", donde el padre no tiene espacio vacío.
Simplemente podemos lograrlo con flex-flow: column wrap; , align-content: flex-start; y una envoltura de altura fija juntas.
http://output.jsbin.com/qixuxiduxe/1
#flex {
display: flex;
flex-flow: column wrap;
max-height: 100%;
width: 150px;
overflow: auto;
align-content: flex-start;
}
p {
margin: 0;
align-self: flex-start
}
body {
height: 150px;
}
Fiddle actualizado: http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console
Version corta
Cuando se usa flex-flow: column wrap y display: inline-flex flex-flow: column wrap display: inline-flex , no se contrae como inline-block :
(function() {
var ascending = true;
setInterval(function() {
var parent = document.getElementById(''flex'');
if (ascending) {
var child = document.createElement(''p'');
child.innerHTML = "foo";
parent.appendChild(child);
} else {
parent.removeChild(parent.children[0]);
}
if (parent.children.length <= 1) ascending = true;
if (parent.children.length >= 40) ascending = false;
}, 20);
})();
(function() {
var ascending = true;
setInterval(function() {
var parent = document.getElementById(''failex'');
if (ascending) {
var child = document.createElement(''p'');
child.innerHTML = "foo";
parent.appendChild(child);
} else {
parent.removeChild(parent.children[0]);
}
if (parent.children.length <= 1) ascending = true;
if (parent.children.length >= 40) ascending = false;
}, 20);
})();
#flexdesc {position: absolute; top: 25px;}
#flex {
top: 50px;
position: absolute;
display: inline-flex;
flex-flow: row wrap;
outline: 1px solid black;
padding: 3px;
max-height: 100%;
max-width: 180px;
align-content: flex-start;
transform: matrix(0, 1, 1, 0, 0, 0);
transform-origin: top left;
}
#flex > p {
margin: 0;
outline: 1px solid black;
height: 30px;
width: 30px;
align-self: flex-start;
transform: matrix(0, 1, 1, 0, 0, 0);
}
#failexdesc {position: absolute; top: 275px;}
#failex {
top: 300px;
position: absolute;
display: flex;
flex-flow: column wrap;
outline: 1px solid black;
padding: 3px;
max-height: 200px;
align-content: flex-start;
transform-origin: top left;
}
#failex > p {
margin: 0;
outline: 1px solid black;
height: 30px;
width: 30px;
align-self: flex-start;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="flexdesc">What I expect it to do</div>
<div id="flex">
<p>foo</p>
<!-- add extra "<p>foo</p>" here. -->
</div>
<div id="failexdesc">What it does</div>
<div id="failex">
<p>foo</p>
</div>
</body>
</html>
¡Observe cómo cambia el tamaño de cada contenedor flexible (o no cambia!)
Quiero este comportamiento porque quiero colocar estos elementos uno al lado del otro para un sitio web que se desplaza horizontalmente.
¿Por qué no se encoge? ¿Cómo lo hago shrinkwrap?
Pregunta original
flex-flow: row wrap es lo suficientemente simple de entender. Si nada está "flexionando", actúa de manera similar a los elementos en línea; Fluye hacia la derecha hasta que ya no puede hacerlo, en ese punto hace una nueva fila.
flex-flow: column wrap con display: flex es similar. Fluye hacia abajo, hasta que ya no puede fluir hacia abajo (¿ max-width ?), Y luego comienza una nueva columna. Por supuesto, como el elemento principal es display: flex , es un elemento de nivel de bloque, por lo que la columna estará en la mitad debido al hecho de que align-content stretch predeterminada. Podría cambiar fácilmente eso para flex-start para hacer que la nueva columna sea adyacente a la anterior.
... pero el contenedor sigue siendo demasiado ancho. Sigue siendo un bloque y ocupa el ancho de su padre.
Necesito la flexbox para reducir el tamaño de sus columnas. ¿Por qué? Intento usar flexbox en un sitio web de desplazamiento horizontal. De acuerdo, podría dejar que los niños se desborden, pero ese desbordamiento tiende a ... romper cosas. Así que pensé que necesitaba flex-flow: column wrap con display: inline-flex . Esperaba un efecto de "arriba a abajo, de izquierda a derecha", donde el padre no tiene espacio vacío.
... y luego sucedió this . En cromo, el ancho principal es igual a la suma de los anchos de los hijos, pero de lo contrario, el ajuste es normal. En Firefox, el elemento principal es de ancho completo, y se hace más alto para acomodar los elementos (no creo que Firefox sea compatible con el ajuste). En IE11, el ancho es correcto, pero los niños simplemente se desbordan (incluso fuera del cuerpo).
Estoy tan confundida.
¿Qué estoy haciendo mal aquí? Entiendo que Flexbox es una característica más reciente, pero no puedo decir cuánto de esto es mi culpa frente al navegador.
Por cierto, estoy probando esto en Chrome. Una solución solo de cromo está bien para mí. (¡Pero una solución elegante para todos es siempre agradable!)
Aquí está this , en caso de que jsbin esté inactivo:
var ascending = true;
setInterval(function() {
var parent = document.getElementById(''flex'');
if (ascending) {
var child = document.createElement(''p'');
child.innerHTML = "f";
parent.appendChild(child);
} else {
parent.removeChild(parent.children[0]);
}
if (parent.children.length <= 1) ascending = true;
if (parent.children.length >= 30) ascending = false;
}, 200);
#flex {
display: inline-flex;
flex-flow: column wrap;
outline: 1px solid black;
padding: 3px;
max-height: 100%;
align-content: flex-start;
}
p {
margin: 0;
outline: 1px solid black;
width: 10px;
}
body {
height: 150px;
width: 300px;
outline: 1px dashed black
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="flex">
<p>f</p>
<!-- add extra "<p>foo</p>" here. -->
</div>
</body>
</html>
Puede que sea tarde, pero creo que Firefox no admite totalmente el ''filtro de columnas''. Como dijiste, necesitarás esto en Chrome, en ese caso puedes ver lo que hizo Chris Coyier: agregar el prefijo de webkit -> http://css-tricks.com/snippets/css/a-guide-to-flexbox/
La esperanza no es tarde: /