<!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. Linux安装卸载查看vsftpd

    Linux & vsftpd 相关的命令: 查看---rpm -qa | grep vsftpd 卸载---rpm -e vsftpd 安装---rpm  -ivh /media/(在此tab ...

  2. 使用C语言在windows下一口气打开一批网页

    作者:郝峰波 mail : fengbohello@qq.com 本博客地址:http://www.cnblogs.com/fengbohello/p/4374450.html 1.核心函数说明 核心 ...

  3. 【android studio】解决android studio drawable新建项目时只有一个drawable目录的问题

    概述 android studio默认新建Module时,只新建一个drawable目录,并不会新建适配不同分辨率的drawable目录.但其实,这是可以设置的.有以下两种方法: 方法1 详细步骤 进 ...

  4. [LintCode] Count and Say 计数和读法

    The count-and-say sequence is the sequence of integers beginning as follows: 1, 11, 21, 1211, 111221 ...

  5. thinkphp无法加载模块解决办法

    前台入口文件index.php <?php //前台入口 define('THINKPHP_PATH', '../ThinkPHP/');//底层的位置 define('APP_PATH', ' ...

  6. PHP filesystem attack vectors

    http://www.ush.it/2009/02/08/php-filesystem-attack-vectors/ On Apr 07, 2008 I spoke with Kuza55 and ...

  7. 注入语句详解(get注入,cookie注入,搜索型注入等)

    注意:对于普通的get注入,如果是字符型,前加'   后加 and ''=' 拆半法 ###################################### and exists (select ...

  8. Log4J简单使用

    一.一般会将commons-logging和Log4j一起使用   原因:1.commons-logging功能较弱 2.log4j功能强大. 所需jar:       log4j-1.2.16.ja ...

  9. java类集框架图(google找的,备个份)

  10. Linux 搭建svn服务器

    一.安装svn服务器端yum install subversion      从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...