CSS3中如何实现Flexbox骰子布局-创新互联

小编给大家分享一下CSS3中如何实现Flexbox骰子布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司联系电话：18980820575，为您提供成都网站建设网页设计及定制高端网站建设服务，创新互联公司网页制作领域十载，包括成都木制凉亭等多个方面拥有丰富的网站运维经验，选择创新互联公司，为网站锦上添花。

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

    
     
    
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;   
}

这里我们不能使用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;   
}

该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;   
}

本例中使用了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;   
}   
   
  One

.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; } One Half One Third One Seventh

重庆分公司，新征程启航

CSS3中如何实现Flexbox骰子布局-创新互联

其他资讯