My first attempt to build up a responsive website using Flexbox layout. Check Live Demo here!
check this post on the complete guide about Flexbox layout.
Below is the code that can be applied to many text\presentation related website.  font is cool and elegant.  layout is fast since we set div to
display: flex. We won’t be bother to type that anymore, focusing on “position” and “stretch”
especially the font, it is so beautiful!
These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length). we set the vh to 100 like this:
for the parent div container, since we want that parent div can take up a viewport height. vh stands for “viewport height”
flex-directionindicate items’ aligning, rows or columns. Then
align-itemsmeans main-axis and
justify-contentis for sub-axis.
在使用 ReactNative 时你会经常看到一个神秘的设定 flex: 1，用了来扩大一个 flexbox。flex 是一个简写，同时设置 flex-grow，flex-shrink 和 flex-basis 三个属性。它们的默认值为：
flex: 0 1 auto;
flex: 1 意为 flex: 1 1 auto
Summary For All
basically using some flex-related properties to structure the whole website.
 to formate those section-like website, need to use
section tag in html file and set the corresponding containter to be
100vh which means the viewport height, so that each section can be strecthed to adapt to your screen height. (which is pretty elegant)
we usually use
these properties as container’s property.
Note that we have main-axis and sub-axis, which will help you position the items by
align-items: center; justify-content: center;
 structure inside each section. we may use another flexbox container inside one parent container to hold up more items like navigation or some scrum-map. And in this way, the
flex-direction may usually be the opposite to the parent container. For the child container, we may wonder to stretch the block to whatever proportion to the whole layout. we want to use
which also applies the same logic from main-axis and sub-axis when setting their values.
Note that the
flex-basis is pretty useful when you try to eliminate the effect of inner text to the block when stretching since
align-self: stretch ONLY stretch the empty space to full length!