├── index-05-center-flexbox.css
├── reset.css
├── index-06-container-flexbox.css
├── index-04-center-css.css
├── index-07-items-flexbox.css
├── index-08-align-self.css
├── index-09-flexbox-cols.css
├── flexbox.css
├── index-04-center-css.html
├── index-01-intro.html
├── index-05-center-flexbox.html
├── index.html
├── index-11-navbar-flexbox.html
├── cores.css
├── index-10-flexbox-mais-containers.css
├── README.md
├── index-07-items-flexbox.html
├── index-08-align-self.html
├── index-06-container-flexbox.html
├── index-02-conceitos.html
├── index-11-navbar-flexbox.css
├── index-10-flexbox-mais-containers.html
├── index-03-basico.html
└── index-09-flexbox-cols.html


/index-05-center-flexbox.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   display: flex;
3 |   align-items: center;
4 |   justify-content: center;
5 |   height: 100%;
6 | }
7 | 


--------------------------------------------------------------------------------
/reset.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   height: 100%;
 6 | }
 7 | 
 8 | ul {
 9 |   list-style-type: none;
10 | }
11 | 


--------------------------------------------------------------------------------
/index-06-container-flexbox.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   display: flex;
 3 |   min-height: 160px;
 4 | }
 5 | 
 6 | .item {
 7 |   text-align: center;
 8 |   border-radius: 5px;
 9 |   margin: 10px;
10 |   padding: 10px;
11 | }
12 | 


--------------------------------------------------------------------------------
/index-04-center-css.css:
--------------------------------------------------------------------------------
 1 | .center-css {
 2 |   position: absolute;
 3 |   left: 50%;
 4 |   top: 50%;
 5 |   transform: translate(-50%, -50%);
 6 |   width: 300px;
 7 |   text-align: center;
 8 | }
 9 | 
10 | .small {
11 |   font-size: 0.7rem;
12 |   text-decoration: none;
13 |   color: #fff;
14 | }
15 | 


--------------------------------------------------------------------------------
/index-07-items-flexbox.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   display: flex;
 3 |   min-height: 160px;
 4 |   align-items: center;
 5 |   justify-content: center;
 6 |   flex-wrap: wrap;
 7 | }
 8 | 
 9 | .item {
10 |   text-align: center;
11 |   border-radius: 5px;
12 |   margin: 10px;
13 |   padding: 10px;
14 | }
15 | 


--------------------------------------------------------------------------------
/index-08-align-self.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   display: flex;
 3 |   align-items: flex-start;
 4 |   min-height: 420px;
 5 | }
 6 | 
 7 | .item {
 8 |   text-align: center;
 9 |   border-radius: 5px;
10 |   margin: 20px;
11 |   padding: 20px;
12 | }
13 | 
14 | .item {
15 |   flex: 1;
16 | }
17 | 
18 | .item--2 {
19 |   align-self: center;
20 | }
21 | 
22 | .item--3 {
23 |   align-self: flex-end;
24 | }
25 | 


--------------------------------------------------------------------------------
/index-09-flexbox-cols.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Outfit", sans-serif;
 3 |   font-size: 16px;
 4 | }
 5 | 
 6 | .container {
 7 |   display: flex;
 8 |   flex-wrap: wrap;
 9 | }
10 | 
11 | .item {
12 |   flex-grow: 1;
13 |   flex-shrink: 1;
14 |   flex-basis: 250px;
15 |   border-radius: 10px;
16 |   padding: 20px;
17 |   margin: 20px;
18 | }
19 | 
20 | .item--title {
21 |   font-size: 22px;
22 |   color: #1f3251;
23 | }
24 | .item--text {
25 |   color: #7b879d;
26 | }
27 | 


