Flexbox: centro verticalmente y tamaño de coincidencia

Tengo dos botones uno al lado del otro usando flex y tengo sus contenidos centrados verticalmente, que funcionan muy bien hasta ahora. Sin embargo, cuando mi sitio se visualiza en páginas para dispositivos móviles (utilizando un diseño receptivo para escalar la página), el segundo botón, que tiene menos texto, adquiere un tamaño diferente al de su compañero.

Por lo tanto, el objective es alinear verticalmente el texto en mis botones, así como también hacer que los dos botones siempre coincidan con el tamaño del otro.

Very Long Word Short Phrase
.button { padding: 20px 10px; width: 150px; background-color: deepskyblue; color: white; margin: 3px; text-align: center; } .buttonsSection { margin: 30px 0; display: flex; align-items: center; justify-content: center; } body { width: 20%; /*Simulate page being reduced in size (ie on mobile)*/ margin: 0 auto; }

JSFiddle: http://jsfiddle.net/Dragonseer/WmZPg/ Si el problema no es obvio de inmediato, intente reducir el ancho de la ventana Resultado.

La solución inspirada en esta pregunta fue establecer los botones Sección para flexionar y centrar, y configurar el botón para flexionar, columna y centro.

Ver Fiddle aquí: http://jsfiddle.net/Dragonseer/Nbknc/

 .button { ... display: flex; flex-direction: column; justify-content: center; } .buttonsSection { margin: 30px 0; display: flex; justify-content: center; } 

Simplemente agregue align-items: stretch; a .buttonsSection

ver ese violín de trabajo

 .buttonsSection { margin: 30px 0; display: flex; justify-content: center; align-items: stretch; } 

también: al usar flex , tendrá que prestar atención a los prefijos específicos del vendedor. Lea más sobre esto aquí

Actualizar:

Si está utilizando mi propuesta original, también puede controlar la alineación vertical.

echa un vistazo a este violín de trabajo

HTML: (mismo) Frase corta de palabra muy larga

CSS:

 body { width: 20%; /*Simulate page being reduced in size (ie on mobile)*/ margin: 0 auto; } .buttonsSection { margin: 30px auto; display: table; border-spacing: 3px 0; } .button { display: table-cell; vertical-align: middle; padding: 10px 15px; background-color: deepskyblue; color: white; text-align: center; max-width: 100px; /*Or any other width you want*/ }