Flex 布局教程：实例篇（二）

最新推荐文章于 2025-05-05 15:50:28 发布

逍遥不羁

最新推荐文章于 2025-05-05 15:50:28 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： flex 布局

css 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用HTML和CSS中的Flex布局来绘制骰子的六个面。通过设置不同的对齐方式，实现各点数的准确布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用flex布局，绘制骰子的六个面。

先看效果图：

这里写图片描述

html代码：

<body>

    <div class="first-face">
        <span class="pip"></span>
    </div>

    <div class="second-face">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>

    <div class="third-face">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
    </div>

    <div class="fourth-face">
        <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
    </div>

    <div class="fifth-face">
        <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="column">
            <span class="pip"></span>
        </div>  
        <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
    </div>

    <div class="sixth-face">
        <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
    </div>

</body>

CSS代码：

<style type="text/css">
*{
  box-sizing: border-box;/* 通过box-sizing属性，重新定义盒子模型with、height属性所包含的范围:content+padding+border */
}

body,div,span{
    margin:0px;
    padding:0px;
}

html,body{
    height:100%;
}

body{
    /* flex布局，设为flex容器，默认导致所有子元素(项目)同行显示，相当于设置子元素display:inline-block */
    display:flex;
    display:-webkit-flex;
    flex-wrap:wrap;/* 是否换行 */
    justify-content:center;/* 横向对齐方式 */
    align-items:center;/* 纵向对齐方式 */
    align-content:center;/* 多行情况下的纵向对齐方式 */

    vertical-align:middle;
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(top, #222, #333);
    background:-webkit-linear-gradient(top,#222,#333);
}

[class$='face']{
    display:flex;
    margin:16px;
    padding:4px;
    width:104px;
    height:104px;
    background:#e7e7e7;
    object-fit:contain;/* object-fit属性与background-size属性实现的效果类似 */
    border-radius:10%;/* 添加边框圆角 */

    /* 添加盒子边框阴影 */
    box-shadow:
    0 5px white inset,
    -5px 0 #bbb inset,
    0 -5px #d7d7d7 inset,
    5px 0 #d7d7d7 inset;

}

.pip{
    display:block;/* span设置为块级元素，独占一行 */
    width:24px;
    height:24px;
    margin:4px;
    background:#333;
    border-radius:50%;
    box-shadow:0 3px #111 inset,0 -3px #555 inset;
}

/* 一点 */
.first-face{
    justify-content:center;
    align-items:center;
}

/* 两点 */
.second-face{
    justify-content:space-between;
}

.second-face .pip:nth-child(2){
    /* 
    1、flex容器内的单个项目，调整对齐方式，只有纵向对齐方式可调，通过align-self属性实现。
    2、align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    3、由1和2可知，flex容器内各个项目对齐方式不统一，先设置flex容器整体项目的对齐方式()主要只横向对齐)，然后通过align-self设置具体项目的对齐方式(纵向对齐)
     */
    align-self:flex-end;
}

/* 三点 */
.third-face{
    justify-content:space-between;
}
.third-face .pip:nth-of-type(2){
    align-self:center;
}
.third-face .pip:nth-of-type(3){
    align-self:flex-end;
}

/* 四点和六点 */
.fourth-face,.sixth-face{
    justify-content:space-between;
}
.fourth-face .column,.sixth-face .column{
    display:flex;/* flex布局，设为flex容器，让身为块级元素的子元素(项目)同行显示 */

    /* 
    1、先设置对齐方式，再调整显示方式
    2、如果先调整显示方式，使用的对齐方式属性(justify-content/align-items)应该用调整显示方式之前所对应的属性
     */
    justify-content:space-between;/* 设置航向对齐方式为两端对齐 */
    flex-direction:column;/* 让同行显示的子元素(项目) 纵向显示*/
}

/* 五点 */
.fifth-face{
    justify-content:space-between;/* 先项目两端对齐 */
    flex-direction:column;/* 再项目纵向显示 */
}

.fifth-face .column{
    display:flex;
    justify-content:space-between;
}

.fifth-face .column:nth-child(2){
    justify-content:center;
}
</style>