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

弹性布局链接：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. MacOS(10.11.6)+Qt(5.5.1)+Xcode(8.2) C++开发环境配置

    VMware虚拟机安装MacOS(这里安装的是MacOS X 10.11.6), 百度很多, 不再详述. 安装Xcode(这里安装的是Xcode8.2) 下载(https://developer.ap ...

  2. 20155236范晨歌_exp6信息搜集与漏洞扫描

    20155236范晨歌_exp6信息搜集与漏洞扫描 目录 实践目标 信息搜集 漏洞扫描 总结 实践目标 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口 ...

  3. 9-[CSS]-字体、文本、背景图片

    1.字体相关CSS属性介绍 p{ width: 300px; height: 60px; /* 等价于 font-size: 14px; line-height: 30px; font-family: ...

  4. 2-4 list练习题

    参考答案 >>> names = [] >>> names.append('old_driver') >>> names.append('rain ...

  5. OpenStack入门篇（九）之nova服务（控制节点）的部署与测试

    1.Nova介绍 Nova是openstack最早的两块模块之一,另一个是对象存储swift.在openstack体系中一个叫做计算节点,一个叫做控制节点.这个主要和nova相关,我们把安装为计算节点 ...

  6. lemon批量蒯

    RT,很久以前写的拿出来骗一骗访问量 把sh文件扔进source里面运行sh *.sh 从子目录蒯出来: #!/bin/bash for file in ./*/*/*.cpp do name=${f ...

  7. PHP Rabbitmq 报错Broken pipe

    fwrite(): send of 13 bytes failed with errno=32 Broken pipe fwrite(): send of 21 bytes failed with e ...

  8. 关于IntelliJ IDEA 创建Maven项目速度慢

    在maven的VM Options加上-DarchetypeCatalog=internal参数,如下:

  9. paramiko 简单的使用

    感觉自己操作服务器还要用xshell,麻烦很多,于是呢就去google,找到了paramiko. 使用这个模块还是很简单的, 我们链接服务器,只需要导入 SSHClient,AutoAddPolicy ...

  10. msil 笔记

    public class TestImpl : ITest { // Properties public string Address { get { return "abc"; ...