当前位置: > > > HTML5 - flexbox布局样例(实现一个盒子模型的效果展示)

HTML5 - flexbox布局样例(实现一个盒子模型的效果展示)

对于 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