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

弹性布局链接：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. FPGA之CORDIC算法实现_理论篇(上）

    关于cordic的算法原理核心思想就是规定好旋转角度,然后通过不停迭代逐步逼近的思想来实现数学求解,网上关于这部分的资料非常多,主要可以参考: 1)https://blog.csdn.net/qq_3 ...

  2. Tarjan/2-SAT学习笔记

    Tarjan/2-SAT Tags:图论 作业部落 评论地址 Tarjan 用来求割边或者割点,求点双联通分量或者边双联通分量 点双联通分量:两个点之间有两条点不相交的路径 边双联通分量:两个点之间有 ...

  3. Linux下开发python django程序(django数据库多对多关系)

    1.多对多关系数据访问 models.py设置 from django.db import models # Create your models here. sex_choices=( ('f',' ...

  4. 利用开源软件 Hugin 实现照片的景深合成

    利用开源软件 Hugin 实现照片的景深合成 本文主要参考了下面的文章:http://macrocam.blogspot.jp/2013/09/using-hugin-for-focus-stacki ...

  5. underscore.js 分析6 map函数

    作用:通过转换函数(iteratee迭代器)映射列表中的每个值产生价值的新数组.iteratee传递三个参数:value,然后是迭代 index. _.map([1, 2, 3], function( ...

  6. JZOJ 10043 第k小数

    Description 有两个非负整数数列,元素个数分别为N和M.从两个数列中分别任取一个数相乘,这样一共可以得到NM个数,询问这NM个数中第K小数是多少. 时间限制为20ms . Input 输入文 ...

  7. Eclipse无法查看源码 提示source not found

    学习项目代码的时候想要看一下Cookie的源码,已经确定下载到了本地,可是Ctrl+左键点进去,提示source not found(如下图),百度了以后,大家普遍认为需要安装反编译插件jad. 看了 ...

  8. 使用ASP.NET Identity以手机短信实现双重验证

    这篇文章将展示怎么使用SMS短信启动双重验证 创建一个ASP.NET 5项目 一开始,使用Visual studio 2015创建一个新的ASP.NET Web应用程序: 在下一步中选择ASP.NET ...

  9. CSS快速入门-代码目录

    我们写python代码或者其他代码的时候,发现文件会越来越多,这时候你就觉得有必要把代码文件进行整理了. 对代码整理的整理主要思路: 1.按功能(比如:可执行程序文件.数据库文件.视图文件) 2.按类 ...

  10. [VB.NET][C#]二维向量的基本运算

    前言 在数学中,几何向量指具有大小(Magnitude)和方向的几何对象,它在线性代数中经由抽象化有着更一般的概念.向量在编程中也有着及其广泛的应用,其作用在图形编程和游戏物理引擎方面尤为突出. 基于 ...