HTML5 - flexbox布局样例（实现一个盒子模型的效果展示）
作者：hangge | 2016-12-20 08:02
对于 Web 开发人员来说，盒子模型肯定非常熟悉了，它是 CSS 中排版布局的重要方法。这里使用 flexbox 布局来实现一个小样例，展示一个标准的盒子模型。
1，效果图
2，样例代码
- .margginBox：定义最外部容器位置，距 top 为 50px 绝对定位。
- .box：定义为一个伸缩容器，且以交叉轴方向伸缩。
- .label：定义标签位置。绝对定位的方式显示在容器左上角。
- .top、.bottom：定义了宽度为 100%，同时定义自身为伸缩容器，并设置了内部元素沿主轴和交叉轴都居中。
- .right、.left：定义了宽度为 50px，同时定义自身为伸缩容器，并设置了内部元素沿交叉轴距中，沿主轴等间隔分布。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
.height50 {
height: 50px;
}
.height400 {
height: 400px;
}
.height300 {
height: 300px;
}
.height200 {
height: 200px;
}
.height100 {
height: 100px;
}
.width400 {
width: 400px;
}
.bgorange {
background-color: #F9CC9D;
}
.bgyellow {
background-color: #FDDD9B;
}
.bggreen {
background-color: #C2CF8A;
}
.bgblue {
background-color: #8BB5C0;
}
.margginBox {
position:absolute;
top: 50px;
padding-left:7px;
padding-right:7px;
}
.box {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
color: #000000;
line-height: 1em;
}
.label {
top: 0;
left: 0;
padding: 0 3px 3px 0;
position: absolute;
background-color: #000000;
color: white;
line-height: 1em;
}
.top {
width: 100%;
justify-content: center;
display: flex;
align-items: center;
}
.bottom {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.left {
width: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.right {
width: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.heightdashed {
position: absolute;
right: 20px;
height: 100%;
border-left: 1px solid #c0c0c0;
}
.widthdashed {
position: absolute;
left: 0px;
width: 100%;
bottom: 24px;
border-top: 1px solid #c0c0c0;
}
.borderBox {
flex: 1;
display: flex;
justify-content: space-between;
}
.paddingBox {
flex: 1;
display: flex;
justify-content: space-between;
}
.elementBox{
flex: 1;
display: flex;
justify-content: space-between;
}
.measureBox {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
</style>
</head>
<body>
<span class="margginBox">
<span class="box height400 width400">
<span class="label">
margin
</span>
<span class="top height50 bgorange">
top
</span>
<span class="borderBox">
<span class="left bgorange">
left
</span>
<span class="box height300 ">
<span class="label">
border
</span>
<span class="top height50 bgyellow">
top
</span>
<span class="paddingBox">
<span class="left bgyellow">
left
</span>
<span class="box height200 ">
<span class="label">
padding
</span>
<span class="top height50 bggreen">
top
</span>
<span class="elementBox">
<span class="left bggreen">
left
</span>
<span class="box height100 bgblue">
<span class="label">
element
</span>
<span class="widthdashed">
</span>
<span class="heightdashed">
</span>
<span class="measureBox">
<span class="right">
height
</span>
</span>
<span class="bottom height50">
width
</span>
</span>
<span class="right bggreen">
right
</span>
</span>
<span class="bottom height50 bggreen">
bottom
</span>
</span>
<span class="right bgyellow">
right
</span>
</span>
<span class="bottom height50 bgyellow">
bottom
</span>
</span>
<span class="right bgorange">
right
</span>
</span>
<span class="bottom height50 bgorange">
bottom
</span>
</span>
</span>
</body>
</html>
全部评论（0）