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

弹性布局链接：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. Linux内核模块Makefile学习

    在<Linux设备驱动程序>一书中读到的内核模块编译Makefile,不是非常理解,在查询很多资料后,在这里做个总结. 书中Makefile代码: ifneq ($(KERNELRELEA ...

  2. 针对于网络安全领域中基于PCAP流量的数据集

    网络安全领域中基于PCAP流量的数据集 MAWI Working Group Traffic Archive URL:http://mawi.wide.ad.jp/mawi/ CIC dataset ...

  3. 课下测试补交（ch03 ch08）

    课下测试补交(ch03 ch08) 课下测试 ch03 1.有关gdb调试汇编,下面说法正确的是(ABCE) A . 可以用disas反汇编当前函数 B . 以16进制形式打印%rax中内容的命令是 ...

  4. 查看git提交细节

    git log git show fdf39277f54dd0484a9fefc012463924544e07af

  5. 【AHOI2012】信号塔

    题面 题解 xgzc怒切计算几何 最小圆覆盖板子题 整体算法如下: 枚举第一个点,考虑当前圆是否包含了这个点,如果没有,则把圆变成以这个点为圆心,半径为\(0\)的圆.再枚举第二个点,考虑圆是否包含了 ...

  6. cogs1889 [SDOI2008]Cave 洞穴勘测 link-cut tree

    link-cut tree // It is made by XZZ #include<cstdio> #include<algorithm> #define il inlin ...

  7. Linux系统中时间区域和API

    1.问题 在开发云平台程序的时候,经常会碰到时间区域转换的问题.比如,任何网络存储的文档的metadata都自己记录了编辑时间.但是,云平台记录时需要把这个时间转成标准时间,便于管理.但是用户使用的时 ...

  8. Netty源码分析第8章(高性能工具类FastThreadLocal和Recycler)---->第6节: 异线程回收对象

    Netty源码分析第八章: 高性能工具类FastThreadLocal和Recycler 第六节: 异线程回收对象 异线程回收对象, 就是创建对象和回收对象不在同一条线程的情况下, 对象回收的逻辑 我 ...

  9. HackRF 升级固件到新版本

    本文内容.开发板及配件仅限用于学校或科研院所开展科研实验! 淘宝店铺名称:开源SDR实验室 HackRF链接:https://item.taobao.com/item.htm?spm=a1z10.1- ...

  10. 基于神念TGAM的脑波小车（4）

    我使用的是HC05和BT06俩个蓝牙模块 1.[AT模式]HC05蓝牙模块的PIO11接VCC,上电后即进入HC05AT指令模式,对于BT06蓝牙直接上电进入AT模式,用USBT06转TTL模块连接到 ...