阅读 2656

🍊Flex布局最佳实践之骰子实战篇(面试高频考点,速来围观呀~)

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

写在前面

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

一、骰子的布局

骰子的样式

这里给出样式代码:
HTML: image.png CSS:

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

image.png

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

单项目

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

image.png

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

水平居中

image.png

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

右上角

image.png

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

垂直居中靠左

image.png

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

水平垂直居中

image.png

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

垂直居中靠右

image.png

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

左下角

image.png

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

水平居中靠下

image.png

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

右下角

image.png

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

双项目

image.png

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

image.png

改变主轴方向即可

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

image.png

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

image.png

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

image.png

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

image.png

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

三项目

image.png

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

四项目

image.png 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布局或许会成为新趋势?
  • 原型及原型链相关内容
文章分类
前端
文章标签