Alinee el centro de la fila en flexbox

Actualmente estoy intentando que mis columnas se centren utilizando flexbox, pero se está pegando a la izquierda cuando redimensiono el navegador. He intentado justificar el centro de contenido y el centro de alineación de elementos, pero es posible que no los coloque en los lugares correctos. ¡Si alguien sabe cómo arreglar esto, sería muy apreciado! ¡Gracias!

.wrap{ display:flex; } main{ flex:1; display:flex; } aside, article{ padding:2em; } aside{ flex:1; } article{ flex:1; } @media (max-width: 800px) { main { flex-direction: column; } } 
 

Do You Want to...

  • Create forms and documents that customers can fill out online
  • Start an email list for recurring customers
  • Show relatability with my audience
  • Have 24/7 online exposure
  • Create a map or a way for customers to find my location

Para centrar las columnas astackdas en la vista móvil, use align-items: center on main . Para la vista de escritorio, puede contraer las columnas especificando flex: 0 auto . Esto indica que no se debe permitir que el elemento crezca y debe usar un ancho automático. Luego agrega justify-content: center to main para centrar las columnas contraídas.

 .wrap{ display:flex; } main{ flex:1; display:flex; justify-content: center; } aside, article{ padding:2em; } aside{ flex:0 auto; } article{ flex:0 auto; } @media (max-width: 800px) { main { flex-direction: column; align-items: center; } } 
 

Do You Want to...

  • Create forms and documents that customers can fill out online
  • Start an email list for recurring customers
  • Show relatability with my audience
  • Have 24/7 online exposure
  • Create a map or a way for customers to find my location