<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒布局色块排列</title>
<style>
/* 全局
样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-
box;
}
/* 外层容器 */
.container {
width: 75%;
margin: 20px auto;
padding: 15px;
display:
flex;
flex-direction: column;
gap: 12px;
border: 1px solid #eee;
}
/* 基础色块 */
.
box {
background-color: #66b1ff;
border-radius: 4px;
}
/* 顶部通栏 */
.top-bar {
height: 70px;
}
/* 行容器通用
样式 */
.row {
display:
flex;
gap: 12px;
}
/* 第一二行 */
.large {
height: 180px;
flex: 1;
}
.
group {
display:
flex;
flex-direction: row-reverse;
gap: 12px;
flex: 1;
}
.small {
height: calc(25% - 6px);
}
/* 第三行混合色块 */
.left-large0 {
height: 180px;
flex: 1;
}
.right-
group0 {
display:
flex;
flex-direction: row-reverse;
gap: 12px;
flex: 1;
}
.right-small0 {
height: calc(30% - 6px);
}
.right-
group1 {
display:
flex;
flex-direction: column;
gap: 12px;
flex: 2;
}
.right-small1 {
height: calc(25% - 6px);
}
.right-
group2 {
display:
flex;
flex-direction: row-reverse;
gap: 12px;
flex: 1;
}
.right-small2 {
height: calc(25% - 6px);
}
.right-
group3 {
display:
flex;
flex-direction: column;
gap: 12px;
flex: 3;
}
.right-small3 {
height: calc(50% - 6px);
}
/*第四行*/
.left-large {
height: 180px;
flex: 1;
}
.right-
group {
display:
flex;
flex-direction: row-reverse;
gap: 12px;
flex: 2;
}
.right-small {
height: calc(30% - 6px);
}
/* 底部通栏 */
.bottom-bar {
height: 65px;
}
</style>
</head>
<body>
<div class="container">
<div class="
box top-bar"></div>
<div class="row row-first">
<div class="
box large"></div>
<div class="
group">
<div class="
box small"></div>
<div class="
box small"></div>
<div class="
box small"></div>
<div class="
box small"></div>
</div>
</div>
<div class="row row-second">
<div class="
group">
<div class="
box small"></div>
<div class="
box small"></div>
<div class="
box small"></div>
<div class="
box small"></div>
</div>
<div class="
box large"></div>
</div>
<div class="row row-third">
<div class="
box left-large0"></div>
<div class="right-
group0">
<div class="right-
group0">
<div class="
box right-small1 "></div>
<div class="right-
group2">
<div class="right-
group3">
<div class="
box right-small3"></div>
<div class="
box right-small3"></div>
</div>
<div class="
box right-small2"></div>
</div>
</div>
<div class="
box right-small0"></div>
</div>
</div>
<div class="row row-fourth">
<div class="
box left-large"></div>
<div class="right-
group">
<div class="
box right-small"></div>
<div class="
box right-small"></div>
<div class="
box right-small"></div>
</div>
</div>
<div class="
box bottom-bar"></div>
</div>
</body>
</html>
本文介绍了在Flex中实现GroupBox控件的方法。由于Flex自身并未提供GroupBox控件，因此可以通过扩展Canvas控件来创建类似功能的控件，并添加标题显示等功能。
扫一扫
127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
