Merge pull request #86 from RooftopAcademy/feature-84-add-classes-to-…

…flex-direction-column Added class 'fd-col' for flex-direction: column
RooftopAcademy · Nov 5, 2021 · 19dc7c2 · 19dc7c2
2 parents 8d88a1e + 4721e84
commit 19dc7c2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/public/styles.css b/public/styles.css
@@ -129,6 +129,10 @@ p::after {
     flex-wrap: wrap;
 }
 
+.fd-col {
+    flex-direction: column;
+}
+
 .bg-light-grey {
   background-color: rgb(196, 196, 196);
 }

diff --git a/src/template.html b/src/template.html
@@ -456,7 +456,23 @@ <h4>Los elementos hijos van a acomodarse un renglon abajo al no tener espacio en
             </div>
         </div>
 
-    </div>
+    <!-- Flex Direction: Column; -->
+    <div class="row">
+        <div class="col">
+            <h4>Direccion de los elementos hijos de un contenedor se posicionan en columna</h4>
+
+            <p>Se utiliza la clase
+            <pre>fd-col</pre>
+            </p>
+            <p>Ejemplo:</p>
+
+            <div class="row fd-col">
+                <div class="col" style="width:200px;height:100px;background-color:#F60;">1</div>
+                <div class="col" style="width:200px;height:100px;background-color:#F60;">2</div>
+                <div class="col" style="width:200px;height:100px;background-color:#F60;">3</div>
+                <div class="col" style="width:200px;height:100px;background-color:#F60;">4</div>
+            </div>
+        </div>
     </div>
 
     <!-- Hamburger menu -->