「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

写在前面

在上一篇文章中，介绍了flex布局使用的基本语法，相信大家阅读完应该都掌握了~😚那么这一节给大家带来的是flex布局实战，我们将通过布局骰子点数的练习让大家更好地掌握flex布局，这也是面试中常见考察flex布局的方式哦，让我们一起来学习叭~

一、骰子的布局

骰子的样式

这里给出样式代码：
HTML: CSS:

上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 我们可以看到骰子上最多放置9个点。于是就存在多种布局：👇

下面我们就来看看各种骰子布局应该怎么写叭~

单项目

首先是一个点在左上角的情况，flex布局默认就是左对齐的，因此一行代码就够了。

.box{
    display:flex;
}
复制代码

水平居中

.box{
    display:flex;
    justify-content:center;
}
复制代码

右上角

.box{
    display:flex;
    justify-content:flex-end;
}
复制代码

垂直居中靠左

.box{
    display:flex;
    align-items:center;
}
复制代码

水平垂直居中

.box{
    display:flex;
    justify-content:center;
    align-items:center;
}
复制代码

垂直居中靠右

.box{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
复制代码

左下角

.box{
    display:flex;
    align-items:flex-end;
}
复制代码

水平居中靠下

.box{
    display:flex;
    justify-content:center;
    align-items:flex-end;
}
复制代码

右下角

.box{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
}
复制代码

双项目

.box{
    display:flex;
    justify-content:space-between;
}
复制代码

改变主轴方向即可

.box{
    display:flex;
    justify-content:space-between;
}
复制代码

.box{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
复制代码

.box{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}
复制代码

.box{
    display:flex;
}
.item:nth-child(2){
    align-self:center;
}
复制代码

.box{
    display:flex;
    justify-content:space-between
}
.item:nth-child(2){
    align-self:flex-end;
}
复制代码

三项目

.box{
    display:flex;
}
.item:nth-child(2){
    align-self:center;
}
.item:nth-child(3){
    align-self:flex-end;
}
复制代码

四项目

HTML代码如下：

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>
复制代码

CSS代码如下：

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
复制代码

最后

本文总结了Flex布局的实战，通过骰子上的点数布局带你深入理解flex布局的使用~
如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
GitHub 博客地址: github.com/skyblue309 。
笔者还有其他专栏，欢迎阅读~
Vue从放弃到入门
深入浅出JavaScript

后期更文计划

• Grid布局原理及实战
• vw和vh布局或许会成为新趋势？
• 原型及原型链相关内容