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

弹性布局链接：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. Python虚拟环境包导出

    一.导出包文件 1.进入虚拟环境 2.进入项目目录下创建放置包文件的文件夹(whls) mkdir whls 3.进入whls文件夹,执行导出命令 (导入包时有网络) cd whls pip free ...

  2. 20155217 《信息安全系统设计基础》week16课堂测试

    20155217 <信息安全系统设计基础>week16课堂测试 在作业本上完成附图作业,要认真看题目要求并提交作业截图. 在set的过程中,我们需要将hour部分进行赋值,赋值我们采用&q ...

  3. 确定有限自动机 valid number

    原题地址:http://oj.leetcode.com/problems/valid-number/ 题意:判断输入的字符串是否是合法的数. 解题思路:这题只能用确定有穷状态自动机(DFA)来写会比较 ...

  4. 北京Uber优步司机奖励政策（4月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. 菜鸟vimer成长记——第2.0章、模式初探

    首先,其他的文本编辑器只有一种模式,就是插入模式.而vim一下子颠覆了我们的世界观——有好多模式.这个是思维上的切换,很难也很重要!!! 其次,Vim 提供一个区分模式的用户界面.也就是说在不同的模式 ...

  6. python基础—字典

    阅读文本需要3分钟,不建议跳读 节目清单 字典是python中最重要的数据类型,字典由“键-值”对组成的集合,字典中的“值”通过“键”来引用.这里将介绍字典的定义.访问.排序等功能. 字典的创建 字典 ...

  7. 关于恶意说说自动在QQ空间转发的机制

    有些很讨厌的带链接说说,只要你在手机打开它,就会自动转发,内容极其不雅 一怒之下我决定看个究竟首先,在此页开头有此关键语句: <iframe src="http://rtb.map.q ...

  8. 关于selenium的智能等待页面加载的问题

    我们经常会碰到用selenium操作页面上某个元素的时候,需要等待页面加载完成后,才能操作, 否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后,才能操作. 首 ...

  9. halcon算子之tuple_gen_const，用于生成特定长度的元组并且初始化其元素

    原文地址:http://blog.sina.com.cn/s/blog_d38f8be50102wczk.html 函数原型: tuple_gen_const(: : Length, Const : ...

  10. CHAPTER 24 History of Our Planet 第24章 我们行星的历史

    CHAPTER 24 History of Our Planet 第24章 我们行星的历史 Uncovering the bones of ancient beasts is only part of ...