bootstrap - ¿Cómo especificar un elemento después del cual ajustar en css flexbox?

flexbox guia

Question

No creo que esto sea parte del estándar flexbox todavía, pero ¿hay algún truco para sugerir o forzar el ajuste después de cierto elemento? Me gustaría responder a diferentes tamaños de página y ajustar una lista de manera diferente sin marcado adicional, de modo que en lugar de tener (por ejemplo) elementos de menú huérfanos en la línea siguiente, rompo en el medio del menú.

Aquí está el html inicial:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Y css:

ul {
    display: flex;
    flex-wrap: wrap;
}

Me encantaría algo como lo siguiente:

/* inside media query targeting width */
li:nth-child(2n) {
    flex-break: after;
}

Vea el jsfiddle para una configuración más completa: http://jsfiddle.net/theazureshadow/ww8DR/

Answer 1

Establecer un min-width en los elementos secundarios también creará un punto de interrupción. Por ejemplo, romper cada 3 elementos,

flex-grow: 1;
min-width: 33%; 

Si hay 4 elementos, esto tendrá la envoltura del cuarto elemento tomando el 100% completo. Si hay 5 elementos, los elementos 4 y 5 se ajustarán y tomarán cada 50%.

Asegúrate de tener un elemento padre con,

flex-wrap: wrap

Answer 2

Hay una parte de la especificación que seguro suena así ... justo en las secciones "algoritmo de diseño flexible" y "tamaño principal":

De lo contrario, a partir del primer artículo no recogido, reúna los artículos consecutivos uno por uno hasta la primera vez que el siguiente artículo recogido no se ajuste al tamaño principal interno del contenedor flexible, o hasta que se encuentre un corte forzado. Si el primer artículo no recogido no encaja, recójalo solo en la línea. Se forzará una interrupción siempre que las propiedades CSS2.1 página-break-before / page-break-after [CSS21] o CSS3 break-before / break-after [CSS3-BREAK] especifiquen una ruptura de fragmentación.

De http://www.w3.org/TR/css-flexbox-1/#main-sizing

Seguramente suena (aparte del hecho de que los saltos de página deben ser para impresión), al diseñar un diseño flexible potencialmente multilínea (que tomo de otra parte de la especificación es uno sin flex-wrap: nowrap ) una page-break-after: always o break-after: always debe provocar un corte o pasar a la línea siguiente.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.child {
  flex-grow: 1;
}

.child.break-here {
  page-break-after: always;
  break-after: always;
}

Sin embargo, lo he intentado y no se ha implementado de esa manera en ...

• Safari (hasta 7)
• Chrome (hasta 43 dev)
• Opera (hasta 28 dev y 12.16)
• IE (hasta 11)

Funciona de la manera que suena (para mí, al menos) como en:

• Firefox (28+)

Muestra en http://codepen.io/morewry/pen/JoVmVj .

No encontré ninguna otra solicitud en el rastreador de errores, por lo que lo informé en https://code.google.com/p/chromium/issues/detail?id=473481 .

Pero el tema se llevó a la lista de correo y, sin importar cómo suene, eso no es lo que aparentemente querían dar a entender, excepto supongo que para la paginación. Por lo tanto, no hay forma de envolver antes o después de una determinada caja en diseño flexible sin anidar distribuciones flexibles sucesivas dentro de flex niños o manipular anchos específicos (por ejemplo, flex-basis: 100% ).

Esto es profundamente molesto, por supuesto, ya que trabajar con la implementación de Firefox confirma mi sospecha de que la funcionalidad es increíblemente útil. Aparte de la alineación vertical mejorada, la falta obvia una buena parte de la utilidad del diseño flexible en numerosos escenarios. Tener que agregar etiquetas de envoltura adicionales con diseños flexibles anidados para controlar el punto en el que una fila se envuelve aumenta la complejidad tanto del HTML como del CSS y, por desgracia, a menudo hace que el order sea ​​inútil. Del mismo modo, forzar el ancho de un elemento al 100% reduce el potencial de "respuesta" del diseño flexible o requiere una gran cantidad de consultas altamente específicas o selectores de conteo (por ejemplo, las técnicas que pueden lograr el resultado general que necesita que se mencionan en el otro respuestas).

Al menos las carrozas tenían clear . Algo puede ser agregado en algún momento u otro para esto, uno espera.

Answer 3

Lo único que parece funcionar es establecer flex-wrap: wrap; en el recipiente y de alguna manera hacen que el niño que desea romper después de llenar el ancho completo, por lo width: 100%; Deberia trabajar.

Sin embargo, si no puede estirar el elemento al 100% (por ejemplo, si es un <img> ), puede aplicarle un margen, como width: 50px; margin-right: calc(100% - 50px) width: 50px; margin-right: calc(100% - 50px) .

Answer 4

No creo que puedas romper después de un artículo específico. Lo mejor que probablemente puedas hacer es cambiar la base flexible en tus puntos de corte. Asi que:

ul {
  flex-flow: row wrap;
  display: flex;
}

li {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

@media (min-width: 40em;){
li {
  flex-basis: 30%;
}

Aquí hay una muestra: http://cdpn.io/ndCzD

=========================================

EDITAR: ¡PUEDES romper después de un elemento específico! Heydon Pickering desató algo de css wizardry en un artículo de A List Apart: http://alistapart.com/article/quantity-queries-for-css

EDIT 2: Por favor, eche un vistazo a esta respuesta: .com/questions/29732575/…

@luksak también proporciona una gran respuesta

Answer 5

Puede lograr esto estableciendo esto en el contenedor:

ul {
    display: flex;
    flex-wrap: wrap;
}

Y en el niño, estableces esto:

li:nth-child(2n) {
    flex-basis: 100%;
}

Esto hace que el niño componga el 100% del ancho del contenedor antes de cualquier otro cálculo. Dado que el contenedor está configurado para romperse en caso de que no haya suficiente espacio, lo hace antes y después de este elemento secundario.