--------------------------------------------------------------------------------
/flexbox.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Outfit", sans-serif;
 3 |   font-size: 26px;
 4 |   text-align: center;
 5 |   background-color: #42095d;
 6 |   color: #fff;
 7 | }
 8 | 
 9 | .container {
10 |   display: flex;
11 |   justify-content: space-around;
12 |   align-items: center;
13 |   height: 100%;
14 |   flex-wrap: wrap;
15 | }
16 | 
17 | .letter {
18 |   font-size: 74px;
19 |   border: 6px solid #fff;
20 | 
21 |   flex: 1;
22 |   margin: 4px;
23 | }
24 | 
25 | .next {
26 |   font-size: 1rem;
27 |   text-decoration: none;
28 |   color: #fff;
29 | }
30 | 
31 | .bottom {
32 |   position: absolute;
33 |   bottom: 4px;
34 | }
35 | 
36 | .mt-8 {
37 |   margin-top: 80px;
38 | }
39 | 


--------------------------------------------------------------------------------
/index-04-center-css.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="reset.css" />
 9 |     <link rel="stylesheet" href="cores.css" />
10 |     <link rel="stylesheet" href="index-04-center-css.css" />
11 |   </head>
12 |   <body class="flex-collor-1 flex-collor-light--ft">
13 |     <div class="center-css">
14 |       <h1>Centralizar no CSS</h1>
15 |       <p>
16 |         <a class="small" href="index-05-center-flexbox.html">Continuar 👉</a>
17 |       </p>
18 |     </div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/index-01-intro.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <title>Flexbox explicado</title>
 9 |     <link rel="stylesheet" href="reset.css" />
10 |     <link rel="stylesheet" href="flexbox.css" />
11 |   </head>
12 |   <body>
13 |     <div class="no-flexbox">
14 |       <h2>Por que foi criado?</h2>
15 |       <p>📦 Para facilitar LAYOUT no CSS</p>
16 |       <p>📦 Facilitar o layout responsivo</p>
17 |       <p>📦 Para ter um código mais fácil de manter</p>
18 |     </div>
19 |     <a class="next bottom" href="index-02-conceitos.html">Continuar 👉</a>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/index-05-center-flexbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="reset.css" />
 9 |     <link rel="stylesheet" href="cores.css" />
10 |     <link rel="stylesheet" href="index-05-center-flexbox.css" />
11 |   </head>
12 |   <body class="flex-collor-5 flex-collor-light--ft">
13 |     <div class="container">
14 |       <div>
15 |         <h1>Centralizar Flexbox</h1>
16 |         <h6>Por que não consigo centralizar verticalmente?</h6>
17 |         <p>
18 |           <a class="small" href="index-06-container-flexbox.html"
19 |             >Continuar 👉</a
20 |           >
21 |         </p>
22 |       </div>
23 |     </div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <title>Flexbox explicado</title>
 9 | 
10 |     <link rel="stylesheet" href="reset.css" />
11 |     <link rel="stylesheet" href="flexbox.css" />
12 |     <link rel="stylesheet" href="cores.css" />
13 |   </head>
14 |   <body>
15 |     <div class="container">
16 |       <div class="letter flex-collor-1">F</div>
17 |       <div class="letter flex-collor-2">L</div>
18 |       <div class="letter flex-collor-3">E</div>
19 |       <div class="letter flex-collor-4">X</div>
20 |       <div class="letter flex-collor-1">B</div>
21 |       <div class="letter flex-collor-1">O</div>
22 |       <div class="letter flex-collor-1">X</div>
23 |     </div>
24 |     <a class="next bottom" href="index-01-intro.html">Continuar 📦(80/20)</a>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/index-11-navbar-flexbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="reset.css" />
 9 |     <link rel="stylesheet" href="cores.css" />
