Fórum CSS3 Flexbox: Centralizando divs #573608

10/01/2017

0

HTML CSS Front-end

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.
Joel Rodrigues

Joel Rodrigues

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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

Higor Rocha
Responder

Gostei + 38

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:

1
2
3
4
5
6
7
<div class="container">
    <div class="box">
    </div>
 
    <div class="box">
    </div>
</div>


E no CSS ficaria:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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

Gostei + 17

25/05/2021

Huann Almeida

Decidi arriscar a fazer algumas adições no código.

O HTML ficaria assim:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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

Gostei + 13

16/03/2023

Rone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.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

Gostei + 1

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar