add tutorial: flexbox

sitemap.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>https://vhnam.github.io/tutorials/flexbox/</loc>
+        <lastmod>2018-09-08</lastmod>
+    </url>
     <url>
         <loc>https://vhnam.github.io/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/</loc>
         <lastmod>2018-09-07</lastmod>

src/content/tutorials/flexbox/config.json

@@ -0,0 +1,6 @@
+{
+    "headline": "Flexbox",
+    "description": "Chia sẻ với mọi người về Flexbox khi dựng layout",
+    "time": "Ngày 8 tháng 9 năm 2018",
+    "dateTime": "2018-09-08"
+}

src/content/tutorials/flexbox/index.html

@@ -0,0 +1,113 @@
+<style>
+    .flex-item {
+        display: block;
+        width: 5rem;
+        height: 5rem;
+        margin: .5rem;
+        padding: .5rem;
+        color: #fff;
+        background: linear-gradient(60deg,#17b9e6 0,#a117e6 100%) no-repeat scroll center center/cover;
+    }
+
+    .flex-item--no-height {
+        display: block;
+        width: 5rem;
+        padding: .5rem;
+        color: #fff;
+        background: linear-gradient(60deg,#17b9e6 0,#a117e6 100%) no-repeat scroll center center/cover;
+    }
+</style>
+
+<p>
+    Dạo gần đây mình đi phỏng vấn, chỗ nào cũng hỏi về khái niệm <strong>Flexbox</strong> trong CSS để dựng layout. Sẵn tiện tìm hiểu nên mình viết lại tutorial luôn.
+</p>
+<img src="img/thumbnails.jpg" alt="Flexbox" itemprop="image">
+
+<h3>Flexbox</h3>
+<p>
+    Có một lời khuyên của người đi trước để lại rằng: <strong>"Căn đều một bên thì xài Flexbox, còn hai bên thì xài Grid"</strong>. Grid ở đây chính là Grid layout theo số cột, thường là 12 hoặc 16 cột.
+</p>
+<p>
+    Flexbox ở đây, có nghĩa là element cha có thuộc tính <code>display: flex</code>, các element con sẽ dựa vào đó mà sắp xếp bố cục linh động. Có thể <strong>flex</strong> ở đây mang nghĩa <strong>flexible</strong>. Vào năm 2013, tớ đã biết khái niệm này và dùng trong việc biến nội dung của thẻ <code>&lt;ul&gt;</code> từ chiều dọc thành chiều ngang trên Navbar. Thật ra, Flexbox còn nhiều công dụng nữa, chúng ta cùng tìm hiểu. Lưu ý là các bạn nhớ thường xuyên sử dụng chức năng <strong>Inspect Element</strong> của trình duyệt để tìm hiểu nhé.
+</p>
+<img src="img/flexbox.png" alt="Flexbox axis" itemprop="image">
+
+<h3>Hai chiều của Flexbox</h3>
+<p>
+    Flexbox được căn chỉnh theo 2 chiều là dọc và ngang thông qua thuộc tính <code>flex-direction</code>.
+</p>
+<pre>
+&lt;ul style="display: flex; flex-direction: column;"&gt;&lt;/ul&gt;
+</pre>
+<ul style="display: flex; flex-direction: column;">
+    <li class="flex-item"></li>
+    <li class="flex-item"></li>
+    <li class="flex-item"></li>
+</ul>
+<pre>
+&lt;ul style="display: flex; flex-direction: row;"&gt;&lt;/ul&gt;
+</pre>
+<ul style="display: flex; flex-direction: row;">
+    <li class="flex-item"></li>
+    <li class="flex-item"></li>
+    <li class="flex-item"></li>
+</ul>
+
+<h3>Các thuộc tính của Flex Items</h3>
+<p>
+    Giờ ta sẽ đi chi tiết về thuôc tính của element được bọc bởi element cha có thuộc tính <code>display: flex</code>. Đầu tiên, ta sẽ thử thuộc tính <code>flex-grow</code>. Lưu ý, tổng của flex-grow là <strong>10</strong> nhé.
+</p>
+<img src="img/img-1.png" alt="flex-grow" itemprop="image">
+<ul style="display: flex; flex-direction: row;">
+    <li class="flex-item" style="flex-grow: 2">1</li>
+    <li class="flex-item" style="flex-grow: 5">2</li>
+    <li class="flex-item" style="flex-grow: 3">3</li>
+</ul>
+<p>
+    Giờ một thuộc tính tiếp theo là <code>order</code> để sắp xếp thứ tự của flex item.
+</p>
+<img src="img/img-2.png" alt="order" itemprop="image">
+<ul style="display: flex; flex-direction: row;">
+    <li class="flex-item" style="flex-grow: 2; order: 2">1</li>
+    <li class="flex-item" style="flex-grow: 5; order: 3">2</li>
+    <li class="flex-item" style="flex-grow: 3; order: 1">3</li>
+</ul>
+
+<h3>Các layout thú vị khác</h3>
+<p>
+    Thuộc tính <code>align-items</code> để căn chỉnh theo chiều dọc của flex item.
+</p>
+<img src="img/img-3.png" alt="align-items" itemprop="image">
+<ul style="display: flex; flex-direction: row; align-items: center">
+    <li class="flex-item--no-height" style="flex-grow: 2;">lorem ipsum acrosn sak alili eiur fhdu jsiopw</li>
+    <li class="flex-item--no-height" style="flex-grow: 5;">fooop yu</li>
+    <li class="flex-item--no-height" style="flex-grow: 3;">lorem ipsum siueuen edyu ei</li>
+</ul>
+<p>
+    Thuộc tính <code>justify-content</code> để căn chỉnh 2 bên tính từ biên của flex item.
+</p>
+<img src="img/img-4.png" alt="justify-content" itemprop="image">
+<ul style="display: flex; flex-direction: row; justify-content: space-between;">
+    <li class="flex-item--no-height">lorem ipsum acrosn sak alili eiur fhdu jsiopw</li>
+    <li class="flex-item--no-height">fooop yu</li>
+    <li class="flex-item--no-height">lorem ipsum siueuen edyu ei</li>
+</ul>
+
+<h3>Chốt hạ</h3>
+<p>
+    Nãy giờ là demo để mọi người hình dung được Flexbox là thế nào. Giờ mình sẽ note lại đầy đủ thuộc tính của em nó.
+</p>
+<img src="img/flexbox-properties.png" alt="Flexbox properties" itemprop="image">
+
+<h3>Tham khảo</h3>
+<ul class="reference">
+    <li>
+        Mozilla, <a itemprop="url" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of flexbox</a>
+    </li>
+    <li>
+        CSS-Tricks, <a itemprop="url" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>
+    </li>
+    <li>
+        YouTube, <a itemprop="url" href="https://www.youtube.com/watch?v=JJSoEo8JSnc">Flexbox CSS In 20 Minutes</a>
+    </li>
+</ul>

src/indexes/tutorials.json

@@ -1,5 +1,12 @@
 {
     "tutorials": [
+        {
+            "name": "Flexbox",
+            "link" : "https://vhnam.github.io/tutorials/flexbox/",
+            "datetime": "2018-09-08",
+            "time": "Ngày 8 tháng 9 năm 2018",
+            "description": "Chia sẻ với mọi người về Flexbox khi dựng layout"
+        },
         {
             "name": "Tớ đã ăn hành với Redux như thế nào?",
             "link" : "https://vhnam.github.io/tutorials/to-da-an-hanh-voi-redux-nhu-the-nao/",

src/scripts/tutorials.py

@@ -77,7 +77,7 @@ def main():
     # for directory in directories:
     #     build(directory, 'tutorials')
 
-    build("to-da-an-hanh-voi-redux-nhu-the-nao", 'tutorials')
+    build("flexbox", 'tutorials')
 
 
 

tutorials/flexbox/img/config.json

@@ -0,0 +1,6 @@
+{
+    "headline": "Flexbox",
+    "description": "Chia sẻ với mọi người về Flexbox khi dựng layout",
+    "time": "Ngày 8 tháng 9 năm 2018",
+    "dateTime": "2018-09-08"
+}

tutorials/flexbox/img/index.html

@@ -0,0 +1,3 @@
+<p>
+    Dạo gần đây mình đi phỏng vấn, chỗ nào cũng hỏi về khái niệm <strong>Flexbox</strong> trong CSS để dựng layout. Sẵn tiện tìm hiểu nên mình viết lại tutorial luôn.
+</p>