还在拿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 ...
随机推荐
- tempdb数据文件暴增分析
背景 某客户tempdb数据文件突然暴增,导致磁盘可用空间紧张,让我们找到暴增的原因. 现象 登录到SQL专家云,通过趋势分析进行回溯,在4月12日,tempdb数据文件在3个小时内从10GB涨到了8 ...
- python进阶之路6之 for循环方法
while循环补充说明 1.死循环 真正的死循环是一旦执行 CPU功耗会极速上升 直到系统采取紧急措施 尽量不要让CPU长时间不间断运算 2.嵌套及全局标志位 强调:一个break只能结束它所在的那一 ...
- 我们来汉化IntelliJ IDEA
(原发于 GitHub Pages,2018-10-13 13:51:09) 两年前我从一名光荣的C++程序员专业为PHP程序员以后,告别了世界第一IDE Visual Studio,改用当时觉得特别 ...
- element上传图片组件使用方法|图片回显|格式转换base64
upload上传组件的使用方法 上传图片后自动上传(也可以手动上传),图片上传成功后由后端返回特定图片地址,在表单提交后将表单数据同图片地址一并返回即可完成图片上传功能. 组件HTML <!-- ...
- 欠你们的 → k8s 集群搭建，除夕奉上！
开心一刻 有一天,qq收到一个好友申请,验证消息上写的是:哥哥加我,我是妹妹 我以为是性骚扰,就没加,直接回了一句:我喜欢少妇 过了一会儿,姑姑就给我打了个电话:你妹妹qq加你,你怎么不同意,她想问你 ...
- 数学工具类Math-练习
数学工具类Math 概述 java.lang.Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数.类似这样的工具 类,其所有方法均为静态方法,并且不会创建对象,调用起来非常 ...
- Django框架之drf：5、反序列化器校验部分源码分析、断言、drf之请求与响应、视图组件介绍及两个视图基类、代码部分实战
Django框架之drf 目录 Django框架之drf 一.反序列化类校验部分源码解析 二.断言 三.drf之请求 1.Request能够解析的前端传入编码格式 2.Request类中的属性和方法 ...
- Nginx 安装perl
1 安装包下载 https://www.cpan.org/src获取最新偶数版本下载链接并替换(偶数版本为稳定版) 2 上传到服务器解压 tar -zxvf perl-5.36.0.tar.gz 3 ...
- 国际财务系统基于ShardingSphere的数据分片和一主多从实践
作者:京东物流 张广治 1 背景 传统的将数据集中存储至单一数据节点的解决方案,在性能和可用性方面已经难于满足海量数据的场景,系统最大的瓶颈在于单个节点读写性能,许多的资源受到单机的限制,例如连接数. ...
- 真正“搞”懂HTTPS协议之目录和一点啰嗦
说实话,我写完这个系列之后,或者说抄完这个系列之后,唯一的脑海里浮现的词叫做"惭愧".如果你读过罗剑锋老师的<透视HTTP协议>的话,就能察觉到本系列越往后面的部分,几 ...