estudos-flex-box

LarissaMicheli · Oct 8, 2024 · d6cb1ef · d6cb1ef
1 parent 07d7251
commit d6cb1ef
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 0 deletions.
diff --git a/exercicios/ex27/flex001/index.html b/exercicios/ex27/flex001/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flexible box</title>
+    <style>
+        div.container{
+            background-color: rgb(231, 89, 184);
+            display: flex;
+        }
+        div.item{
+            background-color: lightblue;
+            border: 2px solid black;
+            text-align: center;
+            flex: auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="item">A</div>
+        <div class="item">B</div>
+        <div class="item">C</div>
+        <div class="item">D</div>
+        <div class="item">E</div>
+        <div class="item">F</div>
+        <div class="item">G</div>
+    </div>
+</body>
+</html>
diff --git a/exercicios/ex27/flex002/index.html b/exercicios/ex27/flex002/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flexible box</title>
+    <style>
+        div.container{
+            background-color: rgb(231, 89, 184);
+            display: flex;
+            flex-direction: row;
+        }
+        div.item{
+            background-color: lightblue;
+            border: 2px solid black;
+            text-align: center;
+            padding: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="item">A</div>
+        <div class="item">B</div>
+        <div class="item">C</div>
+        <div class="item">D</div>
+        <div class="item">E</div>
+        <div class="item">F</div>
+        <div class="item">G</div>
+    </div>
+</body>
+</html>
diff --git a/exercicios/ex27/flex003/index.html b/exercicios/ex27/flex003/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flexible box</title>
+    <style>
+        div.container{
+            background-color: rgb(231, 89, 184);
+            display: flex;
+            flex-flow: row wrap-reverse;
+        }
+        div.item{
+            background-color: lightblue;
+            border: 2px solid black;
+            text-align: center;
+            flex: auto;
+
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="item">Exemplo de bloco A</div>
+        <div class="item">Exemplo de bloco B</div>
+        <div class="item">Exemplo de bloco C</div>
+        <div class="item">Exemplo de bloco D</div>
+        <div class="item">Exemplo de bloco E</div>
+        <div class="item">Exemplo de bloco F</div>
+        <div class="item">Exemplo de bloco G</div>
+    </div>
+</body>
+</html>
diff --git a/exercicios/ex27/flex004/index.html b/exercicios/ex27/flex004/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flexible box</title>
+    <style>
+        div.container{
+            background-color: rgb(231, 89, 184);
+            height: 200px;
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: space-around;
+            align-items: stretch;
+        }
+        div.item{
+            background-color: lightblue;
+            border: 2px solid black;
+            text-align: center;
+
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="item">A</div>
+        <div class="item">B</div>
+        <div class="item">C</div>
+        <div class="item">D</div>
+        <div class="item">E</div>
+        <div class="item">F</div>
+        <div class="item">G</div>
+    </div>
+</body>
+</html>
diff --git a/exercicios/ex27/flex005/index.html b/exercicios/ex27/flex005/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flexbox Centralizado</title>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            box-sizing: border-box;
+        }
+        body{
+            background-color: lightcoral;
+        }
+        main{
+            background-color: lightslategray;
+            height: 100vh;
+            width: 100vw;
+
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: center;
+            align-items: center;
+        }
+        section{
+            background-color: lightblue;
+            height: 200px;
+            width: 200px;
+
+
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <section>
+            <h1>Tela de Login</h1>
+        </section>
+    </main>
+</body>
+</html>