Pin un botón en la esquina inferior de un contenedor

Estoy usando flexbox para centrar una forma vertical y horizontalmente. Dentro de este formulario me gustaría fijar un botón en la parte inferior derecha del contenedor de flexbox. Aunque no estoy seguro de cómo colocar el botón en la parte inferior derecha.

html, body { height: 100%; } .container { height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } form { border: 1px solid gray; padding: 1em; } .form-button { margin-top: 1em; align-self: flex-end; } 
 

Solo debe hacer que el elemento de form un contenedor flexible, ya que las propiedades de flexibilidad solo funcionan entre elementos primarios y secundarios.

En otras palabras, su .form-button align-self: flex-end en el .form-button no funciona porque el form no tiene display: flex o display: inline-flex aplicado.

Aquí hay una explicación más completa:

  • Uso adecuado de las propiedades de flexión al anidar contenedores flexibles
 html, body { height: 100%; } .container { height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } form { border: 1px solid gray; padding: 1em; /* NEW */ display: flex; flex-direction: column; } .form-button { margin-top: 1em; align-self: flex-end; } 
 
 .form-button { margin-top: 1em; align-self: flex-end; display: flex; justify-content: flex-end; } 

Simplemente inserte el float: right;

Me gusta esto:

 .form-button { float: right;< -----------added //more code... } 
 html, body { height: 100%; } .container { height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } form { border: 1px solid gray; padding: 1em; } .form-button { margin-top: 1em; float: right; }