这里就不写这两种布局的内容了

弹性布局链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

网格布局链接：https://www.jianshu.com/p/d183265a8dad

小测试：

用 flex 与 grid 实现如下即可：

<html>

  <head>

    <style>

      /* flex */

     .box {

       display: flex;

       flex-wrap: wrap;

       width: 100%;

     }

     .box div {

        width: calc(100% / 3);

        height: 100px;

        border: 1px solid black;

     }

     /* grid */

     .box {

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        width: 100%;

     }

     .box div {

        height: 100px;

        border: 1px solid black;

     }

    </style>

  <head>

  <body>

    <div class="box">

      <div></div>

      <div></div>

      <div></div>

      <div></div>

    </div>

  <body>

</html>

　　

css布局 弹性布局 和 网格布局的更多相关文章

  1. 关于css布局的记录(二) --网格布局

    网格布局 学习来自阮一峰老师的教程网格布局和网络上的一些资料的学习 1.定义: 顾名思义,网格布局是将页面按行(row)和列(column)划分成一个个网格来进行布局 使用方法:display:gri ...

  2. CSS进阶之模拟Bootstrap网格布局

    目前暂时实现效果,容后面整理心得,先贴上源代码. 源码 <!DOCTYPE html> <html> <head> <title>demo bootst ...

  3. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  4. 使用BootStrap网格布局进行一次演示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Android零基础入门第32节：新推出的GridLayout网格布局

    原文:Android零基础入门第32节:新推出的GridLayout网格布局 本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有 ...

  6. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  7. CSS躬行记（9）——网格布局

    网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语 下图展示了CS ...

  8. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  9. 纯CSS最小响应网格布局

    lemonade.css是一个超级小的CSS可以帮助你创建一个完全响应和灵活自如的网格布局,包括所需网页的头部. 样式链接 <link rel= href=> HTML结构这样创建一个多列 ...

随机推荐

  1. 在centos6.5下用nginx无法连接zabbix与mysql的解决办法

    一般情况下默认的webserver是apache.zabbix也不例外,官方文档全都是推荐用apache. 如果执意用nginx来做webserver的话,php引导需要再安装一个php-fpm.而且 ...

  2. Hibernate第三天——表间关系与级联操作

    第三天,我们来使用Hibernate进行表之间一对多 多对多关系的操作: 这里我们先利用两个例子进行表关系的回顾: 一对多(重点): 例如分类和商品的关系,一个分类多个商品,一个商品属于一个分类 CR ...

  3. uliweb框架数据库操作

    先安装数据库和相关的库文件 sudo aptitude install python-setuptools sudo easy_install SQLAlchemy sudo easy_install ...

  4. 【转】C++ 枚举类型的思考

    转自: http://blog.csdn.net/classfactory/article/details/87749 C++ 中的枚举类型继承于 C 语言.就像其他从 C 语言继承过来的很多特性一样 ...

  5. PostgreSQL的autovacuum 与 vacuum full

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页    回到顶级页面:PostgreSQL索引页 作者 高健@博客园  luckyjackgao ...

  6. 2 CRM 讲师与学生，highcharts应用

    一.讲师与学生简介 1 初始化 course_record,studyrecord, 2 考勤 3 录入成绩 4 显示成绩 ajax 查询 5 上传作业(os模块) 6 下载作业 二. 初始化 ,st ...

  7. 公网API安全--OAuth认证

    之前写过一个基于签名的公网API访问安全控制,另一种方式是基于OAuth认证协议做安全控制. 说明 用户访问A客户端,使用B的服务及资源.B只有征得用户的授权,才允许A客户端使用B上用户的资源和服务. ...

  8. buglly热更新集成遇到的那些坑

    首先说明使用热修复的意义,那就是你的apk包发出去了,万一发生了紧急异常需要修复,怎么办?这时候再发包上市场审核,也是有点慢了吧?而且错误发生在apk中,无法通过后台接口修复,这时候你就需要一个强大的 ...

  9. react-native初体验(1) — hello world

    没有简介,直接开始干活吧. 默认阅读本文的你已经安装好 nodejs, windows用户需要升级yarn到最新版本. 并且设置安装源为国内的淘宝源: npm config set registry ...

  10. 角色和武器Shader特效开发

    角色Shader的动效需求 角Shader的开发不知要实现最基础光照等功能, 可能还要在角色武器的Shader增加多种动效, 比如因武器品质区分的流光特效, 被技能击中时的冻结效果. 这类动效的实现方 ...