"Css-flex" Holy Grail layout (Holy Grail layout), input box layouts, hanging layouts, fixed bottom bars

1. The Holy Grail (Holy Grail layout)

It refers to one of the most common site layouts. Page from top to bottom, divided into three parts: Head (header), torso (body), tail (footer). The torso is divided horizontally into three columns, from left to right: navigation, main bar, sub-bar.

2. Input box layout

3. Suspension layout

4, fixed the bottom bar

Sometimes, the page content is too small to occupy a screen height, the bottom bar will be raised to the middle of the page. You can then use the flex layout so that the bottom bar always appears at the bottom of the page.

vh单位:vhEqual to viewport height 1/100 . For example, if the browser is high 900px , the 1vh value evaluated is 9px . Similarly, if the display window width is 750px , the 1vw value to be evaluated is 7.5px .

Code and detailed reference: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

"Css-flex" Holy Grail layout (Holy Grail layout), input box layouts, hanging layouts, fixed bottom bars