文章学习于阮一峰老师 布局教程

骰子布局练习

先设置基础css、html

<div class="box">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

// 骰子面
.box {
    width: 300px;
    height: 300px;
    margin: 30px;
    border: 2px black solid;
    border-radius: 5px;
}

// 包圆点的盒子
.dotBox {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

// 圆点
.dot {
    width: 45px;
    height: 45px;
    background-color: black;
    border-radius: 50%;
}

效果：

一、骰子面划分

按九个点位的布局，下面将使用 flex box 布局将容器里的项目在九个点随意的放置。

二、单项目

1 号点位

直接文档流单个项目就在1号点位了

2 号点位

设置 骰子面为 flex 容器，然后设置 justify-content 为 center 让 圆点居中

<div class="box one-2">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

.one-2 {
    display: flex;
    justify-content: center;
}

3 号点位

设置 骰子面为 flex 容器，然后设置 justify-content 为 flex-end 让 圆点居右

<div class="box one-3">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

.one-3 {
    display: flex;
    justify-content: flex-end;
}

4 号点位

设置 align-items 为 center 让圆点交叉轴方向居中

<div class="box one-4">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

.one-4 {
    display: flex;
    align-items: center;
}

5 号点位

设置 justify-content 为 center 水平居中，设置 align-items 为 center 垂直居中

<div class="box one-5">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

.one-5 {
    display: flex;
    justify-content: center;
    align-items: center;
}

下面几个单项的只放css了，就改一下类名 one-X

6 号点位

.one-6 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

7 号点位

.one-7 {
    display: flex;
    align-items: flex-end;
}

8 号点位

.one-8 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

9 号点位

.one-9 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

三、双项目

1-3 点位

设置两端对齐， justify-content 为 space-between

<div class="box two-1-3">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

.two-1-3 {
    display: flex;
    justify-content: space-between;
}

1-7 点位

设置主轴为竖直方向由上往下 flex-direction 为 column

设置两端对齐， justify-content 为 space-between

<div class="box two-1-7">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

.two-1-7 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

2-8 点位

<div class="box two-2-8">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

.two-2-8 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

1-8 点位

先在容器里设置两点的 align-items 都为 flex-start

然后单独给 8 号点位设置 align-self 为 flex-end

<div class="box two-1-8">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
    <div class="dotBox two-1-8-item">
        <div class="dot"></div>
    </div>
</div>

.two-1-8 {
    display: flex;
    align-items: flex-start;
}

.two-1-8-item {
    align-self: flex-end;
}

1-9 点位

先在容器里设置两点的 align-items 都为 flex-start 且 justify-content 为 space-between

然后单独给 8 号点位设置 align-self 为 flex-end

<div class="box two-1-9">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
    <div class="dotBox two-1-9-item">
        <div class="dot"></div>
    </div>
</div>

.two-1-9 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.two-1-9-item {
    align-self: flex-end;
}

四、四项目

1-3-5-8 点位

中间的单独搭个 flex 容器

<div class="box four-1-3-5-8">
    <div class="dotBox">
        <div class="dot"></div>
    </div>
    <div class="four-1-3-5-8-item">
        <div class="dotBox">
            <div class="dot"></div>
        </div>
        <div class="dotBox">
            <div class="dot"></div>
        </div>
    </div>
    <div class="dotBox">
        <div class="dot"></div>
    </div>
</div>

.four-1-3-5-8 {
    display: flex;
    align-items: flex-start;
}

.four-1-3-5-8-item {
    height: 100%;
    display: flex; 
    flex-direction: column-reverse; 
}

再增加点数就同理，使用变动主轴方向 flex-direction、主轴方向对其方式 justify-content、交叉轴方向上对其方式 align-items、使项目也是flex容器包裹项目这些方法大致都可以完成

五、最后

交一下骰子六点的作业