mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html style="height:100%;">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8">
|
|
<title>-webkit-flex demo</title>
|
|
<meta name="description" content="">
|
|
<meta name="keywords" content="">
|
|
<style>
|
|
html body{margin:0; padding: 0;}
|
|
.flexbox {
|
|
display: -webkit-flex;
|
|
-webkit-flex-flow: row;
|
|
-webkit-flex-wrap: nowrap;
|
|
width: 100%;
|
|
-webkit-flex: 1;
|
|
}
|
|
.flexbox div{color:#ffffff;text-align:center;}
|
|
.flexbox .item1,.flexbox .item6{-webkit-flex:1;background:#ff6600;flex:1;}
|
|
.flexbox .item2,.flexbox .item8{-webkit-flex:2;background:#0099ff;flex:2;}
|
|
.flexbox .item3{-webkit-flex:3;background:#ff9900;flex:3;}
|
|
.flexbox .item4{-webkit-flex:4;background:#ff0000;flex:4;}
|
|
.flexbox .item5{-webkit-flex:5;background:#339966;flex:5;}
|
|
.flexbox .item7{width:50%;background:#ff9900;}
|
|
</style>
|
|
|
|
</head>
|
|
<body style="height:100%;display:flex;display:-webkit-flex;">
|
|
<div class="flexbox">
|
|
<div class="item1"></div>
|
|
<div class="item2"></div>
|
|
<div class="item3"></div>
|
|
<div class="item4"></div>
|
|
<div class="item5"></div>
|
|
</div>
|
|
</body>
|
|
</html> |