posted Jan 2021

Author: jsdnhk

_data/pages_latest.yaml

@@ -1,6 +1,6 @@
 ---
 - name: blog
-  mtime: 2-1-2021
+  mtime: 2-2-2021
 - name: debug
   mtime: 12-10-2020
 - name: fonts

collections/_posts/2021-02-02-post.md

@@ -0,0 +1,56 @@
+---
+title: "Flexible web layout"
+tags: [layout, web, angular]
+category: "layout"
+comment: true
+---
+
+## Background
+
+When we read the content from browser, it would render the content based on [CSS basic box model][css-box]. 
+
+However, it needs many items and attributes to control the view, so it is complicated to setup and easy to get messed.
+
+The problems from classic web layouts made web designers just using tricky and weird workaround to avoid.
+
+As a result, W3C suggested using new web layout, [flex][flex-layout], to design HTML frontend, that provide an easier all-around solution.
+
+Until now, flex layout has already became a major web layout used for modern web designers and framework.
+
+The new layout is lesser properties to know and also smarter which many attributes are calculated by render engine.
+
+The following is showing all the CSS attributes having in flex web layout, it's obviously a right layout solution.
+
+## Properties
+
+There are the properties contained in flex layout in YAML format. 
+
+```yaml
+---
+flex-container:
+  axis:
+    - main start/end(-)
+    - cross start/end(|)
+  attributes:
+    flex-direction: [row, row-reverse, column, column-reverse]
+    flex-wrap: [nowrap, wrap, wrap-reverse]
+    flex-flow: "${flex-direction} ${flex-wrap}"
+    justify-content: [flex-start, flex-end, center, space-between, space-around]
+    align-items: [flex-start, flex-end, center, baseline, stretch]
+    align-content: [stretch, flex-start, flex-end, center, space-between, space-around]
+  flex-item:
+    axis:
+      - main size(-)
+      - cross size(|)
+    attributes:
+      order: "<integer>"
+      flex-grow: "<number>"
+      flex-shrink: "<number>"
+      flex-basis: "auto | <length>"
+      flex: "${flex-grow} ${flex-shrink} ${flex-basis} | auto | none"
+      align-self: [auto, flex-start, flex-end, center, baseline, stretch]
+---
+```
+
+[flex-layout]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+[css-box]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model