10 |     <link rel="stylesheet" href="index-11-navbar-flexbox.css" />
11 |   </head>
12 |   <body>
13 |     <navbar>
14 |       <ul class="nav-list">
15 |         <li class="nav-item">
16 |           <img
17 |             src="https://dals0gb6i1pll.cloudfront.net/thumbnail.jpg"
18 |             width="42"
19 |             alt=""
20 |           />
21 |         </li>
22 |         <li class="nav-item"><a href="#">Passagens</a></li>
23 |         <li class="nav-item"><a href="#">Entregas</a></li>
24 |         <li class="nav-item"><a href="#">Contato</a></li>
25 |         <li class="nav-item"><button class="btn-primary">Login</button></li>
26 |       </ul>
27 |     </navbar>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/cores.css:
--------------------------------------------------------------------------------
 1 | .flex-collor-light {
 2 |   background-color: #fff;
 3 | }
 4 | 
 5 | .flex-collor-1 {
 6 |   background-color: #ec3d4c;
 7 | }
 8 | 
 9 | .flex-collor-2 {
10 |   background-color: #b650cd;
11 | }
12 | 
13 | .flex-collor-3 {
14 |   background-color: #f7a210;
15 | }
16 | 
17 | .flex-collor-4 {
18 |   background-color: #00b8c9;
19 | }
20 | 
21 | .flex-collor-5 {
22 |   background-color: #42095d;
23 | }
24 | 
25 | .flex-collor-1--ft {
26 |   color: #ec3d4c;
27 | }
28 | 
29 | .flex-collor-light--ft {
30 |   color: #fff;
31 | }
32 | 
33 | .small {
34 |   font-size: 0.7rem;
35 |   text-decoration: none;
36 |   color: #fff;
37 | }
38 | 
39 | .item-shadow {
40 |   -webkit-box-shadow: 0px 10px 40px 4px rgba(161, 173, 187, 0.55);
41 |   -moz-box-shadow: 0px 10px 40px 4px rgba(161, 173, 187, 0.55);
42 |   box-shadow: 0px 10px 40px 4px rgba(161, 173, 187, 0.55);
43 | }
44 | 
45 | .item-shadow-2 {
46 |   -webkit-box-shadow: 0px 10px 40px 4px rgba(24, 2, 34, 0.808);
47 |   -moz-box-shadow: 0px 10px 40px 4px rgba(24, 2, 34, 0.808);
48 |   box-shadow: 0px 10px 40px 4px rgba(24, 2, 34, 0.808);
49 | }
50 | 


--------------------------------------------------------------------------------
/index-10-flexbox-mais-containers.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Outfit", sans-serif;
 3 |   font-size: 16px;
 4 | }
 5 | 
 6 | .container {
 7 |   display: flex;
 8 |   align-items: center;
 9 |   justify-content: center;
10 |   height: 100%;
11 | }
12 | 
13 | .container-item {
14 |   flex-basis: 350px;
15 |   border-radius: 10px;
16 |   padding: 20px;
17 | }
18 | 
19 | .container-item img {
20 |   width: 100%;
21 |   border-radius: 10px 10px 0 0;
22 | }
23 | 
24 | .container-item ul {
25 |   display: flex;
26 |   justify-content: center;
27 |   padding: 0;
28 |   gap: 10px;
29 | }
30 | 
31 | .container-item ul > li {
32 |   flex: 1;
33 |   line-height: 2.5rem;
34 |   text-align: center;
35 | }
36 | 
37 | .container-item--title {
38 |   font-size: 22px;
39 |   color: #1f3251;
40 | }
41 | .container-item--text {
42 |   color: #7b879d;
43 | }
44 | 
45 | .actions {
46 |   display: flex;
47 | }
48 | 
49 | .actions-item {
50 |   flex: 1;
51 | }
52 | 
53 | button.actions-item {
54 |   border: none;
55 |   line-height: 2.5rem;
56 |   text-transform: uppercase;
57 |   color: #fff;
58 |   font-weight: bold;
59 | }
60 | 
61 | .text--center {
62 |   text-align: center;
63 | }
64 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS Flexbox Explicado
 2 | 
 3 | ## Referências
 4 | 
 5 | ### Geral
 6 | 
 7 | - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 8 | - https://sharkcoder.com/layout/flexbox
 9 | - https://marina-ferreira.github.io/tutorials/css/flexbox/
