html五个效果一块实现,HTML5 - flexbox布局样例（实现一个盒子模型的效果展示）...

对于 Web开发人员来说，盒子模型肯定非常熟悉了，它是 CSS中排版布局的重要方法。这里使用 flexbox布局来实现一个小样例，展示一个标准的盒子模型。

1，效果图

2，样例代码

.margginBox：定义最外部容器位置，距 top为 50px 绝对定位。

.box：定义为一个伸缩容器，且以交叉轴方向伸缩。

.label：定义标签位置。绝对定位的方式显示在容器左上角。

.top、.bottom：定义了宽度为 100%，同时定义自身为伸缩容器，并设置了内部元素沿主轴和交叉轴都居中。

.right、.left：定义了宽度为 50px，同时定义自身为伸缩容器，并设置了内部元素沿交叉轴距中，沿主轴等间隔分布。

hangge.com

.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;

}

margin

top

left

border

top

left

padding

top

left

element

height

width

right

bottom

right

bottom

right

bottom