全是代码,直接拷走吧,看是不怎么好看的

参考:http://www.ruanyifeng.com/blog/search.html?cx=016304377626642577906%3Ab_e9skaywzq&cof=FORID%3A11&ie=UTF-8&q=flex&sa.x=0&sa.y=0
作者:阮一峰

CSS

  1.  <style>
  2.          p{height:15px}
  3.          .box{margin:20px;width:80px;height:80px;box-shadow:5px 5px #;
  4.              border:1px solid black;border-radius:10px;}
  5.          span{margin:5px;width:16px;height:16px;border-radius:%;background:black}
  6.  
  7.          .box1 div{float:left}
  8.          .clear:after{content:'';clear:both;display:block}
  9.          /**/
  10.          .box11{display:flex}
  11.          .box12{display:flex;justify-content:center}
  12.          .box13{display:flex;justify-content:flex-end}
  13.          .box14{display:flex;align-items:center}
  14.          .box15{display:flex;justify-content:center;align-items:center}
  15.          .box16{display:flex;justify-content:flex-end;align-items:center}
  16.          .box17{display:flex;align-items:flex-end;}
  17.          .box18{display:flex;justify-content:center;align-items:flex-end;}
  18.          .box19{display:flex;justify-content:flex-end;align-items:flex-end;}
  19.          /**/
  20.          .box21{display:flex;justify-content:space-between}
  21.          .box22{display:flex;justify-content:space-between;align-items:center}
  22.          .box23{display:flex;justify-content:space-between;align-items:flex-end;}
  23.          .box24{display:flex;justify-content:space-between;flex-direction:column}
  24.          .box25{display:flex;justify-content:space-between;flex-direction:column;align-items:center}
  25.          .box26{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-end}
  26.          .box27{display:flex;justify-content:space-between;}
  27.              .box27>.item:nth-child(){align-self:flex-end}
  28.          .box28{display:flex;}
  29.              .box28>.item:nth-child(){align-self:center}
  30.          /**/
  31.          .box31{display:flex}
  32.          .box32{display:flex;align-items:center}
  33.          .box33{display:flex;align-items:flex-end}
  34.          .box34{display:flex;flex-direction:column}
  35.          .box35{display:flex;flex-direction:column;align-items:center}
  36.          .box36{display:flex;flex-direction:column;align-items:flex-end}
  37.          /*3.1*/
  38.          .box311{display:flex}
  39.              .box311 .item:nth-child(){align-self:center}
  40.          .box312{display:flex}
  41.              .box312 .item:nth-child(){align-self:flex-end}
  42.          .box313{display:flex;align-items:center}
  43.              .box313 .item:nth-child(){align-self:flex-start}
  44.          .box314{display:flex;align-items:center}
  45.              .box314 .item:nth-child(){align-self:flex-end}
  46.          .box315{display:flex;align-items:flex-end}
  47.              .box315 .item:nth-child(){align-self:center}
  48.          .box316{display:flex;align-items:flex-end}
  49.              .box316 .item:nth-child(){align-self:flex-start}
  50.          /*3.1*/
  51.          .box321{display:flex;flex-direction:column}
  52.              .box321 .item:nth-child(){align-self:center}
  53.          .box322{display:flex;flex-direction:column}
  54.              .box322 .item:nth-child(){align-self:flex-end}
  55.          .box323{display:flex;flex-direction:column;align-items:center}
  56.              .box323 .item:nth-child(){align-self:flex-start}
  57.          .box324{display:flex;flex-direction:column;align-items:center}
  58.              .box324 .item:nth-child(){align-self:flex-end}
  59.          .box325{display:flex;flex-direction:column;align-items:flex-end}
  60.              .box325 .item:nth-child(){align-self:flex-start}
  61.          .box326{display:flex;flex-direction:column;align-items:flex-end}
  62.              .box326 .item:nth-child(){align-self:center}
  63.          /*4-5-6-9*/
  64.          .box41{display:flex;flex-wrap:wrap;align-content:space-between}
  65.              .box41 .column{flex-basis:%;display:flex;justify-content:space-between}
  66.          .box42{display:flex;flex-wrap:wrap;align-content:space-between}
  67.          .box43{display:flex;flex-wrap:wrap;align-content:space-between;flex-direction:row-reverse}
  68.          .box44{display:flex;flex-wrap:wrap;}
  69.              .box44 .row{flex-basis:%;display:flex;justify-content:space-between}
  70.              .box44 .row:nth-child(){justify-content:center}
  71.              /*.box44 .row:nth-child(3){display:flex;justify-content:space-between}*/
  72.          .box45{display:flex;flex-wrap:wrap;align-content:space-between}
  73.          .box46{display:flex;flex-direction:column;flex-wrap:wrap;align-content:space-between}
  74.          .box47{display: flex;flex-wrap: wrap}
  75.  </style>

