例：

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

方法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. JavaScript 中URL 查询字符串(query string)的序列与反序列化

    方法一: 在 JavaScript 中,可以使用 URLSearchParams 对象来处理 URL 中的查询字符串. 序列化(将 JavaScript 对象转换为查询字符串)可以使用 URLSear ...

  2. 使用Lighthouse更好推动项目性能优化，性能指标详解，优化方法，需要关注指标分析

    Lighthouse是什么---一种工具 Lighthouse 是一个开源的自动化工具,用来测试页面性能. 为什么要用Lighthouse----提升用户体验 Web性能可以直接影响业务指标,例如转化 ...

  3. 垃圾收集器必问系列—CMS

    本文已收录至Github,推荐阅读 Java随想录 微信公众号:Java随想录 CSDN: 码农BookSea 应该相信,自己是生活的战胜者.--雨果 目录 CMS简介 运作过程 CMS的缺陷 处理器 ...

  4. 【分析笔记】Linux 内核自旋锁的理解和使用原则

    自旋锁简单说明: 自旋锁主要解决在竞态并发下,保护执行时间很短的临界区.它只允许一个执行单位进入临界区,在该执行单位离开前,其它的执行单位将会在进入临界区前不停的循环等待(即所谓的自旋),直至该执行单 ...

  5. MRS_MounRiver安装与驱动相关问题汇总

    解决问题如下: MounRiver下载与安装 若MounRiver某些功能不全或插件没安装 MounRiver下载与安装 MRS官网下载:http://www.mounriver.com/downlo ...

  6. 快速上手python的简单web框架flask

    目录 简介 web框架的重要组成部分 快速上手flask flask的第一个应用 flask中的路由 不同的http方法 静态文件 使用模板 总结 简介 python可以做很多事情,虽然它的强项在于进 ...

  7. 理论+实践，教你如何使用Nginx实现限流

    摘要:Nginx作为一款高性能的Web代理和负载均衡服务器,往往会部署在一些互联网应用比较前置的位置.此时,我们就可以在Nginx上进行设置,对访问的IP地址和并发数进行相应的限制. 本文分享自华为云 ...

  8. WPF 使用动画绘制一个点赞大拇指

    效果图 好久没有写wpf了. 最近看到飞书的点赞动画非常有意思,决定试试,虽然不及飞书那样的绚丽,但是练手还是可以的,希望自己的手艺还在! 那么如何写一个这样的动画呢? 首先需要刨析这个动画的构成: ...

  9. 无法加载 DLL“*******.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。

    无法加载 DLL"Lib\WeWorkFinanceSdk.dll": 找不到指定的模块. (异常来自 HRESULT:0x8007007E). 网上查找了一大堆,没找到是什么问题 ...

  10. centos7 在线或离线安装python3

    1.前言 本文会使用到yum和wget,如果两者都不能用,参考安装教程 https://www.cnblogs.com/dennisdong/p/17037248.html 2.查看是否安装wget和 ...