CSS3 Flex quickly implements BorderLayout layout

After learning the flex layout pattern, we strike a boxlayout layout. What is the boxlayout layout? Let's start with a picture.

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:

[HTML]View Plaincopy

2. <div class="parent">
4. <header> North </header>
6. <aside class="left"> East </aside>
8. <div class="center"> </div>
10. <aside class="Righ"> West </aside>
12. <footer> South </footer>
14. </div>

代码很简单,就只有二级关系,当然也可以将parent这一父级去掉,将body来当做父级,除非有必要.

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

[CSS]View Plaincopy

1. . parent{
2. Display:flex;
3. flex-Direction:row;
4. Flex-wrap:wrap;
5. text-align: Center;
6. }

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.

[CSS]View Plaincopy

1. HEADER,&NBSP;FOOTER{&NBSP;&NBSP;
2.      Flex-basis: 100%;&NBSP;&NBSP;
3. }&NBSP;&NBSP;
4. . CENTER{&NBSP;&NBSP;
5.     flex-grow: 3;&NBSP;&NBSP;
6. }  
7. ASIDE{&NBSP;&NBSP;
8.     flex-grow:1;&NBSP;&NBSP;
9. }  

这样就实现了BorderLayout布局,是不是非常简单.不要忘记了,要给他们设定相应的高度,和背景色,不然看到的是一片白,以为没反应呢!我是这样设置的,作为参考

[CSS]View Plaincopy

2. . parent{
4. Display:flex;
6. flex-Direction:row;
8. Flex-wrap:wrap;
10. text-align: Center;
12. }
14. Header,footer,aside,. center{
16. padding: 10px;;
18. }
20. . center,aside{
22. min-height: 300px;
24. }
26. Header, footer{
28. Flex-basis: 100%;
30. min-height: 80px;
32. }
34. header{
36. Background-color:cadetblue;
38. }
40. footer{
42. Background-color:darkgrey;
44. }
46. . center{
48. Flex-grow: 3;
50. }
52. aside{
54. Flex-grow:1;
56. Background-color:bisque;
58. }

最后测试OK!

This article belongs to Wu Shi Wei's blog, the public number: Bianchengderen original article, reproduced when please indicate the source and the corresponding link: http://www.wutongwei.com/front/infor_showone.tweb?id =148, welcome everyone to spread and share.

CSS3 Flex quickly implements BorderLayout layout