Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ajustar form com Flex

Saudações, Eu consegui fazer com display flex a seguinte formatação.

Porem quando eu tento fazer uma versão para 768px, não consigo desmembrar as 4 divs que compõem os elementos do display flex, segue o código.

<div class="dados-novo-paciente" >
    <div class="campos campo-nome">
        <label for="nome">Nome:</label>
        <input id="nome" type="text" placeholder="digite aqui o nome do paciente">
    </div>

    <div class="campos peso">
        <label for="peso">Peso(kg):</label>
        <input id="peso" type="text" placeholder="digite aqui o peso do paciente">
    </div>

    <div class="campos altura">
        <label for="altura">Altura(m):</label>
        <input id="altura" type="text" placeholder="digite aqui a altura do paciente">
    </div>

    <div class="campos botao">
        <button id="botao-adicionar" >Adicionar</button>
    </div>
</div>
.dados-novo-paciente {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.campos {
    display: flex;
    flex-direction: column;
    width: 20%;
}

.campo-nome {
    width: 35%;
}

Como os campos estão dentro de uma div que está sendo usada para organizar horizontalmente, eu gostaria de deixar o nome pegando 100% da largura, mas se ajusta quando saio dessa resolução, tive que tirar do display flex e fazer com float.

Talvez eu precise manipular o dom com javascript para alterar conforma a resolução.

3 respostas

Fala Flávio tudo bom?

Você pode utilizar flex-basis para definir um tamanho inicial para os elmentos e flex-grow para que ele ocupe o espaço restante com relação a linha.

Segue exemplo com este código implementado:

https://codepen.io/soutomario/pen/oevYoM

ps: Criei uma class para definir que o elemento precisa ocupar toda a linha quando ele a tiver

Espero ter ajudado :)

Desculpe, mas não conseguir entender bem seu exemplo, poderia criar um exemplo com base no meu código.

solução!

Fala Flávio tudo bom?

Sem problemas, eu adaptei o exemplo com seu código, e mantive o meu para você comparar:

https://codepen.io/soutomario/pen/oevYoM