还在拿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 ...
随机推荐
- [cocos2d-x]关于动画
声明一下:看见这篇文章总结的已经非常好了,没必要再去自己到处东翻西找了,链接:http://shahdza.blog.51cto.com/2410787/1546998 [唠叨] 基本动画制作需要用到 ...
- LibreOJ 144. DFS 序 1
题面 给一棵有根树,这棵树由编号为 \(1\dots N\) 的 \(N\) 个结点组成.根结点的编号为 \(R\).每个结点都有一个权值,结点 \(i\) 的权值为 \(v_i\). 接下来有 \( ...
- Runloop的使用
系统为我们提供了多种模式,下面列一些比较常遇到的: kCFRunLoopDefaultMode: App的默认 Mode,通常主线程是在这个 Mode 下运行的. UITrackingRunLoopM ...
- 在GCP上创建GCE的三种方式(Console,gcloud,Terraform)
1 简介 如果要选择GCP为云平台,则经常需要创建GCE(Google Compute Engine),有以下几种方式: (1) 在浏览器创建 (2) 命令 gcloud (3) Terraform ...
- centos搭建neo4j环境(含java)2021_12
限centos neo4j与java下载: 链接:https://pan.baidu.com/s/1ei15dROGy3OwJfbislxH7g 提取码:8B3A 下载后 1.在linux中建立文 ...
- mysql 列约束
mysql可以对插入的数据进行特定得验证,只有满足条件才可以插入到数据表中,否则认为是非法插入: 例如:人性别只可以是男.女.年龄只能是0-100. ①主键约束查重-PRIMARY KEY,1表一个: ...
- Flutter 3.7 正式发布
新的 Flutter 稳定版加入了 Material 3 更新.iOS 平台优化及其他内容 新年伊始,由 Flutter 3.7 正式版来「打头阵」!我们与整个 Flutter 社区成员们继续在 Fl ...
- 关于 Dev-C++ 中缺少 iconv.h 的问题
前言 在 C++ 中有个扩展库 ext,里面有一些黑科技(hash, splay, binomial_heap 等等), 在 Windows 环境中,我们运行 Dev-C++ 并在头文件写 #incl ...
- Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation
1.出现问题 查询数据时报如题错误 2.解决方案 建表时需指定字符集,例如: -- ---------------------------- -- Table structure for testTa ...
- 这一次，Python 真的有望告别 GIL 锁了？
Python 中有一把著名的锁--全局解释器锁(Global Interpreter Lock,简写 GIL),它的作用是防止多个本地线程同时执行 Python 字节码,这会导致 Python 无法实 ...