CSS学习（Grid布局和flex布局比较）

最新推荐文章于 2025-05-19 15:32:33 发布
原创 最新推荐文章于 2025-05-19 15:32:33 发布 · 946 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #学习 #前端 #html5 #javascript

grid网格布局真香，比flex方便太多了，grid-template-columns用法

文章目录

flex布局的时候

在这里插入图片描述
最后一行不够4个的时候 最下面一行无法对齐
在这里插入图片描述

网格grid布局的时候

在这里插入图片描述

在这里插入图片描述
添加间隔
在这里插入图片描述

在这里插入图片描述

可以修改某一列的像素

在这里插入图片描述

在这里插入图片描述

可以修改某一列的宽度占比

改成2fr 相当于占两份
在这里插入图片描述

在这里插入图片描述

写固定格式 前面是分几份 后面是每份的大小
在这里插入图片描述

在这里插入图片描述
因为不齐 还是使用自动填充 1fr比较好
在这里插入图片描述
在这里插入图片描述

自适应屏幕分列

使用自适应屏幕方法
auto-file 代表自适应 minmax(最小值，最大值)
在这里插入图片描述
记得修改宽度
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

让第一个元素长宽都占2个

只让第一个变大
在这里插入图片描述

占两行
grid-row : 1/3 1代表开始的列线是第一个 3代表结束的列线
在这里插入图片描述

在这里插入图片描述

占两列

在这里插入图片描述

在这里插入图片描述

