例：

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

方法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. react 高效高质量搭建后台系统 系列 —— antd和样式

    其他章节请看: react 高效高质量搭建后台系统 系列 antd 后续要做登录模块(主页),不仅要解决请求数据的问题,还需要完成 antd 配置以及样式的准备. antd 多种主题风格 详情请看 这 ...

  2. Java基础篇——IO流

    流 内存和存储设备之间传输数据的通道 流的分类 按方向划分 输入流(读):存储设备→内存 输出流(写):内存→存储设备 按单位划分. 字节流:以字节为单位,可以读写所有数据 字符流:以字符为单位,只能 ...

  3. [数据结构]Hash Table（哈希表）

    Hash Table基本概念 散列函数:一个把查找表中的关键字映射成该关键字对应的地址的函数,记为Hash(key)=Addr. 散列函数可能会把两个或者两个以上的关键字映射到同一个地址,称这种情况为 ...

  4. 浅谈LCA问题（最近公共祖先）（四种做法）

    [模板]最近公共祖先(LCA) \(update \ 2023.1.3\) 新增了树链剖分 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入格式 第一行包含三个正整数 \ ...

  5. STM32 的学习方法

    前言 学习知识要掌握有效的学习方法,学习技术也是一样,本篇分享关于我学习 STM32 后总结的学习方法. 推荐的学习方法 系统学习 在网上购买一款开发板,使用开发板+开发板配套视频教程+开发板配套源码 ...

  6. Stream流中的常用方法_Foreach-Stream流中的常用方法_filter

    Stream流中的常用方法_Foreach 流模型的操作很丰富,这里介绍一些常用的API.这些方法可以被分成两种︰·延迟方法∶返回值类型仍然是Stream,接口自身类型的方法,因此支持链式调用.(除了 ...

  7. 行为型模式 - 观察者模式Observer

    学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 有一个大佬视频中提过一个案例,我觉得很棒:遥闻深巷中犬吠,边有妇人惊觉欠伸,其夫呓语.继而儿醒,大啼.夫亦醒. 模式的定义与特点 ...

  8. Blazor嵌套传递

    实现创建一个Blazor Server空的应用程序 创建一个Tab.razor 并且添加以下代码 <div> @Title </div> @code { [CascadingP ...

  9. 随便封装下log

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ __title__ = logging工具类 __Time__ = 2 ...

  10. java优化几个小步骤

    1.top查看消耗cpu高的java程序进程2.ps -mp [替换为进程ID PID] -o THREAD,tid,time3.printf "%x" 114134.stack ...