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

  

具体实现代码:

  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. python global和nonlocal的使用

    ◆global和nonlocal是Python的两个重要变量作用域关键字 1.global用在全局变量,应用场景: 变量定义在函数外部的时候,如果函数里面想改变这个全局变量的值,需要在当前的引用函数里 ...

  2. Docker问题方案收集

    1.问题: Unable to connect to unix:///var/run/docker.sock (Permission denied) from PHP code 解决方法: Make ...

  3. 115、TensorFlow变量的使用

    # To use the value of a tf.Variable in a Tesnorflow graph , simply treat it like a normal tf.Tensor ...

  4. Daily Life——团队冲刺博客——(领航篇)

    目录 领航目标 各个成员在 Alpha 阶段认领的任务 各个成员的具体任务安排 整个项目预期的任务量 团队成员贡献值的计算规则 燃尽图 Daily Life团队冲刺博客 领航目标 各个成员在 Alph ...

  5. [CF1228] 简要题解

    A 题意 求\(l \le x \le r\)的所有数位不同的数\(x\), 任意输出一个. \(1 \leq l \leq r \leq 10 ^5\) Solution 按照题意模拟即可. #in ...

  6. leetcode.排序.75颜色分类-Java

    1. 具体题目 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列.此题中,我们使用整数 0. 1 和 2 分别表示红色. ...

  7. mysql数值字符串类型的按照数值进行排序

    今天遇到一个问题,就是对mysql数值字符串类型进行排序,在默认情况下使用order by 字段名称 desc/asc 进行排序的时候,mysql进行的排序规则是按照ASCII码进行排序的,并不会自动 ...

  8. mac 支持rz sz

    安装 lrzsz brew install lrzsz 配置 iTerm2 安装完成后我们需要在 iTerm2 中使用的话,还需要一些配置 进入到 /usr/local/bin 目录下,下载两个脚本文 ...

  9. C/C++语言for循环语句执行顺序

    for循环如下: ; i<; ++i) { } 执行顺序如下: 1.i=0  初始化初值 2.i<10 进行判断,如果条件为真,则继续执行 3.执行循环体代码 4.i++ 变量i自增 5. ...

  10. 【记录】Mybatis-Generator 数据层代码生成器,自动生成dao类,mapper,pojo类

    Mybatis-Generator 工具来帮我们自动创建pojo类.mapper文件以及dao类并且会帮我们配置好它们的依赖关系. 官方文档地址:http://mybatis.org/generato ...