2

Estou desenvolvendo um formulário de cadastro em React, e para validação dos input's utilizo o Yup.

Na terceira row do formulário tenho 3 input's, quando o Yup faz a validação e insere as mensagens de notificação eles ficam desalinhados, segue imagem:

Campos desalinhados

Segue o CSS do form:

form {
    display: flex;
    flex-direction: column;

    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;

    label {
      font-weight: bold;
      margin: 15px 0 5px 0;
      font-size: 14px;
    }

    input {
      height: 30px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 15px;
    }

    div {
      display: flex;
      justify-content: space-between;

      div {
        display: flex;
        flex-direction: column;

        input {
          width: 240px;
        }
      }
    }
}
0

2 Respostas 2

1

Em

form div {
      display: flex;
      justify-content: space-between;

Troque por

form div {
      display: flex;
      justify-content: flex-start;

O flex-start vai alinhar os elemento interno no topo do container, o space-between acaba alinhando um elemento em cada canto do container gerando esse espaço entre o texto e o input

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Código da imagem acima:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-direction: column;
  background-color: teal;
  /* justify-content: space-between; */
  justify-content: flex-start;
  flex-basis: calc(100%/3);
}
.box{
  width: 100%;
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #000;
  height: 35px;
}

.container {
  display: flex;
}
Com justify-content: flex-start;

<div class="container">
    <div class="row">
      <div class="box">label 1</div>
      <div class="box">1</div>
      <div class="box">msg</div>
    </div>
    <div class="row">
      <div class="box">label 2</div>
      <div class="box">msg</div>
    </div>
    <div class="row">
      <div class="box">label 3</div>
      <div class="box">3</div>
      <div class="box">msg</div>
    </div>
</div>

2
  • perfeito, era isso mesmo, muito obrigado. 23/12/2019 às 21:22
  • @DavidBorelli obrigado meu jovem, qq dúvida comenta ai que tento te ajudar! Abs
    – hugocsl
    23/12/2019 às 21:27
1

A propriedade justify-content: space-between; posiciona os dois elementos em cada extremidade da div (no seu caso, extremidades verticais).

Pelo seu CSS, você está aplicando ela nas divs filhas diretas do form, que está afetando for hereditariedade as subdivs dessas divs.

Basta alterar essas subdivs acrescentando justify-content: flex-start; (veja a linha comentada com /* AQUI!! */ no código abaixo):

form {
    display: flex;
    flex-direction: column;

    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;

    label {
      font-weight: bold;
      margin: 15px 0 5px 0;
      font-size: 14px;
    }

    input {
      height: 30px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 15px;
    }

    div {
      display: flex;
      justify-content: space-between;

      div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* AQUI!! */

        input {
          width: 240px;
        }
      }
    }
}

Agora, repare que quando a mensagem é exibida, há uma quebra no grid, fazendo com que uma div encoste na outra. Para resolver isso, acrescente flex: 1; abaixo da propriedade que sugeri acima. Isso força com que as 3 divs mantenham a largura fixa e iguais e não encoste uma na outra.

Veja um exemplo:

Alterei a largura dos inputs para 140px apenas para ilustrar.

form {
    display: flex;
    flex-direction: column;

    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;
}

form label {
      font-weight: bold;
      margin: 15px 0 5px 0;
      font-size: 14px;
}

form input {
      height: 30px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 15px;
}

form div {
      display: flex;
      justify-content: space-between;
}

form div div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1;
}

form div div input {
          width: 140px;
}
<form>
   <div>
      <div>
         <label>Idade</label>
         <input type="text">
          <div>mensagem mensagem mensagem mensagem mensagem mensagem mensagem mensagem</div>
      </div>
     <div>
         <label>Peso</label>
         <input type="text">
      </div>
      <div>
         <label>Altura</label>
         <input type="text">
          <div>mensagem mensagem mensagem mensagem mensagem mensagem mensagem mensagem</div>
      </div>
   </div>
</form>

Veja como fica sem as propriedades sugeridas acima:

inserir a descrição da imagem aqui

Recomendo você guardar o Guia Completo sobre flexbox, que é muito útil para referências, consultas e tirar dúvidas.

5
  • Perfeito era isso mesmo, porém ao invés de usar o flex: 1 e definir um width fixo no input, na div da row eu coloquei width 100%, depois capturei a div do input do meio e coloquei margem nas extremidades laterais. 23/12/2019 às 21:27
  • Pode ser também. Minha resposta foi uma sugestão e um norte para vc formatar as divs. Boa sorte aí!
    – Sam
    23/12/2019 às 21:29
  • Se achou a resposta útil, pode dar ao menos um upvote para valorizar o esforço. Valeu!
    – Sam
    23/12/2019 às 21:29
  • Obrigado Sam, sua resposta ja me ajudou conhecer o flex: 1, usava dessa forma somente no RN. kkkk 23/12/2019 às 21:30
  • Jura que a minha resposta não merece ao menos um voto positivo?
    – Sam
    25/12/2019 às 6:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .