宾县建设局网站,自助旅游网站开发分析报告,友链交易网,台州网页设计公司前言 之前HTML 页面的布局基本上都是通过 Flexbox 来实现的#xff0c;能轻松的解决复杂的 Web 布局。 现在又出现了一个构建 HTML 最佳布局体系的新竞争者。就是强大的CSS Grid 布局。 grid和flex区别是什么#xff1f;适用什么场景#xff1f;
Flexbox 是一维布局系统能轻松的解决复杂的 Web 布局。 现在又出现了一个构建 HTML 最佳布局体系的新竞争者。就是强大的CSS Grid 布局。 grid和flex区别是什么适用什么场景
Flexbox 是一维布局系统适合做局部布局比如导航栏组件。Grid 是二维布局系统通常用于整个页面的规划。二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局但是没有 Grid 强大和灵活。二者结合使用更加轻松。特点 固定和灵活的轨道尺寸可以使用行号名称或通过定位网格区域将项目放置在网格上的精确位置可以将多个项目放入网格单元格或区域中它们可以彼此部分重叠。缺点 兼容性比较差。 简单画一张图
flex布局 grid布局 网格列
网格元素的垂直线方向称为列。 网格行
网格元素的水平线方向称为行。 网格间距
网格间距指的是两个网格单元之间的网格横向间距或网格纵向间距。 我们可以使用以下属性给元素调整间隙的大小 grid-column-gapgrid-row-gapgrid-gap我们之前使用的弹性布局 一次只能处理一个维度上的元素布局一行或者一列。
而现在的grid布局网格布局可以更自由的去设置一个容器所站的位置
例如 如果使用flex布局去实现排版方法就需要嵌套很多个div去一块一块的区分这些
而现在使用grid布局的话可以省下很多div的布局直接将元素所站的位置区分开
基础示例 使用grid布局实现图中排版
!DOCTYPE html
html langen-usheadmeta charsetutf-8meta nameviewport contentwidthdevice-widthtitlegrid/titlestylebody {width: 90%;max-width: 900px;margin: 2em auto;font: .9em/1.2 Arial, Helvetica, sans-serif;}.container div {border-radius: 5px;padding: 10px;background-color: rgb(232, 66, 152);}.container{display:grid;gap:20px;grid-template-columns:1fr 2fr 1fr ;}/style/headbodydiv classcontainerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/div/div/body/html 我们只需要在父元素中添加display:grid;属性其元素下的子元素就会跟着变 fr他是grid布局中的专属属性用来平均分配容器所占位置 示例 如图所示这种布局方式使用弹性布局来实现相对来说是比较麻烦的但我们使用grid布局就简单很多了
代码如下
!DOCTYPE html
html langen-usheadmeta charsetutf-8 /meta nameviewport contentwidthdevice-width /titleGrid/titlestylebody {width: 90%;max-width: 900px;margin: 2em auto;font: 0.9em/1.2 Arial, Helvetica, sans-serif;}.container {display: grid;grid-template-columns: 1fr 3fr;/* fr单位是frid布局专用的长度单位可以平均的区分配每个容器所站的位置 *//* 每列改怎么去分配位置例如菜单和内容区side这里定义的是菜单那么他就占用1fr的位置content内容他占3fr的位置所以在图中我们可以看到内容区要比菜单区域更宽一些 */gap: 20px;grid-template-areas:header header/* header就是头部 */side content/* side菜单content内容 */footer footer/* footer底部 */;}/* 给每个容器设置一个名称 */header{grid-area:header;}footer{grid-area:footer;}aside{grid-area:side;}article{grid-area:content;}header,footer {border-radius: 5px;padding: 10px;background-color: rgb(173, 202, 232);border: 1px solid #000;}aside,article {border: 1px solid #999;}/style/headbodydiv classcontainerheader这是头部导航/headerarticleh1这里内容区域/h1p内容1/pp内容2/p/articleasideh2这里是左侧菜单区域/h2p菜单/p/asidefooter这里是底部/footer/div/body
/html grid布局属性 参考某教程grid布局 总结
Grid 布局与 Flex 布局有一定的相似性都可以指定容器内部多个项目的位置。但是它们也存在重大区别。
Grid 可以做Flexbox做不了的事Flexbox 比 Grid 兼容性更好他们可以共同工作。Grid item可以成为flexbox容器flex item可以成为grid 容器。
可以根据业务场景需要选择相应布局。
侵删
