还在拿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 ...
随机推荐
- 《Effective C++》再次探索traits技法
首先介绍C++标准程序库中的五种迭代器,关于这个可以看我的另一个笔记:http://blog.csdn.net/m0_37316917/article/details/70053513. 对于这五种分 ...
- 03-Sed基础语法及例子
1 Sed语法及举例 在实际使用sed过程中经常使用字符串的替换.删除.查找等操作.Linux中的编辑器Vi.GVIM.emacs等都可以进行上述操作,但是大量进行操作的时候,效率很低. 地址参数 { ...
- Strapi入门记--01创建项目，账户，测试表，测试接口
Strapi 是什么 中文文档地址 Strapi 是一个开源的无头 CMS,开发人员可以自由选择他们喜欢的工具和框架,并允许编辑使用他们的应用程序的管理面板来管理和分发他们的内容.基于一个插件系统,S ...
- 使用json数据动态创建表格2（多次绘制第一次简化 var tr=tbody.insertRow();）
<!DOCTYPE HTML> <html> <head> <title>动态创建表格</title> <meta charset=& ...
- 单实例Primary快速搭建Standby RAC参考手册(19.16 ADG)
环境:Single Instance -> RAC Single Instance: db_name=demo db_unique_name=demo instance_name=demo se ...
- SEO关键词布局方法
关键词在<title>标签. description属性. keywords属性中是如何布局的. 1.<title>标签中布局关键词 <title>标签是用来定义网 ...
- java入门与进阶-P1.3+P1.4
准备一个java编程软件 eclipse官网: Enabling Open Innovation & Collaboration | The Eclipse Foundation 他是一个免费 ...
- 读Java8函数式编程笔记08_测试、调试和重构
1. Lambda表达式的单元测试 1.1. 单元测试是测试一段代码的行为是否符合预期的方式 1.2. Lambda表达式没有名字,无法直接在测试代码中调用 1.2.1. 将Lambda表达式放入一个 ...
- undefined会变为null吗？
echarts 会将 series data中的数据并不是你想的那样简单 我们很多小伙伴都使用过echarts. 然后 series:[{ data:[] }] 中的数据可能并没有我们想的那样简单 为 ...
- 【笔记向】RESTful api
RESTful api 是什么 源自论文:点我,中文版 Representational state transfer: Representational:数据表现形式 state:状态 transf ...