Una gran cualidad de flexbox es que con el puedes hacer los sitios responsive. Añade también lo siguiente al código que ya te puse:
Código CSS:
Ver originalflex-direction: row;
flex-wrap: wrap;
O lo que es lo mismo pero más simplificado:
Con
flex-direction: row le diremos que coloque el contenido del contenedor padre en fila, en tu caso pondrá un div, luego el otro y luego el otro en la misma fila. Y con
flex-wrap: wrap le decimos que al no caber uno de los elementos ( tus divs ) lo ponga automáticamente abajo, de esta manera al verlod esde el móvil por ejemplo se verá un div de bajo de otro
Echa un ojo a todo lo que puedes lograr con
flexbox
tu código tendría que quedar de esta manera:
Código CSS:
Ver originalheader .container {
display: flex;
flex-flow: row wrap;
align-items: center;
}
Seguro que te servirá