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

弹性布局链接：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. daily Tip

    daily tip :   <UserControl.Resources>         <Storyboard x:Name="sb1" x:Key=&quo ...

  2. 20155238 2016-2017-2 《Java程序设计》第二周学习总结

    教材学习内容总结 java基本类型:整数,字节,浮点数,字符 //"单行批注" */"单行批注" 变量 "驼峰式命命法" int age0f ...

  3. python基础学习1-装饰器及应用

    def outer(func): #定义装饰器 def inner(*args,**kwargs): #定义万能参数 print("log") ret = func(*args,* ...

  4. Atcoder2167 Blackout

    Atcoder2167 Blackout zjoi讲过的一道神题啊... 首先把每个黑点(a,b)看成一条有向边a->b,然后这个图就变成了一张有自环的有向图. 然后弱联通块就分开了,对于每个连 ...

  5. CentOS 7.X 关闭SELinux

    1.查看 [root@dev-server ~]# getenforce Disabled [root@dev-server ~]# /usr/sbin/sestatus -v SELinux sta ...

  6. laravel CURD

    检索一个列值列表DB::table("tablename")->lists('mobile'); //5.3 及以上版本 lists 改为 pluck 返回 [ " ...

  7. 交换机 路由器 OSI7层模型

    第1章 网络基础 1.1 网络的出现 解决计算机通讯的需求 实现计算机信息可以传递 1.2 主机之间实现通讯基本要求(三要素) ①. 需要在两台主机之间建立物理连接,物理连接的方式有网线 光纤线 wi ...

  8. 《javascript语言精粹》mindmap

    最近刚刚读完<javascript语言精粹>,感觉其中的内容确实给用js作开发语言的童鞋们提了个醒——js里面坑很多啊 不过,我也并不完全认同书中所讲的所有内容,有些书中认为是糟粕的特性, ...

  9. docker 指令

    杀死所有正在运行的容器docker kill $(docker ps -a -q) 删除所有已经停止的容器docker rm $(docker ps -a -q) 删除所有未打 dangling 标签 ...

  10. HTTP 请求/响应报文结构

    请求报文和响应报文都是由以下4部分组成: 1.请求行/响应行 2.请求头/响应头 3.空行 4.消息主体(请求体/响应体) 请求报文结构 请求行 格式为:Method Request-URI HTTP ...