Tengo un problema. Tengo una tabla que he implementado en flexbox. Quiero alinear la "fila" inferior, sin afectar el espaciado de las otras filas. (Puse "row" entre comillas porque técnicamente no son filas, es la última celda en tres columnas diferentes)
Aquí hay una captura de pantalla de lo que quiero lograr:
aquí es un JSFiddle de lo que tengo hasta ahora. Pensé que tal vez este poco lo haría, pero parece que no:
div.new-region-page div.three-col-buys a.read-more {
align-self: flex-end;
}
Tengo dos problemas principales: alinear las celdas "Ver más" y extender los bordes verticales a la misma longitud en todas las columnas.
No es una opción utilizar filas flexibles en lugar de columnas flexibles debido a la forma en que esto tiene que colapsar de manera receptiva en dispositivos móviles.
Espero que alguien pueda aconsejar cómo puedo lograr esto con flexbox. Intenté varios atributos flexibles con poco éxito.
Respuestas
1 para la respuesta № 1Debe configurar el contenedor de columnas (# compras superiores) para visualizar: flex; para obtener las 3 columnas de la misma altura.
Una vez que lo haga, puede ajustar el contenido de su columna para que no se extiendan todos desde la configuración de espacio intermedio
Si agrega flex-grow: 0; a div.new-region-page a.read-more lo empujará hacia abajo.