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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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.