1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .first-face {
  6.   display: flex;
  7.   justify-content: center;
  8.   align-items: center;
  9. }
  10.  
  11. .second-face {
  12.   display: flex;
  13.   justify-content: space-between;
  14. }
  15.  
  16. .second-face .pip:nth-of-type() {
  17.   align-self: flex-end;
  18. }
  19.  
  20. .third-face {
  21.   display: flex;
  22.   justify-content: space-between;
  23. }
  24.  
  25. .third-face .pip:nth-of-type() {
  26.   align-self: center;
  27. }
  28.  
  29. .third-face .pip:nth-of-type() {
  30.   align-self: flex-end;
  31. }
  32.  
  33. .fourth-face, .sixth-face {
  34.   display: flex;
  35.   justify-content: space-between;
  36. }
  37.  
  38. .fourth-face .column, .sixth-face .column {
  39.   display: flex;
  40.   flex-direction: column;
  41.   justify-content: space-between;
  42. }
  43.  
  44. .fifth-face {
  45.   display: flex;
  46.   justify-content: space-between;
  47. }
  48.  
  49. .fifth-face .column {
  50.   display: flex;
  51.   flex-direction: column;
  52.   justify-content: space-between;
  53. }
  54.  
  55. .fifth-face .column:nth-of-type() {
  56.   justify-content: center;
  57. }
  58.  
  59. /* OTHER STYLES */
  60.  
  61. * {
  62.   box-sizing: border-box;
  63. }
  64.  
  65. html, body {
  66.   height: %;
  67. }
  68.  
  69. body {
  70.   display: flex;
  71.   align-items: center;
  72.   justify-content: center;
  73.   vertical-align: center;
  74.   flex-wrap: wrap;
  75.   align-content: center;
  76.   font-family: 'Open Sans', sans-serif;
  77.  
  78.   background: linear-gradient(top, #, #);
  79. }
  80.  
  81. [class$="face"] {
  82.   margin: 16px;
  83.   padding: 4px;
  84.  
  85.   background-color: #e7e7e7;
  86.   width: 104px;
  87.   height: 104px;
  88.   object-fit: contain;
  89.  
  90.   box-shadow:
  91.     inset  5px white,
  92.     inset  -5px #bbb,
  93.     inset 5px  #d7d7d7,
  94.     inset -5px  #d7d7d7;
  95.  
  96.   border-radius: %;
  97. }
  98.  
  99. .pip {
  100.   display: block;
  101.   width: 24px;
  102.   height: 24px;
  103.   border-radius: %;
  104.   margin: 4px;
  105.  
  106.   background-color: #;
  107.   box-shadow: inset  3px #, inset  -3px #;
  108. }
  109. </style>
  110. </head>
  111. <body>
  112. <div class="first-face">
  113.   <span class="pip"></span>
  114. </div>
  115. <div class="second-face">
  116.   <span class="pip"></span>
  117.   <span class="pip"></span>
  118. </div>
  119. <div class="third-face">
  120.   <span class="pip"></span>
  121.   <span class="pip"></span>
  122.   <span class="pip"></span>
  123. </div>
  124. <div class="fourth-face">
  125.   <div class="column">
  126.     <span class="pip"></span>
  127.     <span class="pip"></span>
  128.   </div>
  129.   <div class="column">
  130.     <span class="pip"></span>
  131.     <span class="pip"></span>
  132.   </div>
  133. </div>
  134. <div class="fifth-face">
  135.   <div class="column">
  136.     <span class="pip"></span>
  137.     <span class="pip"></span>
  138.   </div>
  139.   <div class="column">
  140.     <span class="pip"></span>
  141.   </div>
  142.   <div class="column">
  143.     <span class="pip"></span>
  144.     <span class="pip"></span>
  145.   </div>
  146. </div>
  147. <div class="sixth-face">
  148.   <div class="column">
  149.     <span class="pip"></span>
  150.     <span class="pip"></span>
  151.     <span class="pip"></span>
  152.   </div>
  153.   <div class="column">
  154.     <span class="pip"></span>
  155.     <span class="pip"></span>
  156.     <span class="pip"></span>
  157.   </div>
  158. </div>
  159. </body>
  160. </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. ubuntu 12.04 安装wireshark

    轉載自http://blog.chinaunix.net/uid-27064719-id-3786626.html 在ubuntu 12.04下安装wireshark软件之后,打开wireshark开 ...

  2. 选择Nodejs的N个理由

    选择Nodejs的N个理由 作者 马德奎 发布于 2014年9月25日 Caleb Madrigal是 来自美国密尔沃基市的一名软件顾问.四年前,他在听说“将JavaScript用作服务器端语言”这样 ...

  3. github的git.exe的目录所在

    github的git.exe位于 C:\Users\[username]\AppData\Local\GitHub\PortableGit_25d850739bc178b2eb13c3e2a9faaf ...

  4. android中versionCode&versionName

    原文来自:http://blog.csdn.net/wh_19910525/article/details/8660416 ,略有修改 一.概述 Android的版本可以在androidmainfes ...

  5. [CareerCup] 18.4 Count Number of Two 统计数字2的个数

    18.4 Write a method to count the number of 2s between 0 and n. 这道题给了我们一个整数n,让我们求[0,n]区间内所有2出现的个数,比如如 ...

  6. [zt]OpenCV如何获取视频当前的一帧图像

    (OpenCV读取视频.OpenCV提取视频每一帧.每一帧图片合成新的AVI视频)CvCapture 是视频获取结构 被用来作为视频获取函数的一个参数 比如 CvCapture* cap; IplIm ...

  7. java ReentrantLock可重入锁功能

    1.可重入锁是可以中断的,如果发生了死锁,可以中断程序 //如下程序出现死锁,不去kill jvm无法解决死锁 public class Uninterruptible { public static ...

  8. odoo 动态创建字段的方法

    动态创建字段并非一个常见的的需求,但某些情况下,我们确实又需要动态地创建字段. Odoo 中创建字段的方法有两种,一种是通过python文件class中进行定义,另一种是在界面上手工创建,odoo通过 ...

  9. struts2常用标签使用说明

    在struts2中,用的是s标记,先在jsp文件中引入标记:<%@ taglib prefix="s" uri="/struts-tags"%> & ...

  10. css问题 ie7兼容性问题

    1.响应式网站用百分比时ie7不兼容:试试将margin:0 10% 改为margin-left:15%; 左边是可以的,但是右边就不行了 2.ie7的span 里的字会出现白色背景 ,是因为没有定高 ...