HTML

  1.  <div class="box1">
  2.      <p>单项目</p>
  3.      <div class="box box11"><span class="item"></span></div>
  4.      <div class="box box12"><span class="item"></span></div>
  5.      <div class="box box13"><span class="item"></span></div>
  6.      <div class="box box14"><span class="item"></span></div>
  7.      <div class="box box15"><span class="item"></span></div>
  8.      <div class="box box16"><span class="item"></span></div>
  9.      <div class="box box17"><span class="item"></span></div>
  10.      <div class="box box18"><span class="item"></span></div>
  11.      <div class="box box19"><span class="item"></span></div>
  12.  </div>
  13.  <div class="clear"></div>
  14.  <div class="box1">
  15.      <p>双项目</p>
  16.      <div class="box box21"><span class="item"></span><span class="item"></span></div>
  17.      <div class="box box22"><span class="item"></span><span class="item"></span></div>
  18.      <div class="box box23"><span class="item"></span><span class="item"></span></div>
  19.      <div class="box box24"><span class="item"></span><span class="item"></span></div>
  20.      <div class="box box25"><span class="item"></span><span class="item"></span></div>
  21.      <div class="box box26"><span class="item"></span><span class="item"></span></div>
  22.      <div class="box box27"><span class="item"></span><span class="item"></span></div>
  23.      <div class="box box28"><span class="item"></span><span class="item"></span></div>
  24.  </div>
  25.  <div class="clear"></div>
  26.  <div class="box1">
  27.      <p>3项目</p>
  28.      <div class="box box31"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  29.      <div class="box box32"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  30.      <div class="box box33"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  31.      <div class="box box34"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  32.      <div class="box box35"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  33.      <div class="box box36"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  34.  </div>
  35.  <div class="clear"></div>
  36.  <div class="box1">
  37.      <p>3.1</p>
  38.      <div class="box box311"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  39.      <div class="box box312"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  40.      <div class="box box313"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  41.      <div class="box box314"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  42.      <div class="box box315"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  43.      <div class="box box316"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  44.  </div>
  45.  <div class="clear"></div>
  46.  <div class="box1">
  47.      <p>3.2</p>
  48.      <div class="box box321"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  49.      <div class="box box322"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  50.      <div class="box box323"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  51.      <div class="box box324"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  52.      <div class="box box325"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  53.      <div class="box box326"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  54.  </div>
  55.  <div class="clear"></div>
  56.  <div class="box1">
  57.      <p>---</p>
  58.      <div class="box box41">
  59.          <div class="column"><span class="item"></span><span class="item"></span></div>
  60.          <div class="column"><span class="item"></span><span class="item"></span></div>
  61.      </div>
  62.      <div class="box box42"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div>
  63.      <div class="box box43"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div>
  64.      <div class="box box44">
  65.          <div class="row"><span class="item"></span><span class="item"></span></div>
  66.          <div class="row"><span class="item"></span></div>
  67.          <div class="row"><span class="item"></span><span class="item"></span></div>
  68.      </div>
  69.      <div class="box box45">
  70.          <span class="item"></span><span class="item"></span><span class="item"></span>
  71.          <span class="item"></span><span class="item"></span><span class="item"></span>
  72.      </div>
  73.      <div class="box box46">
  74.          <span class="item"></span><span class="item"></span><span class="item"></span>
  75.          <span class="item"></span><span class="item"></span><span class="item"></span>
  76.      </div>
  77.      <div class="box box47"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></span><span class="item"></span></div>
  78.  </div>

[css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分的更多相关文章

  1. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  2. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  3. [Web 前端 ] 还在用浮动吗？CSS flex布局你了解多少？

    cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...

  4. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  5. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  6. css flex布局

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

  7. flex布局实例demo全解

    上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...

  8. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  9. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

随机推荐

  1. 【nodejs原理&源码赏析（3）】欣赏手术级的原型链加工艺术

    [摘要] 学习经典代码中的prototype加工 示例代码托管在:http://www.github.com/dashnowords/blogs 好的代码都差不多,烂的代码却各有各的烂法. 一. 概述 ...

  2. 写一个umi插件 自动生成代码 解放cv的双手

    引言 最近在写一个中台项目,使用的react的umi框架. 各种增删改查.基本是列表页 新建页 详情页这种页面 为了避免不必要的简单重复(主要是想偷懒) 于是想去实现自己的一个代码生成器 探索 首先, ...

  3. MySQL必知必会(Create, Alter)

    CREATE DATABASE mysql_crash_course_db; USE mysql_crash_course_db; CREATE TABLE customers ( cust_id i ...

  4. 使用ASP.NET Core 3.x 构建 RESTful API - 3.3 状态码、错误/故障、ProblemDetails

    HTTP状态码 HTTP状态码会告诉API的消费者以下事情: 请求是否执行成功了 如果请求失败了,那么谁为它负责 HTTP的状态码有很多,但是Web API不一定需要支持所有的状态码.HTTP状态码一 ...

  5. Java修炼——容器体系框架总结

    容器有俩大接口Collection接口(无序,不唯一)和Map接口 Collection接口有俩个子接口分别是List和Set. List接口特点是有序但是不唯一,她有三个子接口分别是:ArrayLi ...

  6. [TimLinux] Python 再谈元类 metaclass

    本博文通过对以下链接进行理解后,编写. https://stackoverflow.com/questions/100003/what-are-metaclasses-in-python 1. 类 类 ...

  7. CapSupport 的使用

    CapSupport 是在CAP的操作上做了一些封装 目的是让事务同时执行或者同时回滚 startup services.AddCapSupport((optaion) => { optaion ...

  8. 20.DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件

    一 认证组件 1. 局部认证组件 我们知道,我们不管路由怎么写的,对应的视图类怎么写的,都会走到dispatch方法,进行分发, 在咱们看的APIView类中的dispatch方法的源码中,有个sel ...

  9. java虚拟机栈 相关操作

    针对JVM虚拟栈 和栈帧的操作 虚拟机栈: 栈元素是栈帧.方法调用,栈帧入栈,反之出栈. 栈帧:一个方法的运行空间. 1.局部变量表:方法定义的局部变量.方法的参数存在该表. 实例方法中有个隐含参数“ ...

  10. Python中最简单快捷的输出方式

    格式化输出最简单的方式之哑巴填充公式 name=ludundun age=25 print(f'hello {name},your age is {age}') 输出内容: hello ludundu ...