10 | - https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
11 | - https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox
12 | 
13 | ## Para entender `flex-grow`, `flex-shrink` e `flex-basis`
14 | 
15 | - https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#expans%C3%A3o_encolhimento_e_tamanho_dos_elementos_flex
16 | 
17 | ## O problema do min-width
18 | 
19 | - https://makandracards.com/makandra/66994-css-flex-and-min-width
20 | - https://fantasai.inkedblade.net/style/discuss/flexbox-min-size/
21 | 
22 | ## CSS width vs flex-basis
23 | 
24 | - https://mastery.games/post/the-difference-between-width-and-flex-basis/
25 | 
26 | ## Flexbox Games
27 | 
28 | - https://flexboxfroggy.com/
29 | - https://mastery.games/flexboxzombies/
30 | 
31 | ## Vídeos
32 | 
33 | - [CSS Flexbox in 100 seconds](https://www.youtube.com/watch?v=K74l26pE4YA)
34 | - [Learn flexbox the easy way](https://www.youtube.com/watch?v=u044iM9xsWU)
35 | 
36 | ## Agradecimentos
37 | 
38 | - [Willian Ribeiro](https://github.com/willianribeiro)
39 | 


--------------------------------------------------------------------------------
/index-07-items-flexbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="reset.css" />
 9 |     <link rel="stylesheet" href="cores.css" />
10 |     <link rel="stylesheet" href="index-07-items-flexbox.css" />
11 |   </head>
12 |   <body class="flex-collor-5 flex-collor-light--ft">
13 |     <h1>Items</h1>
14 |     <div class="container flex-collor-2">
15 |       <div class="item flex-collor-3">
16 |         <h2>Item 1</h2>
17 |       </div>
18 |       <div class="item flex-collor-4">
19 |         <h2>Item 2</h2>
20 |       </div>
21 |       <div class="item flex-collor-3">
22 |         <h2>Item 3</h2>
23 |       </div>
24 |       <div class="item flex-collor-3">
25 |         <h2>Item 4</h2>
26 |       </div>
27 |       <div class="item flex-collor-3">
28 |         <h2>Item 5</h2>
29 |       </div>
30 |       <div class="item flex-collor-3">
31 |         <h2>Item 6</h2>
32 |       </div>
33 |     </div>
34 |     <h3>
35 |       📦 Qual é a mágica do <code class="flex-collor-1--ft">flex: 1;</code> ?
36 |     </h3>
37 |     <h3>
38 |       📦 Entendendo
39 |       <code class="flex-collor-1--ft">flex: 0 1 auto;</code>
40 |     </h3>
41 |     <h3>
42 |       📦 Entendendo
43 |       <code class="flex-collor-1--ft">flex-grow, flex-shrink</code> e
44 |       <code class="flex-collor-1--ft">flex-basis</code>!
45 |     </h3>
46 | 
47 |     <p>
48 |       <a class="small" href="index-08-align-self.html">Continuar 👉</a>
49 |     </p>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/index-08-align-self.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="reset.css" />
 9 |     <link rel="stylesheet" href="cores.css" />
10 |     <link rel="stylesheet" href="index-08-align-self.css" />
11 |   </head>
12 |   <body class="flex-collor-5 flex-collor-light--ft">
13 |     <div class="container flex-collor-2">
14 |       <div class="item flex-collor-1">
15 |         <h1>Item 1</h1>
16 |         <p>
17 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
18 |           unde sed cupiditate, fugit laborum dicta, itaque, veritatis odio
19 |           ratione facere perferendis distinctio neque!
20 |         </p>
21 |       </div>
22 |       <div class="item flex-collor-1 item--2">
23 |         <h1>Item 2</h1>
24 |         <p>
25 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
26 |           unde sed cupiditate, fugit laborum dicta, itaque, veritatis odio
27 |           ratione facere perferendis distinctio neque!
28 |         </p>
29 |       </div>
30 |       <div class="item flex-collor-1 item--3">
31 |         <h1>Item 3</h1>
32 |         <p>
33 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
34 |           unde sed cupiditate, fugit laborum dicta, itaque, veritatis odio
35 |           ratione facere perferendis distinctio neque!
36 |         </p>
37 |       </div>
38 |     </div>
39 |     <p>
40 |       <a class="small" href="index-09-flexbox-cols.html">Continuar 👉</a>
41 |     </p>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/index-06-container-flexbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="reset.css" />
 9 |     <link rel="stylesheet" href="cores.css" />
10 |     <link rel="stylesheet" href="index-06-container-flexbox.css" />
11 |   </head>
12 |   <body class="flex-collor-5 flex-collor-light--ft">
13 |     <h1>Container</h1>
14 |     <div class="container flex-collor-2">
15 |       <div class="item flex-collor-3">
16 |         <h2>Item 1</h2>
17 |       </div>
18 |       <div class="item flex-collor-4">
19 |         <h2>Item 2</h2>
20 |       </div>
21 |       <div class="item flex-collor-3">
22 |         <h2>Item 3</h2>
23 |       </div>
24 |       <div class="item flex-collor-3">
25 |         <h2>Item 4</h2>
26 |       </div>
27 |       <div class="item flex-collor-3">
28 |         <h2>Item 5</h2>
29 |       </div>
30 |       <div class="item flex-collor-3">
31 |         <h2>Item 6</h2>
32 |       </div>
33 |     </div>
34 |     <h3>
35 |       📦 Qual é o <code class="flex-collor-1--ft">flex-direction</code> padrão?
36 |     </h3>
37 |     <h3>
38 |       📦 Qual é o <code class="flex-collor-1--ft">justify-content</code> e
39 |       <code class="flex-collor-1--ft">align-items</code> padrão?
40 |     </h3>
41 |     <h3>
42 |       📦 Qual é o <code class="flex-collor-1--ft">flex-wrap</code> padrão? e o
43 |       overflow?
44 |     </h3>
45 |     <h3>📦 Podemos ter mais de um container?</h3>
46 |     <p>
47 |       <a class="small" href="index-07-items-flexbox.html">Continuar 👉</a>
48 |     </p>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/index-02-conceitos.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <title>Flexbox explicado</title>
 9 |     <link rel="stylesheet" href="reset.css" />
10 |     <link rel="stylesheet" href="flexbox.css" />
11 |     <link rel="stylesheet" href="cores.css" />
12 |   </head>
13 |   <body>
14 |     <div class="no-flexbox">
15 |       <h1>Conceitos</h1>
16 |       <h2>(1)</h2>
17 |       <p>
18 |         📦 <code>display: <span class="flex-collor-1--ft">flex</span></code>
19 |       </p>
20 |       <h2>(2)</h2>
21 |       <p>📦 <code>container</code> e <code>items</code></p>
22 |       <p>
23 |         <img
24 |           width="300"
25 |           src="https://css-tricks.com/wp-content/uploads/2018/10/01-container.svg"
26 |           alt=""
27 |         />
28 |         <img
29 |           width="300"
30 |           src="https://css-tricks.com/wp-content/uploads/2018/10/02-items.svg"
31 |           alt=""
32 |         />
33 |       </p>
34 |       <h2>(3)</h2>
35 |       <p>📦 <code>Main Axis</code> & <code>Cross Axis</code></p>
36 |       <h2>(4)</h2>
37 |       <p>📦 Minimizar o uso de:</p>
38 |       <ul>
39 |         <li><code> display: inline-block</code></li>
40 |         <li><code> position & float</code></li>
41 |         <li><code> width: 40% </code></li>
42 |         <li><code> margin e padding</code></li>
43 |         <li><code> media queries</code></li>
44 |         <li><strong>ATENÇÃO:</strong> minimizar != de não utilizar</li>
45 |       </ul>
46 | 
47 |       <p>
48 |         <a class="next" href="index-03-basico.html">Continuar 👉</a>
49 |       </p>
50 |     </div>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/index-11-navbar-flexbox.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   /* color variables */
 3 |   --clr-primary: #d81a60;
 4 |   --clr-primary-hover: #a70f47;
 5 |   --clr-gray100: #f0f7f8;
 6 |   --clr-gray200: #cfd8dc;
 7 | }
 8 | 
 9 | *,
10 | *:before,
11 | *:after {
12 |   box-sizing: border-box;
13 | }
14 | 
15 | body {
16 |   background-color: var(--clr-gray100);
17 | }
18 | 
19 | .nav-list {
20 |   background: #fff;
21 |   box-shadow: 0px 0px 10px var(--clr-gray200);
22 |   margin: 0;
23 |   padding: 1rem 0;
24 |   border-radius: 5px;
25 |   display: flex;
26 |   justify-content: flex-end;
27 |   align-items: center;
28 | }
29 | 
30 | .nav-item {
31 |   list-style: none;
32 |   margin-right: 2rem;
33 |   font-size: 1.2rem;
34 |   text-align: center;
35 |   transition: all 200ms ease-in;
36 | }
37 | 
38 | .nav-item a {
39 |   text-decoration: none;
40 |   color: #000;
41 | }
42 | 
43 | .nav-item a:hover {
44 |   color: var(--clr-primary-hover);
45 |   text-decoration: underline;
46 | }
47 | 
48 | .nav-item:first-child {
49 |   margin-right: auto;
50 |   margin-left: 1rem;
51 | }
52 | 
53 | .btn-primary {
54 |   font-size: 1rem;
55 |   background: var(--clr-primary);
56 |   border: none;
57 |   outline: none;
58 |   border-radius: 4px;
59 |   padding: 8px 12px;
60 |   color: #fff;
61 |   cursor: pointer;
62 |   transition: all 200ms ease-in;
63 | }
64 | 
65 | .btn-primary:hover {
66 |   background: var(--clr-primary-hover);
67 | }
68 | 
69 | @media only screen and (max-width: 576px) {
70 |   .nav-list {
71 |     flex-direction: column;
72 |   }
73 |   .nav-item {
74 |     line-height: 2rem;
75 |     margin-right: 0;
76 |     font-size: 1rem;
77 |   }
78 |   .btn-primary {
79 |     margin-top: 10px;
80 |   }
81 |   .nav-item:first-child {
82 |     margin: auto 0;
83 |   }
84 | }
85 | 
86 | @media only screen and (min-width: 576px) {
87 |   .nav-list {
88 |     flex-direction: row;
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/index-10-flexbox-mais-containers.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10 |     <link
11 |       href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap"
12 |       rel="stylesheet"
13 |     />
14 | 
15 |     <title>Flexbox explicado</title>
16 | 
17 |     <link rel="stylesheet" href="reset.css" />
18 |     <link rel="stylesheet" href="cores.css" />
19 |     <link rel="stylesheet" href="index-10-flexbox-mais-containers.css" />
20 |   </head>
21 | 
22 |   <body class="flex-collor-5 flex-collor-light--ft">
23 |     <div class="container flex-collor-5">
24 |       <div class="container-item flex-collor-light item-shadow-2">
25 |         <img
26 |           width="100%"
27 |           src="https://api.time.com/wp-content/uploads/2018/04/listening-to-music-headphones.jpg?quality=85&w=1200&h=628&crop=1"
28 |           alt=""
29 |         />
30 |         <h2 class="container-item--title text--center">Music</h2>
31 |         <p class="container-item--text">
32 |           Voluptate voluptates esse, dolore id quisquam unde ex dolores deleniti
33 |           molestiae repellat commodi
34 |         </p>
35 |         <ul class="flex-collor-light--ft">
36 |           <li class="flex-collor-2">PLAY</li>
37 |           <li class="flex-collor-2">PAUSE</li>
38 |           <li class="flex-collor-2">NEXT</li>
39 |         </ul>
40 |         <div class="actions">
41 |           <button class="actions-item flex-collor-1">Register</button>
42 |         </div>
43 |       </div>
44 |     </div>
45 |     <p>
46 |       <a class="small" href="index-11-navbar-flexbox.html">Continuar 👉</a>
47 |     </p>
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/index-03-basico.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <title>Flexbox explicado</title>
 9 |     <link rel="stylesheet" href="reset.css" />
10 |     <link rel="stylesheet" href="flexbox.css" />
11 |     <link rel="stylesheet" href="cores.css" />
12 |   </head>
13 |   <body>
14 |     <div class="no-flexbox">
15 |       <h2>📦 (1) container</h2>
16 |       <p>
17 |         <code>display: <span class="flex-collor-1--ft">flex</span> </code>
18 |       </p>
19 |       <p>
20 |         <code
21 |           >flex-direction:
22 |           <span class="flex-collor-1--ft">row|column...</span></code
23 |         >
24 |       </p>
25 |       <p>
26 |         <code
27 |           >justify-content:
28 |           <span class="flex-collor-1--ft">flex-start|center...</span>
29 |         </code>
30 |       </p>
31 |       <p>
32 |         <code
33 |           >align-items:
34 |           <span class="flex-collor-1--ft">flex-start|stretch...</span>
35 |         </code>
36 |       </p>
37 |       <p>
38 |         <code
39 |           >flex-wrap: <span class="flex-collor-1--ft">nowrap|wrap</span>
40 |         </code>
41 |       </p>
42 |       <h2 class="mt-8">📦 (2) items</h2>
43 |       <p>
44 |         <code>flex-grow: <span class="flex-collor-1--ft">0|1|2...</span> </code>
45 |       </p>
46 |       <p>
47 |         <code
48 |           >flex-shrink: <span class="flex-collor-1--ft">0|1|2...</span>
49 |         </code>
50 |       </p>
51 |       <p>
52 |         <code
53 |           >flex-basis: <span class="flex-collor-1--ft">0|10rem|20%...</span>
54 |         </code>
55 |       </p>
56 |       <p>
57 |         <code>flex: <span class="flex-collor-1--ft">0 1 auto</span> </code>
58 |       </p>
59 |       <p>
60 |         <a class="next" href="index-04-center-css.html">Continuar 👉</a>
61 |       </p>
62 |     </div>
63 |   </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/index-09-flexbox-cols.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10 |     <link
11 |       href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap"
12 |       rel="stylesheet"
13 |     />
14 | 
15 |     <title>Flexbox explicado</title>
16 | 
17 |     <link rel="stylesheet" href="reset.css" />
18 |     <link rel="stylesheet" href="cores.css" />
19 |     <link rel="stylesheet" href="index-09-flexbox-cols.css" />
20 |   </head>
21 | 
22 |   <body class="flex-collor-5 flex-collor-light--ft">
23 |     <div class="container flex-collor-5">
24 |       <div class="item flex-collor-light item-shadow-2">
25 |         <h2 class="item--title">Projeto I</h2>
26 |         <p class="item--text">
27 |           Voluptate voluptates esse, dolore id quisquam unde ex dolores deleniti
28 |           molestiae repellat commodi
29 |         </p>
30 |       </div>
31 | 
32 |       <div class="item flex-collor-light item-shadow-2">
33 |         <h2 class="item--title">Projeto II</h2>
34 |         <p class="item--text">
35 |           Voluptate voluptates esse, dolore id quisquam unde ex dolores deleniti
36 |           molestiae repellat commodi
37 |         </p>
38 |       </div>
39 | 
40 |       <div class="item flex-collor-light item-shadow-2">
41 |         <h2 class="item--title">Projeto III</h2>
42 |         <p class="item--text">
43 |           Voluptate voluptates esse, dolore id quisquam unde ex dolores deleniti
44 |           molestiae repellat commodi
45 |         </p>
46 |       </div>
47 | 
48 |       <div class="item flex-collor-light item-shadow-2">
49 |         <h2 class="item--title">Projeto IV</h2>
50 |         <p class="item--text">
51 |           Voluptate voluptates esse, dolore id quisquam unde ex dolores deleniti
52 |           molestiae repellat commodi
53 |         </p>
54 |       </div>
55 | 
56 |       <div class="item flex-collor-light item-shadow-2">
57 |         <h2 class="item--title">Projeto V</h2>
58 |         <p class="item--text">
59 |           Voluptate voluptates esse, dolore id quisquam unde ex dolores deleniti
60 |           molestiae repellat commodi
61 |         </p>
62 |       </div>
63 | 
64 |       <div class="item flex-collor-light item-shadow-2">
65 |         <h2 class="item--title">Projeto VI</h2>
66 |         <p class="item--text">
67 |           Voluptate voluptates esse, dolore id quisquam unde ex dolores deleniti
68 |           molestiae repellat commodi
69 |         </p>
70 |       </div>
71 |     </div>
72 |     <p>
73 |       <a class="small" href="index-10-flexbox-mais-containers.html"
74 |         >Continuar 👉</a
75 |       >
76 |     </p>
77 |   </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------