实现麻将中三点筛子:效果如下图

  

具体实现代码:

  html代码:

  <div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div>

    css 代码:

   .box{
width: 200px;
height: 200px;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-between; /*设置两端对齐*/
border: 2px solid #ccc;
border-radius: 10px;
}
.item{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2){
align-self: center; /*垂直方向居中*/
}
.item:nth-child(3){
align-self: flex-end; /*垂直方尾对齐*/
}

flex 布局 实现三点筛子的更多相关文章

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

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

  2. flex布局应用

    flex介绍  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解了flex布局之后,发现其功能非常强大. 当指定一个div dis ...

  3. 两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  4. 三栏布局的三个典型方法(圣杯、双飞翼、flex)

    聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...

  5. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  6. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  7. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  8. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  9. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

随机推荐

  1. DPTR是什么寄存器 它的作用是什么 它由哪几个寄存器组成

    数据指针(DPTR)是80C51中一个功能比较特殊的寄存器.从结构DPTR是一个16位的特殊功能寄存器, 其高位字节寄存器用DPH表示,低位字节寄存器用DPL表示,DPTR既可以作为一个16位的寄存器 ...

  2. asp.net mvc 特性路由(MapMvcAttributeRoutes)的应用

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012835032/article/details/51160824asp.net mvc 特性路由 ...

  3. upc组队赛14 Bus stop【签到水】

    Bus Stop 题目描述 In a rural village in Thailand, there is a long, straight, road with houses scattered ...

  4. UVA12589_Learning Vector

    大致题意: 有n个向量要你选k个,把这k个向量连起来,画出来的与x轴围成的面积最大 思路: 这个是斜率dp,让斜率大的排在前面,记忆化搜索的时候要加入一个当前高的信息,因为这个向量形成面积不仅和斜率有 ...

  5. Oracle学习笔记<5>

    组函数(多值函数) 数据库中函数的分类:1)单值函数 Single Rows Functions 特点:n条数据参与函数处理,最终得到n条结果.2)多值函数(组函数) Multiple Rows Fu ...

  6. mac bash上显示git分支与状态

    主要实现 显示当前路径 显示当前所在分支 显示当前修改状态 = 表示一个干净的分支 ~ 表示文件有改动 # 表示已commit 但未 push 通过网上搜索和自己根据实际需要修改的代码如下: .bas ...

  7. Compile Linux Kernel on Ubuntu 12.04 LTS (Detailed)

    This tutorial will outline the process to compile your own kernel for Ubuntu. It will demonstrate bo ...

  8. hbase配置详解(转)

    转自:http://www.cnblogs.com/viviman/archive/2013/03/21/2973539.html 1 准备工作 因为我只有一台机器,所以,一切都成为了伪分布,但是,其 ...

  9. 【LeetCode】Array

    [11] Container With Most Water [Medium] O(n^2)的暴力解法直接TLE. 正确的解法是Two Pointers. O(n)的复杂度.保持两个指针i,j:分别指 ...

  10. Java集合框架是什么?说出一些集合框架的优点?

    每种编程语言中都有集合,最初的Java版本包含几种集合类:Vector.Stack.HashTable和Array. 随着集合的广泛使用,Java1.2提出了囊括所有集合接口.实现和算法的集合框架.在 ...