「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,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布局或许会成为新趋势?
- 原型及原型链相关内容