Cartão de Visualização Responsivo com Flexbox

Community feedback

• 

  Thiago Santos•295

  @thiago-hdsPosted almost 3 years ago

  Oi Luiz! Nesse caso uma possível solução é transformar cada section em um flex container com display: flex e flex-direction: column e alinhar as divs que contém os botões com margin-top: auto. Espero que ajude!

  Marked as helpful

  1

  ---

  

  Luiz Matheus•30

  @LuizMatheusfPosted almost 3 years ago

  Obrigado pelas dicas. Mas mesmo assim não funcionou, quando coloco display: flex e flex-direction: column o problema persiste, o margin-top: auto cola os botões no texto, já tentei até colocar no index a tag <br> , também não funcionou.

  1

  

  Thiago Santos•295

  @thiago-hdsPosted almost 3 years ago

  Talvez você tenha colocado o margin-top diretamente no botão e não em sua div pai.

  Da seguinte forma funcionou no meu teste:

  .cartao section {
      padding: 50px;
      display: flex;
      flex-direction: column;
  }
  
  .button1, .button2, .button3 {
      margin-top: auto;
  }
  

  Para simplificar você pode dar uma classe em comum para essas divs.

  Outro problema que percebi é que você repetiu o mesmo id #button para todos os botões, o que não é uma boa prática. Para reutilizar estilos é preciso usar classes.

  Marked as helpful

  1

  

  Luiz Matheus•30

  @LuizMatheusfPosted almost 3 years ago

  @thiago-hds Sua solução resolveu o problema. Nesse período, tive estudando mais, já aperfeiçoei algumas coisas e percebi antigos erros. Muito obrigado por ter disponibilizado o seu tempo para me ajudar.

  1