Flex 弹性布局 骰子篇练习

Flex布局实例——骰子布局

 

在CSS布局中，实现垂直居中、相同高度的列等一直是令人头疼的问题，但不管是什么布局，Flex往往都可以几行命令搞定；93%的人现在正在运行的浏览器都已经支持Flexbox，这比支持HTML5 的元素要好；所以现在我们一起来见证Flexbox的神奇，看看利用Flex如何实现骰子布局。

1.单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

 

单项目1.png

 /*单项目1*/
.first-face {
  display: flex;
}

设置项目的对齐方式，就能实现居中对齐和右对齐。

 

单项目2.png

/*单项目2*/
.first-face {
  display: flex;
  justify-content: center;
}

单项目3.png

/*单项目3*/
.first-face {
  display: flex;
  justify-content: flex-end;
}

单项目4.png

/*单项目4*/
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

单项目5.png

/*单项目5*/
.first-face {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

单项目6.png

/*单项目6*/
.first-face {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

2.双项目

双项目1.png

/*双项目1*/
.second-face {
  display: flex;
  justify-content: space-between;
}

双项目2.png

/*双项目2*/
.second-face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

双项目3.png

/*双项目3*/
.second-face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

双项目4.png

/*双项目4*/
.second-face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

双项目5.png

/*双项目5*/
.second-face {
  display: flex;
}
.second-face .dot:nth-of-type(2) {
  align-self: center;
}

双项目6.png

/*双项目6*/
.second-face {
  display: flex;
  justify-content: space-between;
}
.second-face .dot:nth-of-type(2) {
  align-self: flex-end;
}

3.三项目

三项目.png

/*三项目*/
.third-face {
  display: flex;
}
.third-face .dot:nth-of-type(2) {
  align-self: center;
}
.third-face .dot:nth-of-type(3) {
  align-self: flex-end;
}

4.四项目

四项目.png

/*四项目*/
.fourth-face {
  display: flex;
  justify-content: space-between;
}
.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

5.五项目

五项目.png

/*五项目*/
.fifth-face {
  display: flex;
}
.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
  align-self: center;
}

6.六项目

六项目.png

/*六项目*/
.sixth-face {
  display: flex;
  justify-content: space-between;
}

大合照

骰子各面大合照.png

 

 

源码：

1.html:

   
 

 
 

   
   
 

 

   
   
   
 

 

   

     
     
   

   

     
     
   

 

 

   

     
     
   

   

     
   

   

     
     
   

 

 

   

     
     
     
   

   

     
     
     
   

 

2.css

* {
  box-sizing: border-box;
}
html,body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-warp: wrap;
  align-content: center;
  background-color: #2b2b2b;
}
[class$="face"]{
  width: 104px;
  height: 104px;
  margin: 16px;
  padding: 4px;
  background-color: #e7e7e7;
  border-radius: 10%;
  object-fit: contain;
  box-shadow:
    inset 0 5px white, 
    inset 0 -5px #bbb,
    inset 5px 0 #d7d7d7, 
    inset -5px 0 #d7d7d7;
}
.dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #333;
  margin: 4px;
  box-shadow: inset 0 3px #111,inset 0 -3px #555;
}
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}
.second-face {
  display: flex;
  justify-content: space-between;
}
.second-face .dot:nth-of-type(2) {
  align-self: flex-end;
}
.third-face {
  display: flex;
}
.third-face .dot:nth-of-type(2) {
  align-self: center;
}
.third-face .dot:nth-of-type(3) {
  align-self: flex-end;
}
.fourth-face {
  display: flex;
  justify-content: space-between;
}
.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face {
  display: flex;
}
.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
  align-self: center;
}
.sixth-face {
  display: flex;
  justify-content: space-between;
}