1

Na primeira caixa estou definindo 6 inputs, e queria saber por que minhas outras caixas estão acompanhando o tamanho da minha caixa que tem os 6 inputs.

Meu código:

<!DOCTYPE html>
    <html>
    <head>
        <title>Exemplo</title>
        <meta charset="utf-8">
        <style type="text/css">
            .conteudo {
                display: flex;
                flex-direction: row;
                /* justify-content: center; */
                align-items: initial;
                width: 100%;
                overflow-x: auto;
            }

            .card {
                background-color: #f1f1f1;
                min-width: 250px;
                margin: 10px;
                /*height: 200px;*/
                text-align: center;
            }
            @media (min-width:1330px) {
                .conteudo {
                    justify-content: initial;
                }
            }
        </style>
    </head>
    <body>
        <div>
            <div class="conteudo">
                <div class="card">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                </div>
                <div class="card">2</div>
                <div class="card">3</div>
                <div class="card">4</div>
                <div class="card">5</div>
            </div>
        </div>
    </body>
    </html>

2 Respostas 2

2

Amigo, você definiu as outras caixas com a mesma classe que a <div> dos inputs possuem...

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title>
    <meta charset="utf-8">
    <style type="text/css">
        .conteudo {
            display: flex;
            flex-direction: row;
            /* justify-content: center; */
            align-items: initial;
            width: 100%;
            overflow-x: auto;
        }

        .card {
            background-color: #f1f1f1;
            min-width: 250px;
            margin: 10px;
            /*height: 200px;*/
            text-align: center;
        }
        @media (min-width:1330px) {
            .conteudo {
                justify-content: initial;
            }
        }
    </style>
</head>
<body>
    <div>
        <div class="conteudo">
            <div class="card"> <!-- CLASSE CARD -->
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
            </div>
            <div class="card">2</div> <!-- CLASSE CARD -->
            <div class="card">3</div> <!-- CLASSE CARD -->
            <div class="card">4</div> <!-- CLASSE CARD -->
            <div class="card">5</div> <!-- CLASSE CARD -->
        </div>
    </div>
</body>
</html>

O estilo vai para todas que possuem a mesma classe

2
  • Mas eu não defini a altura na minha classe card, mas como eu resolveria esse problema ?
    – Thor
    Commented 12/04/2019 às 0:51
  • definindo nomes diferentes para classe e aplicanto tamanhos de width e height com valores diferentes... Commented 12/04/2019 às 0:56
1

Seu problema está aqui, vc colocou align-items: initial;, mas deveria ser align-items: flex-start;. Esse comportamento não tem nada a ver com nome de classe ou algo do tipo como vou explicar a baixo...

inserir a descrição da imagem aqui

Um pai que é um container flex vai deixar todos os filhos em modo stretch, pois esse é o valor default do align-items de um container flex. Então isso significa que todos os filhos vão ter a mesma altura do irmão mais alto. Para evitar esse comportamento padrão vc tem que "alinhar" todos os filho no topo com align-items: flex-start;

.conteudo {
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: flex-start;
    width: 100%;
    overflow-x: auto;
}

.card {
    background-color: #f1f1f1;
    min-width: 250px;
    margin: 10px;
    /*height: 200px;*/
    text-align: center;
}
@media (min-width:1330px) {
    .conteudo {
        justify-content: initial;
    }
}
<div>
    <div class="conteudo">
        <div class="card">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
    </div>
</div>

2
  • 1
    Muito obrigado @hugocsl
    – Thor
    Commented 12/04/2019 às 18:33
  • @Thor sem problemas meu caro
    – hugocsl
    Commented 12/04/2019 às 18:58

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 .