Solucionado
Boa tarde, estou criando 4 colunas uma ao lado da outra, na qual preciso que fiquem de um mesmo height, e o conteúdo de texto fique centralizado e o botão "saiba mais" sempre no fim de cada coluna.
As colunas são as que estão com ícone na index.
A primeira linha é a que estou tentando fazer com flexbox
Este é o link : http://tipagos.tempsite.ws/site-pinbank/index.html
Obrigada.
Olá Marylia,
Conseguiu? abri o link aqui e está do jeito que você falou.
Ah esqueci de citar, ele começa a quebrar só a partir de uma resolução menor que 1100px.
Ahhhhh agora sim entendi o problema hehehe...
Então, pelo que vi do código CSS, faltou algumas propriedades do flexbox para deixar ajustado, fiz alguns testes e deixei assim:
.service {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.col-sm-3 {
display: flex;
}
.row {
display: flex;
}As classes .row e .col-sm-3 coloquei apenas para mostrar qual elemento tive que colocar as propriedades.
Uma boa dica é ter esse link salvo o/
Sempre ajuda!
Obrigada Luiz. Mas então eu quero usar a estrutura que fiz na primeira linha das colunas, não quero utilizar as cols do bootstrap até pq não posso mexer nelas, tirei agora as de baixo, e deixei, só a primeira fileira de colunas, que está com flexbox, mas mesmo assim não está alinhando.
.servico {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 1000px;
margin: 0 auto;
justify-content: space-around;
}
.servico .item-servico {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 200px;
}Daí você precisa controlar no CSS a questão da responsividade nos width, acho que é isso!
Ah agora funcionou Luiz! Brigadão!! =DD é que não sabia que eu precisava colocar o display flex nos itens também. só tirei o width e coloquei % nas medidas dos itens:
.servico{ display:flex; justify-content: space-around;
}
.servico .item-servico{ margin-top: 40px; padding: 15px 15px 20px 15px; background: #fff; -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; justify-content: space-around; width: 24%;
}