还在拿flex进行布局吗？快来试试grid网格布局吧
例：
遇到这种布局要求我们应该怎么办？
方法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网格布局吧的更多相关文章
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- 【CSS】343- CSS Grid 网格布局入门
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- 轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
- Grid 网格布局
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...
- grid网格布局使用
定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...
- Grid 网格布局详解
Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...
- python之tkinter使用-Grid(网格)布局管理器
# 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...
- CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- CSS3中的display:grid网格布局介绍
1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...
随机推荐
- CTF-MISC方向涉及技术导图
MISC方向涉及技术导图
- 《Effective C++》继承与面向对象设计
Item 32:确定你的public继承塑膜出is-a的关系 如果你令class D以public继承class B,你便是告诉编译器说,每一个类型为D的对象同时也是一种B对象,反之如果你需要一个D对 ...
- 根号分治简单笔记 | P3396 哈希冲突
简要题意 你需要维护一个长度为 \(n\) 的序列 \(v\),支持: A x y 求整个序列中,所有模 \(x\) 为 \(y\) 的下标的元素的值,即: \[\sum_{i=0}^{\lfloor ...
- P5934 [清华集训2012]最小生成树
简要题意 给你一个 \(N\) 个点,\(M\) 条边的 无向连通 带权图.给定一条边 \((u,v,L)\),请问需要在原图中删除多少条边,使得将 \((u,v,L)\) 插入图后,它既可能在最小生 ...
- Java基础学习笔记-Java数据类型转换-(～￣▽￣)～
JAVA数据类型和JS数据类型转换不一样,因为它是强类型语言嘛 类型转换规则 不允许数值类型和布尔类型 转换 整型.实型.字符型数据可以混合运算 类型转换分类 自动类型转换-隐式转换 1．整数转换为小 ...
- wixtoolset visualstudio 2017打包流程（1）
第一步: 使用wix提供的 heat.exe 工具生成后缀为 wsx 的配置文件. heat.exe dir ".\binr" -dr INSTALLFOLDER -cg Pr ...
- Dubbo2.7的Dubbo SPI实现原理细节
总结/朱季谦 本文主要记录我对Dubbo SPI实现原理的理解,至于什么是SPI,我这里就不像其他博文一样详细地从概念再到Java SPI细细分析了,直接开门见山来分享我对Dubbo SPI的见解. ...
- 基于View接口
目录 基于View接口 1.写模型表以及数据库迁移 3.使用CBV写查询所有的视图接口 4.配路由 基于View接口 Django原生即继承View来实现写接口,的确过程很繁杂,很多东西都是手动写 ...
- 洛谷P1365 期望dp
题目描述 一个o/x序列的得分为其中每个o的极大连续子段长度的平方和,比如ooxxxxooooxxx,分数就是 \(2 \times 2 + 4 \times 4 = 4 +16=20.\) 现给定一 ...
- Spring03-IOC-循环依赖的实现(Debug查看spring解决循环依赖的过程)
1 什么是循环依赖 如下,有类A和B,A中有一个类型为B的属性b,B中有一个类型为A的属性a,A和B相互依赖 public class A { private B b; public B getB() ...