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

Bloco não funciona com Max-Width

Olá Pessoal, tudo bem? Estou tentando utilizar o Max-Width, com flex-box, mas não funciona. Quando coloco o bloco centralizado, ele diminui, poderiam me ajudar por favor.

4 respostas
<main class="container">
      <section class="cadastro">
        <form action="#" class="cadastro__formulario">
          <label for="nome" class="cadastro__texto">Nome do Produto:</label>
          <input type="text" name="" id="" class="cadastro__input">
          <label for="preco" class="cadastro__texto">Preço:</label>
          <input type="text" name="" id="" class="cadastro__input">
          <label for="data" class="cadastro__texto">Data de fabricação:</label>
          <input type="text" name="" id="" class="cadastro__input">
          <label for="" class="cadastro__texto">Público alvo:</label>
          <input type="text" name="" id="" class="cadastro__input">
          <button type="submit" class="cadastro__botao">Salvar</button>
        </form>
      </section>
</main>
body {
  padding: 0 1rem;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cadastro{
  max-width: 600px;
  border: 1px solid rgb(202, 202, 202);
}
.cadastro__formulario {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

.cadastro__texto {
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

.cadastro__input{
  margin-bottom: 1rem;
  padding: .5rem 2rem;
  border-radius: .2rem;
  border: 1px solid rgb(202, 202, 202);
}

.cadastro__botao {
  width: 30%;
  background-color: green;
  color: white;
  padding: .5rem;
  border-radius: .5rem;
  font-size: 1.2rem;
}
solução!

Boa tarde Luiz, tudo bom ?

Então, a propriedade max-width diz o comprimento máximo do elemento, e não o comprimento que ele deve ficar. Para isso usamos a propriedade width.

Nós usamos o max-width um situações onde o width é relativo. E pode ser que ao ser exibido em telas muito grades, quebre o layout. Então nesse caso usamos o max-width para impedir que ele tenha uma tamanho maior que o indicado.

Vale lembrar que existe a propriedade min-width também, que ao contrário da max-width, ela indica o tamanho mínimo que o elemento deve ter.

Espero que tenha ajudado,

Bons Estudos !

Boa tarde Thiago, estou bem e você?

Me ajudou sim cara, e que não estava entendendo o porque o Max-Width junto com o flex-box center não funcionava, ele deixava o bloco que usava a propriedade max-width com o tamanho menor. Eu percebi que quando uso a propriedade align-items: center, com a direção para coluna, o align-items deixa o elemento bem menor e com os espaços iguais nas laterais.

Não sei se fui claro, mas acabei entendendo...kkkkk

Obrigado amigo.