<!DOCTYPE html>

<html>

<head>

<style>

.first-face {

  display: flex;

  justify-content: center;

  align-items: center;

}

.second-face {

  display: flex;

  justify-content: space-between;

}

.second-face .pip:nth-of-type() {

  align-self: flex-end;

}

.third-face {

  display: flex;

  justify-content: space-between;

}

.third-face .pip:nth-of-type() {

  align-self: center;

}

.third-face .pip:nth-of-type() {

  align-self: flex-end;

}

.fourth-face, .sixth-face {

  display: flex;

  justify-content: space-between;

}

.fourth-face .column, .sixth-face .column {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.fifth-face {

  display: flex;

  justify-content: space-between;

}

.fifth-face .column {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.fifth-face .column:nth-of-type() {

  justify-content: center;

}

/* OTHER STYLES */

* {

  box-sizing: border-box;

}

html, body {

  height: %;

}

body {

  display: flex;

  align-items: center;

  justify-content: center;

  vertical-align: center;

  flex-wrap: wrap;

  align-content: center;

  font-family: 'Open Sans', sans-serif;

  background: linear-gradient(top, #, #);

}

[class$="face"] {

  margin: 16px;

  padding: 4px;

  background-color: #e7e7e7;

  width: 104px;

  height: 104px;

  object-fit: contain;

  box-shadow:

    inset  5px white,

    inset  -5px #bbb,

    inset 5px  #d7d7d7,

    inset -5px  #d7d7d7;

  border-radius: %;

}

.pip {

  display: block;

  width: 24px;

  height: 24px;

  border-radius: %;

  margin: 4px;

  background-color: #;

  box-shadow: inset  3px #, inset  -3px #;

}

</style>

</head>

<body>

<div class="first-face">

  <span class="pip"></span>

</div>

<div class="second-face">

  <span class="pip"></span>

  <span class="pip"></span>

</div>

<div class="third-face">

  <span class="pip"></span>

  <span class="pip"></span>

  <span class="pip"></span>

</div>

<div class="fourth-face">

  <div class="column">

    <span class="pip"></span>

    <span class="pip"></span>

  </div>

  <div class="column">

    <span class="pip"></span>

    <span class="pip"></span>

  </div>

</div>

<div class="fifth-face">

  <div class="column">

    <span class="pip"></span>

    <span class="pip"></span>

  </div>

  <div class="column">

    <span class="pip"></span>

  </div>

  <div class="column">

    <span class="pip"></span>

    <span class="pip"></span>

  </div>

</div>

<div class="sixth-face">

  <div class="column">

    <span class="pip"></span>

    <span class="pip"></span>

    <span class="pip"></span>

  </div>

  <div class="column">

    <span class="pip"></span>

    <span class="pip"></span>

    <span class="pip"></span>

  </div>

</div>

</body>

</html>

css3 flex的更多相关文章

  1. css3 flex流动自适应响应式布局样式类

    1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联 ...

  2. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

  3. CSS3 Flex布局整理(二)-容器属性

    一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...

  4. CSS3 Flex布局整理(一)

    一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...

  5. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  6. CSS3 Flex布局（伸缩布局盒模型）学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  7. CSS3 Flex布局（项目）

    一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...

  8. CSS3 Flex布局（容器）

    一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...

  9. CSS3 & Flex Layout All In One

    CSS3 & Flex Layout All In One demos https://www.cnblogs.com/xgqfrms/p/10769302.html .flex-contai ...

  10. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

随机推荐

  1. U-Boot编译过程解析

    解压u-boot-2010.03.tar.bz2就可以得到全部U-Boot源程序.在顶层目录下有29个子目录,分别存放和管理不同的源程序.这些目录中所要存放的文件有其规则,可以分为3类. ● 与处理器 ...

  2. javax.el.PropertyNotFoundException: 异常处理

    javax.el.PropertyNotFoundException: Property 'policyId' not found on type com.omhy.common.model.enti ...

  3. sbt Getting org.scala-sbt sbt 0.13.12 ...

    本地仓库被我搞乱了,一气之下整个删掉了本地仓库,再重启sbt卡在Getting这一步. Getting org.scala-sbt sbt 0.13.12 ... 卡住 补充sbt配置文件: 文件结构 ...

  4. wamp虚拟主机的配置 .

    开发环境:WAMP 实例一,Apaceh配置localhost虚拟主机步骤 1,用记事本打开apache目录下httpd文件(如:D:\wamp\bin\apache\apache2.2.8\conf ...

  5. 搞懂Path环境变量

    path:环境变量 我们平时打开一个应用程序,一般是双击桌面图标或在开始菜单链接,无论是桌面的快捷图标还是菜单链接都包含了应用程序的安装位置信息,打开它们的时候系统会按照这些位置信息找到安装目录然后启 ...

  6. 集中式版本控制VS分布式版本控制

    CVS及SVN都是集中式的版本控制系统,而Git是分布式版本控制系统,集中式和分布式版本控制系统有什么区别呢? 集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所 ...

  7. bug0

    1,编码 之前做支付验证的时候,sdk的平台token串有的就是会有空格,折腾了很久,前后端对调好多次都没发现这个问题.结果有的平台验证通过,有的通不过. 仔细调试后发现不通过的url中参数串都是带有 ...

  8. Bootstrap (导航、标签、面包屑导航)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...

  9. openstack组件之keystone

    一 什么是keystone keystone是 OpenStack Identity Service 的项目名称.它在整个体系中充当一个授权者的角色. Keystone项目的主要目的是给整个opens ...

  10. JavaBean组件的基本使用-语法

    <jsp:useBean id="实例化对象名称" scope="保存范围" class="包.类名"> </jsp:us ...