css - froggy - Columna Flexbox alinearse de abajo hacia abajo

inline-flex

Question

Estoy tratando de usar Flexbox. http://css-tricks.com/almanac/properties/a/align-content/ esto muestra buenas opciones de alineación; pero realmente querría una situación Top-top-bottom.

Quiero que un div se adhiera a la parte inferior del div principal usando flexbox. Con flex-direction: column y align-content: Space-between puedo hacer esto, pero el div central se alineará en el centro, quiero que el del medio también quede pegado a la parte superior.

[parte superior]

[medio]

-

-

-

[fondo]

align-self: flex-end lo hará flotar a la derecha, no a la parte inferior.

documentos completos de flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 1

Básicamente, la respuesta es dar al último de los elementos del medio un código de crecimiento 1 de la siguiente manera:

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

Gracias, T04435.

Answer 2

Encontré mi propia solución, la agregaré aquí para el valor de la documentación;

Si le das la height: 100% bloque central height: 100% ocupará toda la habitación en el medio. Entonces, el bloque de abajo estará en la parte inferior real y arriba y el medio están en la parte superior.

ACTUALIZACIÓN: Esto no funciona para Chrome ...

ACTUALIZACIÓN: Encontré una forma que funciona para FF / Chrome: establecer Flex-grow en un número mayor (1 es suficiente) para [medio] lo hará tomar un tamaño medio completo. más información: http://css-tricks.com/almanac/properties/f/flex-grow/

Answer 3

Llego un poco tarde a la fiesta, pero podría ser relevante para otros que intentan hacer lo mismo que deberían poder hacer:

margin-top: auto

en el elemento en cuestión y debería ir al final. Debe hacer el truco para firefox, cromo y safari.