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.
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.
<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;
}
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.