【前端知识之CSS】flex弹性布局和grid网格布局
weixin_44337386的博客
05-12 2431
本系列主要整理前端面试中需要掌握的知识点。本节介绍flex弹性布局和grid网格布局。
flex 布局和 grid 布局的区别
小草莓的博客
01-23 2057
综上所述，Flexbox 适用于一维布局的场景，用于构建自适应和灵活的布局；而 Grid 适用于二维布局的场景，用于构建复杂的网格结构和定位布局。在实际开发中，可以根据具体需求选择合适的布局模型。
拥抱未来的CSS布局方式flex与grid布局
08-11
本系列文章为对CSS中flex布局与grid布局的详细介绍
grid布局与flex布局之间的孰是孰非？
qq_45217161的博客
04-26 1673
如果只是简单的列表、导航菜单之类的布局，选择 Flex 布局足够了。如果需要更加复杂的布局，比如网格式布局、多栏排版等，则建议选择 Grid 布局。，适用于比较简单的布局场景，如导航菜单、列表排列等，特别是在移动端布局中表现更加优秀。，适用于比较复杂的布局场景，如网格布局、多栏排版等，它可以划分出不同区块，进行更加精细的布局，具有高度自适应性和可读性，且在处理大量信息和多种布局的时候表现比较优秀。Flex 布局和 Grid 布局都是现代 CSS 布局方式中非常流行的两种，可以根据不同的需求进行使用。
从初学到精通：Flex与Grid布局全攻略
最新发布
TT_BC的博客
05-19 1267
文章系统地介绍了CSS中的Flex布局和Grid布局，从基础概念到进阶应用，涵盖了两种布局的核心属性和使用方法。Flex布局适合一维排列，通过display:flex启用，支持灵活调整子元素的大小和对齐方式；Grid布局则适合二维布局，通过display:grid启用，支持复杂的行列排列。文章还展示了如何结合使用这两种布局，并通过实战案例演示了如何构建完整的网页布局。最后，总结了Flex布局和Grid布局的适用场景和优势，强调了掌握这两种布局对提升前端开发效率的重要性。
CSS 终极之战：Grid VS Flexbox
极光开发者
12-13 2243
价值 | 思考 | 共鸣简评：近些年 CSS Flexbox 在前端开发者中变得非常流行。其实并不奇怪，它能让我们更容易创建出动态布局，以及在容器中对其内容。然而城里新来了个小伙叫 CSS Grid，它有许多弹性盒的能力，有时候比弹性盒好用，有时候却不好用。作者点评了弹性盒、网格两者之间的差异，以及什么时候用哪种比较好。先来看下这节课的截屏预告：一维 VS 二维如果你想从这篇文章中学到精髓，下面的
一文搞懂grid布局 和 flex 布局及其区别
楠姐的博客
11-05 2789
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Grid 可以做Flexbox做不了的事，Flexbox 比 Grid 兼容性更好，他们可以共同工作。Grid item可以成为flexbox容器，flex item可以成为grid 容器。综上所述，可以根据业务场景需要选择相应布局。
flex布局和grid布局
rzl02的博客
01-18 1029
flex布局，也被称之为弹性盒子，是css3里面新增的一种布局方式，通过使用flex布局，我们可以让布局更加便捷、高效。
详解css3中dispaly的Grid布局与Flex布局
01-18
Grid布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以将它看成二维布局。 父元素成为容器，父元素内部的多个子元素成为项目 flex弹性布局（容器属性） flex是Flexible Box的缩写（简称：...
css两种布局模式flex、grid
08-01
CSS布局模式中的Flex布局和Grid布局是现代网页设计中非常重要的两种技术，它们提供了强大的灵活性和控制力，使得页面元素的排列和定位更加便捷。 **Flex布局** Flex布局，全称Flexible Box，是一种用于容器内子...
比Flex更强大的Grid网格布局
weixin_43443341的博客
12-12 797
相信写过前端对齐布局的前端都知道 Flex 布局，它是一种轴线布局，指定“项目”针对轴线的位置，针对行对齐、列对齐（居中对齐、两端对齐）这些布局场景使用 Flex 布局是一种非常常见且高效的方法。Grid 布局则是将容器分成“行”和“列”，产生单元格，然后指定“项目”所占的单元格，远比 Flex 布局更强大。
CSS的Grid布局与Flex布局
日常笔记/总结/系列知识梳理
11-09 1253
Grid布局是一种CSS布局模式，它使用一个二维的网格系统来定位元素。它允许您将容器分为行和列，然后将元素放置在特定的行和列中。Grid布局非常适合创建复杂的网页布局和对齐元素。 Flex布局是Flexible Box的缩写，称为弹性盒布局，是一种用于为盒状模型提供最大灵活性的布局方式。任何容器都可以被指定为Flex布局，而行内元素也可以使用Flex布局。
CSS 居然有比Flex更强大的布局？——Grid网格布局
张先生的前端日志
07-11 1987
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。...
CSS布局——Flex布局和Grid布局
kaisersama__的博客
06-19 1058
在上面的代码中，.container是Flex容器，通过设置将其定义为Flex容器，并使用和属性将Flex项目在主轴和交叉轴上居中排布。.item是Flex项目，通过设置flex: 1;实现项目的灵活伸缩，并设置margin属性实现项目之间的间距。
CSS Grid和Flexbox解决实际的布局问题
W3cplus
01-09 2793
就目前为止，CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持，但对于实现布局而言，这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话，那么对于Web的布局将是一种福音。就前面学习的CSS Grid和CSS Flexbox，我们对CSS的Flexbox和Grid有了很
CSS--灵活的网格布局（display:grid；）
am_xiao_hui的博客
08-16 1910
CSS--灵活的网格布局（display:grid；）flex 弹性布局和 grid 网格布局有什么区别， 为什么要用gridgrid怎么用
一文精通CSS布局：Flex与Grid完全指南
AOIWB的博客
02-25 1372
🚀 【零基础必看】15分钟掌握CSS布局核心！Flex+Grid双剑合璧，轻松搞定所有页面排版难题！ ✨ 本文带你： ✅ 从 浮动布局痛点 讲到 现代布局方案 进化史 ✅ Flex 与 Grid 对比详解 + 20+ 可视化代码示例 ✅ 手把手实现 导航栏/瀑布流/响应式仪表盘 等 6大实战案例 ✅ 揭秘 布局选择策略 + 浏览器兼容 终极方案 ✅ 附 布局小游戏/练习场 等独家学习资源
比flex布局还牛的grid布局
qq_40757399的博客
03-07 709
概述 Grid布局也称“网格布局”，是一个CSS的布局方案。跟flex有相似性，但是比flex强大，flex是一维的，只能针对容器的横竖边方向，布局里面的项目；但是grid是可以任意组合不同的网格，做出各种各样的布局，是二维的。 基本概念 Grid是将容器分为行和列，从而进行布局的，在学习相关的属性设置之前，需要了解一些基本的概念。 1.采用网格布局的块，称为容器，容器内，直接的子元素，，叫做项目，下面容器的属性定位都是对项目进行定位。 <divclass="container"> .
通过和Grid布局对比学习Flex布局
weixin_33813128的博客
04-21 226
flex容器 基本特性(同grid容器) flex容器与grid容器的富余空间管理对比 flex-container与其margin flex-flow：如何在container中放置item? align-items：在容器中统一管理item的富余空间 flex-item:容器中的每一项 flex-basis 默认值:auto flex-basis设置的是item在主轴上的大小 与w...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值