flex-rwd
Version:
Responsive web design by css flex
65 lines (57 loc) • 2.61 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex响应式布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="main.css" />
<style>
.flex {
width: 100%;
overflow: hidden;
}
.flex+.flex {
margin-top: 24px;
}
.flex>div {
min-height: 64px;
box-sizing: border-box;
border: solid 1px rgba(255, 255, 255, 0.9);
background-color: rgba(72, 174, 255, 0.25);
color: rgba(255, 81, 1, 0.70);
}
.flex>div:after {
padding-left: 8px;
content: attr(class);
}
</style>
</head>
<body>
<div class="flex">
<div class="flex-12">(01)</div>
</div>
<div class="flex flex-wrap space-fix space-xl-3 space-lg-3 space-md-2 space-sm-1 space-xs-1">
<div class="flex-xl-2 flex-lg-3 flex-md-6 flex-sm-12 flex-xs-12">(11)</div>
<div class="flex-xl-2 flex-lg-3 flex-md-6 flex-sm-6 flex-xs-12">(12)</div>
<div class="flex-xl-2 flex-lg-3 flex-md-4 flex-sm-6 flex-xs-12">(13)</div>
<div class="flex-xl-2 flex-lg-3 flex-md-4 flex-sm-6 flex-xs-12">(14)</div>
<div class="flex-xl-2 flex-lg-6 flex-md-4 flex-sm-6 flex-xs-12">(15)</div>
<div class="flex-xl-2 flex-lg-6 flex-md-12 flex-sm-12 flex-xs-12">(16)</div>
</div>
<div class="flex flex-wrap space-fix space-xl-3 space-lg-3 space-md-2 space-sm-1 space-xs-1">
<div class="flex-xl-2 flex-lg-3 flex-md-6 flex-sm-12 flex-xs-12">(21)</div>
<div class="flex-xl-2 flex-lg-3 flex-md-6 flex-sm-6 flex-xs-12">(22)</div>
<div class="flex-xl-2 flex-lg-3 flex-md-4 flex-sm-6 flex-xs-12">(23)</div>
<div class="flex-xl-2 flex-lg-3 flex-md-4 flex-sm-6 flex-xs-12">(24)</div>
<div class="flex-xl-2 flex-lg-6 flex-md-4 flex-sm-6 flex-xs-12">(25)</div>
<div class="flex-xl-2 flex-lg-6 flex-md-12 flex-sm-12 flex-xs-12">(26)</div>
</div>
<div class="flex flex-wrap">
<div class="flex-12 hidden-lg hidden-md hidden-sm hidden-xs">(xl)</div>
<div class="flex-12 hidden-xl hidden-md hidden-sm hidden-xs">(lg)</div>
<div class="flex-12 hidden-xl hidden-lg hidden-sm hidden-xs">(md)</div>
<div class="flex-12 hidden-xl hidden-lg hidden-md hidden-xs">(sm)</div>
<div class="flex-12 hidden-xl hidden-lg hidden-md hidden-sm">(xs)</div>
</div>
</body>
</html>