首页 > css教程 > 正文

CSS3的Flexbox骰子布局的实现及分析

原创 2018-06-14 0 621
这篇文章主要介绍了关于CSS3的Flexbox骰子布局的实现及分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

骰子布局顾名思义,就是好比骰子的一面最多可以放置9个点,而每个面放置的点数正好就是一个布局的模型图,这里我们就带来CSS3的Flexbox骰子布局的实现及问题讲解:

本文中只是熟悉基本属性的用法,并完成一组骰子各个面的制作。在下面的内容我不会涉及flexbox一些比较棘手的问题,比如旧版本语法、供应商前缀、浏览器怪癖等:

一、First Face
我们知道,骰子有六个面,每个面的点的个数代表该面的值,第一个面由一个水平垂直居中的点组成。下面来看具体的实现:

 <section name="01" class="face-01">   
  <span class="dot"></span>   
 </section>   
face-01 {   
display: flex;   
justify-content: center;   
align-items: center;

关于justify-content和align-items的用法请参考这里justify-content,align-items。使用flexbox,垂直居中两行属性就可以搞定,很easy!

二、Second Face

.face-02 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-02 .dot:nth-of-type(2) {   
 align-self: flex-end;   
}   
  <section name="02" class="face-02">   
   <span class="dot"></span>   
   <span class="dot"></span>   
  </section>

这里我们不能使用align-items属性,使用它两个点都会受影响,flexbox提供了一个align-self属性,这个属性可以让我们更方便的控制flex items的各项沿着cross axias方向,设置不同的布局。align-self的用法参考这里align-self。

三、Third Face

.face-03 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-03 .dot:nth-of-type(2) {   
 align-self: center;   
}   
.face-03 .dot:nth-of-type(3) {   
 align-self: flex-end;   
}   
<section name="03" class="face-03">   
 <span class="dot"></span>   
 <span class="dot"></span>   
 <span class="dot"></span>   
</section>

该face与second face 使用的属性相同,不再解释。

四、Fourth Face

.face-04 {   
 display: flex;   
 justify-content: space-between;   
 flex-direction: column;   
}   
.face-04 .column {   
 display: flex;   
 justify-content: space-between;   
}   
<section name="04" class="face-04">   
  <p class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </p>   
  <p class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </p>   
</section>

本例中使用了flex-direction,从字面意思可以看出,是用来控制flex的方向,即按列还是按行来布局,该属性更详细的用法可以参考这里flex-direction

后面Fifth Face 和 Sixth Face,根据前面的布局思想,就很easy了不再赘述!

写到此,想想配合JS写一个玩骰子的小游戏应该很easy了吧。

五、实现1,2,3,4,6,12等份

.row {   
  display: flex;   
  box-sizing: border-box;   
}   
.column {   
  margin: 10px;   
  flex-grow: 1;   
  flex-shrink: 1;   
  flex-basis: 0;   
  box-sizing: border-box;   
}   
<section class="row">   
  <p class="column">One</p>   
</section>   
<section class="row">   
  <p class="column">One Half</p>   
  <p class="column">One Half</p>   
</section>   
<section class="row">   
  <p class="column">One Third</p>   
  <p class="column">One Third</p>   
  <p class="column">One Third</p>   
</section>   
<section class="row">   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
</section>   
<section class="row">   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
</section>   
<section class="row">   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
</section>  [object Object]

在本例中用到了flex-grow,flex-shrink,flex-basis三个属性。
1. flex-grow:根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
如果所有伸缩项目的“flex-grow”设置了“1”,那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”,那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。负值无效。
2. flex-shrink:根据需要用来定义伸缩项目收缩的能力。负值同样无效。
3. flex-basis: 用来设置伸缩基准值,剩余的空间按比率进行伸缩,不支持负值。如果设置为0,围绕内容的额外的空间不会考虑在内。如果设置为auto,额外的空间是基于flex-grow的值分配。

六、实现2-3-7布局

.row237 .column:first-of-type {   
  flex-grow: 2;   
  flex-basis: 5px;   
}   
.row237 .column:nth-of-type(2) {   
  flex-grow: 3;   
  flex-basis: 18px;   
}   
.row237 .column:nth-of-type(3) {   
  flex-grow: 7;   
  flex-basis: 70.5px;   
}   
<section class="row row237">   
  <p class="column">One Half</p>   
  <p class="column">One Third</p>   
  <p class="column">One Seventh</p>   
</section>

此处各项flex-basis的值的计算,应该有个公式(待解决),如果有这个公式,配合sass,less等预处理语言实现多列自适应布局将会很方便。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何实现CSS控制DIV层显示和隐藏

用icon fonts来辅助CSS处理图片

关于css flex 的弹性布局

以上就是CSS3的Flexbox骰子布局的实现及分析的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • 昧光

      学生

    • 3442篇
      文章总数
    • 621
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新