写在前面
在上一篇文章中，介绍了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布局的使用~
如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
后期更文计划
- Grid布局原理及实战
- vw和vh布局或许会成为新趋势？
- 原型及原型链相关内容
