FLEX Grid layout and responsive processing

The previous article uses Flex to implement BorderLayout, a chapter in which we implement common grid layouts and responsive processing.

First we define the HTML structure, the main box is grid, each item is Grid-cell, and the following is our HTML code structure.

<div class= "Grid" > <div class= "Grid-cell" > 1 </div> <div class= "Grid-cell" > 2 </div></div>

Grid is Flex container, Grid-cell is Flex item, we add CSS code

. grid{Display:flex;   Flex-wrap:wrap; Justify-content:space-around;}.   grid-cell{flex-grow:1;   Flex-shrink:1; padding:10px;}

Learn about the top two flex layout articles, the code is nothing to explain, Space-around is to ensure that the distance between the flex items is equal. Zoom in or out of the Grid-cell.

> Here, we add a demo box to the. Grid-cell, which is to better control the Grid-cell elements without disrupting the functionality of the flex layout, which is responsible for each individual thing. I added more grid mode for good results. HTML structure, as follows

<div class= "Grid" >    <div class= "Grid-cell" >         <div class= "Demo" >1</div>    </div>     <div class= "Grid-cell" >        < Div class= "Demo" >2</div>    </div></div><div class= "grid ">    <div class=" >        "Grid-cell"  <div class= "Demo" >1</div>    </div>     <div class= "Grid-cell" >        <div class= "Demo" >2</div>    </div>    <div class= "Grid-cell" >        <div class= "Demo" >3</div>     </div></div><div class= "Grid" >    <div class= "Grid-cell" >         <div class= "Demo" >1</div>    </div>     <div class= "Grid-cell" >        < Div class= "Demo" >2</div>    </div>    <div  class= "Grid-cell" >        <div class= "Demo" >3</ div>    </div>    <div class= "Grid-cell" >         <div class= "Demo" >4</div>     </div></div>

CSS code:

.grid{    display: flex;    flex-wrap: wrap;     justify-content: space-around;}. grid-cell{    flex-grow: 1;    flex-shrink: 1;     padding: 10px;}. demo{    background-color:  #eeeeee;    min-height: 50px;     text-align: center;     width: 100%;;} 

The demo set height and background color, in order to display the layout correctly.

The final effect is as follows:

650) this.width=650; "Src=" http://www.wutongwei.com/ueditor/jsp/upload/image/20151204/1449193566991094115.jpg " Style= "Margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-size : Inherit;line-height:inherit;font-family:inherit;vertical-align:middle;height:auto; "alt=" 1449193566991094115. JPG "/>
Grid layout, we've got it. Now different from the past only need to do a good job of the computer to display the effect, now society, Smart devices are everywhere. While people use smart devices much more than PCs, the display on smart devices is also a top priority, and responsive layouts come out.

Responsive layouts use media as a property, so it's easy to deal with them. We just need to add the following code:

@media (max-width:768px) {. grid-cell{flex-basis:100%; }}

650) this.width=650; "Src=" http://www.wutongwei.com/ueditor/jsp/upload/image/20151204/1449193567084044850.jpg " Style= "Margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-size : Inherit;line-height:inherit;font-family:inherit;vertical-align:middle;height:auto; "alt=" 1449193567084044850. JPG "/>

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 =150, welcome everyone to spread and share.

This article is from the "Ophir Technology Research" blog, please be sure to keep this source http://ophir.blog.51cto.com/1741965/1719460

FLEX Grid layout and responsive processing