css3 flex

<!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的更多相关文章

css3 flex流动自适应响应式布局样式类
1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联 ...
CSS3 Flex布局整理(三)-项目属性
一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...
CSS3 Flex布局整理(二)-容器属性
一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...
CSS3 Flex布局整理(一)
一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...
CSS3 Flex Box（弹性盒子）
CSS3 Flex Box(弹性盒子) 一.简介弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
CSS3 Flex布局（项目）
一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...
CSS3 Flex布局（容器）
一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...
CSS3 & Flex Layout All In One
CSS3 & Flex Layout All In One demos https://www.cnblogs.com/xgqfrms/p/10769302.html .flex-contai ...
css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

随机推荐

基于MINA构建简单高性能的NIO应用
mina是非常好的C/S架构的java服务器,这里转了一篇关于它的使用感受. 前言MINA是Trustin Lee最新制作的Java通讯框架.通讯框架的主要作用是封装底层IO操作,提供高级的操作API ...
20145330《Java程序设计》第三周学习总结
20145330 <Java程序设计>第三周学习总结第三周知识的难度已经逐步上升,并且一周学习两章学习压力也逐渐加大,需要更高效率的来完成学习内容,合理安排时间. 类与对象对象(Obj ...
python rabbitmq
#!/usr/bin/env python3 # -*- coding: utf-8 -*- """ @author: zengchunyun ""& ...
李洪强iOS经典面试题135-Objective-C
可能碰到的iOS笔试面试题(5)--Objective-C 面试笔试都是必考语法知识的.请认真复习和深入研究OC. Objective-C 方法和选择器有何不同?(Difference between ...
四种读写方案IO流 (JAVA)
File类用于访问文件或目录的属性流:指一连串流动的字符,是以先进先出的方式发送信息的通道.程序和数据源之间是通过流联系起来的. 第一套:字节流读取写入方案 FileInputStream :字节流 ...
[转载]QQ通讯原理及QQ是怎么穿透内网的
QQ是一个基于TCP/UDP协议的通讯软件发送消息的时候是UDP打洞,登陆的时候使用HTTP~因为登陆服务器其实就是一个HTTP服务器,只不过不是常用的那些,那个服务器是腾讯自行开发的!!! 一.登 ...
CSS Bugs 解决方案
说明:本文档兼容性测试基础环境为:windows系统:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 Bugs及解决方案列表(以下实例默 ...
一次有趣的XSS漏洞挖掘分析（1）
最近认识了个新朋友,天天找我搞XSS.搞了三天,感觉这一套程序还是很有意思的.因为是过去式的文章,所以没有图.但是希望把经验分享出来,可以帮到和我一样爱好XSS的朋友.我个人偏爱富文本XSS,因为很有 ...
ASCII码
ASCII(pronunciation: /ˈæski/ ASS-kee,American Standard Code for Information Interchange,美国信息交换标准代码)是 ...
【iCore3 双核心板_ uC/OS-III】例程九：任务信号量
实验指导书及代码包下载: http://pan.baidu.com/s/1c1W29uK iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

css3 flex

css3 flex的更多相关文章

随机推荐

热门专题