How flex quickly implements BorderLayout layout in CSS3

BoxLayout layout write the UI code after the end of the programmer should be unfamiliar, writing the front-end code is also familiar, including the HTML framework frame. But in the past, using float to control the CSS, control is relatively complex, but also need to add more tags and code.

After reading this interface, we can begin to write out the code layout of the tag:

<div class= "Parent" >    
The code is very simple, only a two-level relationship, of course, you can also remove the parent, the body as a parent, unless necessary.

So we started using CSS to implement BoxLayout, which also defines the parent as the Flex container, with the direction from left to right and can be wrapped.

. parent{    Display:flex;    Flex-direction:row;    Flex-wrap:wrap;    Text-align:center;}
Then set the Flex item layout mode, Header,footer we set it to flex-basis:100%, because they occupy the entire row, and the width of two aside is equal, the center is wider than the aside of the two sides, So we use Flex-grow to set their proportions.

Header, footer{    flex-basis:100%;}. center{    Flex-grow:3;} aside{    flex-grow:1;}
This realizes the BoxLayout layout, is not very simple. Do not forget, to give them a corresponding height, and background color, otherwise see is a piece of white, thought did not respond! I set this up as a reference

. parent{    Display:flex;    Flex-direction:row;    Flex-wrap:wrap;    Text-align:center;} header,footer,aside,.center{    padding:10px;;}. center,aside{    min-height:300px;} Header, footer{    flex-basis:100%;    min-height:80px;} header{    Background-color:cadetblue;} footer{    Background-color:darkgrey;}. center{    Flex-grow:3;} aside{    flex-grow:1;    Background-color:bisque;}
Final Test ok!