The flexible layout is very useful on mobile pages. The flexible layout mainly uses the flex property of CSS3.
Let's share a method of using flex to implement percentage layout, which is a very common adaptation method in mobile terminals.
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局</title>
<style type="text/css">
.Grid{
display: flex;
}
.Grid-cell{
flex: 1;
}
.Grid-cell.u-full{
flex: 0 0 100%;
}
.Grid-cell.u-1of2{
flex: 0 0 50%;
}
.Grid-cell.u-1of3{
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4{
flex: 0 0 25%;
}
</style>
</head>
<body>
<div class="Grid">
<div class="Grid-cell u-1of4" style="background-color: #2D82FF">1/4</div>
<div class="Grid-cell" style="background-color: #6DDA79">auto</div>
<div class="Grid-cell u-1of3" style="background-color: #46A0CE">1/3</div>
</div>
<p></p>
<div class="Grid">
<div class="Grid-cell" style="background-color: #2D82FF">auto</div>
<div class="Grid-cell u-1of3" style="background-color: #6DDA79">1/3</div>
</div>
<p></p>
<div class="Grid">
<div class="Grid-cell u-1of2" style="background-color: #2D82FF">1/2</div>
<div class="Grid-cell" style="background-color: #6DDA79">auto</div>
<div class="Grid-cell" style="background-color: #46A0CE">auto</div>
</div>
</body>
</html>
Program running result:
flex: 0 0 100%;
Parameter explanation:
The first parameter: flex-grow defines the enlargement ratio of the item, the default is 0, that is, if there is remaining space, it will not be enlarged.
The second parameter: flex-shrink defines the shrink ratio of the item, the default is 1, that is, if there is insufficient space, the item will shrink.
The third parameter: flex-basis defines the main size occupied by the item before allocating excess space. Based on this property, the browser calculates whether there is excess space on the main axis. Its default value is auto, which is the original size of the item.
references:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html