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



Answers

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: stackoverflow.com/questions/29732575/…

@luksak también proporciona una gran respuesta

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/




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





Related