例：

遇到这种布局要求我们应该怎么办？

方法1：使用flex布局

    <style>

      * {

        padding: 0;

        margin: 0;

      }

      .gird_Box {

        width: 100vw;

        height: 500px;

        display: flex;

      }

      .item1 {

        background-color: pink;

        flex: 1;

      }

      .line {

        background-color: palegreen;

        width: 20px;

      }

      .item3 {

        background-color: skyblue;

        flex: 1;

      }

    </style>

  </head>

  <body>

    <div class="gird_Box">

      <div class="item1">item1</div>

      <div

还在拿flex进行布局吗？快来试试grid网格布局吧的更多相关文章

  1. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  2. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  3. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  4. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  5. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  6. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  7. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  8. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  9. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  10. CSS3中的display:grid网格布局介绍

    1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

随机推荐

  1. 《Effective C++》实现 章节

    Item26:尽可能延后变量定义式的出现时间 Item27:尽量少做转型动作 关于这一点,专门开了一个新的总结: http://blog.csdn.net/m0_37316917/article/de ...

  2. [cocos2d-x]捕鱼达人炮台射击角度的旋转实现

    话不多说,先上图,下面是实现代码(在后面会具体讲解实现过程): //第一步:将炮台的坐标转换为世界坐标下的坐标点 CCPoint location = this->getParent()-> ...

  3. 旋转卡壳（求凸包直径）学习笔记 | 题解 P1452 [USACO03FALL]Beauty Contest G /【模板】旋转卡壳

    前言 旋转卡壳(Rotating Calipers)可以在凸包上维护许多有用的信息,最常见的就是凸包直径(平面最远点对). 注意:本文不介绍所谓的 "人类智慧" 乱搞做法. 算法流 ...

  4. 用Java写一个分布式缓存——缓存淘汰算法

    前言 之前也用过一些缓存中间件,框架,也想着自己是不是也能用Java写一个出来,于是就有了这个想法,打算在写的过程中同步进行总结. 源码:weloe/Java-Distributed-Cache (g ...

  5. 数据预处理时为什么要使用OneHot编码？

    什么是LabelEncoder(整数编码) 整数编码 将一列文本数据转化成数值,即列中的每一个特征都通过一个整数来表示.例如,[red, blue, red, yellow] = [0,2,0,1]. ...

  6. JUC并发编程

    什么是JUC java.util.concurrent* public class Test1 { public static void main(String[] args) { //获取处理器核数 ...

  7. thinkphp无法访问man.php/index/login

    配置半天.user.ini,权限问题解决了,但是还是访问不了后台登陆界面(链接:域名/man.php/index/login),后来发现是伪静态thinkphp没设置好,设置好后重启nginx就好啦

  8. 转载：SQL分页查询总结

    [转载]SQL分页查询总结 开发过程中经常遇到分页的需求,今天在此总结一下吧.    简单说来方法有两种,一种在源上控制,一种在端上控制.源上控制把分页逻辑放在SQL层:端上控制一次性获取所有数据,把 ...

  9. MySQL-SQL语句查询关键字

    1.SQL语句查询关键字 1.select:指定需要查找的字段信息,eg:select *,select name.同时select也支持对字段做处理,eg:select char_length(na ...

  10. Gateway服务网关 (入门到使用)

    Gateway服务网关 Gateway也要作为微服务注册到nacos中 Zuul也是网关但比较老是一种阻塞式编程:Spring Cloud Gateway 是 Spring Cloud 的一个全新项目 ...