Flex 弹性布局骰子篇练习

最新推荐文章于 2022-02-13 14:36:29 发布

kyin8040

最新推荐文章于 2022-02-13 14:36:29 发布

阅读量2.6k

点赞数 9

文章标签： flex 弹性布局骰子练习

原文链接：https://www.jianshu.com/p/81f1188ba73f

版权

Flex布局实例——骰子布局

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

1.单项目

<div class="first-face">
    <span class="dot"></span>
  </div>

首先，只有左上角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.双项目

<div class="second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>

双项目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.三项目

<div class="third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>

三项目.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.四项目

<div class="fourth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

四项目.png

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

5.五项目

<div class="fifth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

五项目.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.六项目

<div class="sixth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

六项目.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;
}

kyin8040

关注

9
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
Flex 弹性布局骰子篇练习

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

扫一扫