CSS3 Flexbox: Centralizando divs
10/01/2017
0
Olá, pessoal. Tudo bem?
Abri esse tópico para postarmos exemplos de uso do flexbox das CSS3, semelhante ao que é abordado neste artigo: Como centralizar divs em HTML e CSS.
Vocês costumam usar em seus projetos no front-end? São muitas propriedades e com elas dá pra obter bons resultados.
Abraço.
Abri esse tópico para postarmos exemplos de uso do flexbox das CSS3, semelhante ao que é abordado neste artigo: Como centralizar divs em HTML e CSS.
Vocês costumam usar em seus projetos no front-end? São muitas propriedades e com elas dá pra obter bons resultados.
Abraço.
Joel Rodrigues
Curtir tópico
+ 19
Responder
Post mais votado
12/03/2018
Seguindo a linha de ensino do artigo e somando ao uso de bordas com o CSS podemos fazer telas que lembram a de um smartphone:
HTML:
CSS:
O objetivo de uso poderia ser apresentação de um conteúdo comparativo entre dois dispositivos. :)
HTML:
<div class="container">
<div class="box">
<div class="boxContent colorThree">
<h1 class="colorTextTwo">1</h1>
</div>
<div class="boxBottom colorFour">
<hr class="colorThree" />
</div>
</div>
<div class="box">
<div class="boxContent colorOne">
<h1 class="colorTextOne">2</h1>
</div>
<div class="boxBottom colorTwo">
<hr class="colorOne" />
</div>
</div>
</div>CSS:
body {margin: 0px;}
.container {
width: 100vw;
height: 100vh;
background: #cbc9c7;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box {
width: 375px;
height: 667px;
margin: 0px 10px;
display: flex;
flex-direction: column;
border: none;
border-radius: 10px;
}
.boxContent {
width: 100%;
height: 90%;
text-align: center;
border: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.boxContent h1 {
font-family: sans-serif;
font-size: 5em;
}
.boxBottom {
width: 100%;
height: 10%;
border: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.boxBottom hr {
width: 20%;
height: 5px;
border: none;
border-radius: 2px;
}
/*COLORS*/
.colorOne {background-color: #be0056}
.colorTwo {background-color: #900035}
.colorThree {background-color: #ff9069}
.colorFour {background-color:#df5042}
.colorTextOne {color:#900035}
.colorTextTwo {color:#df5042}
O objetivo de uso poderia ser apresentação de um conteúdo comparativo entre dois dispositivos. :)
Higor Rocha
Responder
Mais Posts
10/01/2017
Joel Rodrigues
Baseado no exemplo do artigo, vi que podemos alinhar quantas divs forem necessárias. Basta adicionar novas divs com a classe "box" e adicionar uma margem lateral para separá-las e facilitar a visualização. Por exemplo, no HTML:
E no CSS ficaria:
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
</div>
E no CSS ficaria:
.container {
width: 100vw;
height: 100vh;
background: #6C7A89;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center
}
.box {
width: 300px;
height: 300px;
margin: 0px 10px;
background: #fff;
}
Responder
25/05/2021
Huann Almeida
Decidi arriscar a fazer algumas adições no código.
O HTML ficaria assim:
Para o CSS, seria esse código:
O HTML ficaria assim:
<div class="container">
<form class="box">
<p id="enunciado">Entre com seu login e senha</p>
<a
href="#"
class="link"
id="cadastro"
>ou cadastre-se</a>
<input
type="text"
name="usuario"
placeholder="insira seu usuário"
class="caixa"
>
<input
type="password"
name="senha"
placeholder="sua senha"
class="caixa"
>
<input
type="submit"
value="entrar"
class="botao"
>
<a href="#"
class="link"
>Esqueci a senha</a>
</form>
</div>
Para o CSS, seria esse código:
body {
margin: 0px;
font-family: Helvetica, sans-serif;
}
.container {
width: 100vw;
height: 100vh;
background: #6C7A89;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 300px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
p#enunciado{
text-transform: uppercase;
font-size: .8rem;
color: slategray;
font-weight: bolder;
}
.caixa {
border: 0;
background-color: rgba(192, 192, 192, 0.342);
height: 2.5rem;
width: 50%;
display: block;
margin: .4rem;
text-align: center;
}
.caixa:hover{
background-color: rgba(192, 192, 192, 0.712);
}
.botao {
border: 0;
border-radius: 1rem;
display: block;
height: 2.5rem;
width: 50%;
margin: .4rem;
background-color: lightslategrey;
color: whitesmoke;
text-transform: uppercase;
}
.botao:hover{
background-color: rgba(119, 136, 153, 0.589);
}
.link{
text-decoration: none;
color: rgb(135, 182, 235);
font-size: .8rem;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 1rem;
}
a:hover{
color: rgba(255, 99, 71, 0.678);
}
Responder
16/03/2023
Rone
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(252, 252, 252);
border-top: 20px solid rgb(33, 199, 194);
width: 400px;
height: 300px;
margin: auto;
margin-top: 250px;
}
.box {
display: flex;
flex-direction: column;
}
.titulo, .entrar {
text-align: center;
font-family: ''Courier New'', Courier, monospace;
}
body {
margin-top: 20px;
margin-left: auto;
margin-bottom: auto;
background-color: rgb(94, 112, 112);
}
input {
padding: 10px;
margin: 3px;
width: 250px;
font-family:''Times New Roman'', Times, serif;
text-align: center;
background-color: rgb(242, 234, 234);
}
.login, .senha {
opacity: 60%;
}
#botao {
padding: 10px;
width: 270px;
background-color: aquamarine;
border: 1px solid rgb(200, 168, 125);
}
.entrar p {
text-align: center;
line-height: 12px;
font-size: 12px;
}
Responder
Clique aqui para fazer login e interagir na Comunidade :)
