Merge pull request #13 from npranto/fb

adds flex example
npranto · Sep 26, 2017 · be70b70 · be70b70
2 parents 0f1ceab + 795c421
commit be70b70
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -89,3 +89,10 @@ A guide to understanding flexbox in depth with practical examples
     + [flex-basis: auto](http://understanding-flexbox.surge.sh/#flex-basis-auto)
     + [flex-basis: 50%](http://understanding-flexbox.surge.sh/#flex-basis-50-percentage)
     + [flex-basis: 100px](http://understanding-flexbox.surge.sh/#flex-basis-100-pixels)
+
+#### flex
++ a shorthand for flex-shrink, flex-grow and flex-basis all together
++ an simple example could be `flex: 0 1 auto`, 0 is flex-grow, 1 is flex-shrink, and auto is flex-basis 
++ `flex`property values:
+    + [flex: 0 1 150px](http://understanding-flexbox.surge.sh/#flex)
+
diff --git a/src/index.html b/src/index.html
@@ -1708,6 +1708,54 @@ <h2 class="header red">
 }
 .thirty-four li {
     flex-basis: 100px;
+}
+                            <!--code-->
+                        </pre>
+                    </code>
+                </section>
+            </article>
+        </details>
+    </div>
+
+    <h2 style="font-family: AppleGothic; color: dimgray; text-align: center"> Flex </h2>
+    <div class="container">
+        <a name="flex"></a>
+        <h2 class="header red">
+            <code>
+                flex: 0 1 150px;
+            </code>
+        </h2>
+        <!--code-->
+        <ul class="thirty-five">
+            <li class="item"> coffee </li>
+            <li class="item"> is coffee better than tea? </li>
+            <li class="item">
+                Remember how I said the beauty
+                of the flex-items is being
+                “flexible”? Well, it appears
+                you also have a control over
+                that.
+            </li>
+        </ul>
+        <!--code-->
+        <br>
+        <details>
+            <summary> <b> Source Code </b> </summary>
+            <article class="source-code">
+                <section class="html">
+                    <!--code-->
+                    <pre>&lt;ul class="thirty-five"&gt;<br />    &lt;li class="item"&gt; coffee &lt;/li&gt;<br />    &lt;li class="item"&gt; is coffee better than tea? &lt;/li&gt;<br />    &lt;li class="item"&gt;<br />        Remember how I said the beauty<br />        of the flex-items is being<br />        &ldquo;flexible&rdquo;? Well, it appears<br />        you also have a control over<br />        that.<br />    &lt;/li&gt;<br />&lt;/ul&gt;</pre>
+                    <!--code-->
+                </section>
+                <section class="css">
+                    <code>
+                        <pre>
+                        <!--code-->
+.thirty-five {
+    display: flex;
+}
+.thirty-five li {
+    flex: 0 1 150px;
 }
                             <!--code-->
                         </pre>

diff --git a/src/style.css b/src/style.css
@@ -289,4 +289,12 @@ li {
 }
 .thirty-four li {
     flex-basis: 100px;
+}
+
+/*----- thirty-five -----*/
+.thirty-five {
+    display: flex;
+}
+.thirty-five li {
+    flex: 0 1 150px;
 }