CSS3 网格布局(grid-layout)基础知识 - 弹性尺寸的定义单位：fr 简介及实例

网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。

弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。

比如下面的CSS规则：

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

表示有4列，第一列100px固定尺寸，第三列 max-content 代表刚好包含元素不溢出不换行的尺寸，剩下的2列都是弹性尺寸。

按照弹性尺寸的计算规则，两者将均分（这两列的弹性系数相等，均为1）剩下的可用空间。

CSS3示范代码：

#grid {display: grid;width: 100%;grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
}
#title {background-color: lime;
}
#score {background-color: yellow;
}
#stats {background-color: lime;
}
#message {background-color: orange;
}
div {height: 80px;line-height: 80px;text-align: center;
}

HTML代码：

<div id="grid"><div id="title">Site Logo</div><div id="score">Slogan</div><div id="stats">User Zone</div><div id="message">Message</div>
</div>

你可以自己试试看：http://wow.techbrood.com/fiddle/33150

by iefreer

CSS3 网格布局(grid-layout)基础知识 - 弹性尺寸的定义单位：fr 简介及实例相关推荐

CSS3 网格布局(grid layout)基础知识 - 隐式网格自动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道,构成显式网格. 当网格项目定位在这些界限之外,网格容器通过增加隐式网格线生成隐式网格轨道. 这些隐 ...
【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格相关术语 1.2 网格布局的属性分类 2. grid 属性: 同时 ...
网格布局(Grid Layout)
.wrapper {/*类名*/ display: grid;/*规定为网格属性*/ grid-template-columns: repeat(3, 1fr);/*定义的行名称和跟踪的大小功能网 ...
polished css,CSS3网格布局（grid）模板在线构建工具
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const {render} = ReactDOM; const {Component, PropTypes ...
社区网格员计算机考试题库,网格员考试——计算机基础知识题库
网格员考试--计算机基础知识题库计算机应用基础知识题库 1.第一代电子数字计算机适应的程序设计语言为机器语言. 2.计算机系统由两大部分构成,它们就是硬件系统与软件系统. 3.计算机中存储容量的基本 ...
一篇文章搞懂CSS3网格布局（Grid）
一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
Css网格布局-Grid布局
Grid 概念 Grid布局是一种二维布局方法,能够在行和列中布置内容.因此在任何网格中都有两个轴,横轴(即行轴,内联)和纵轴(即列轴,块). 什么是网格网格是一组相交的水平线和垂直线,它定义了网格 ...
CSS布局—网格布局Grid（一）
CSS网格可以定义由行和列组成的二维布局,然后将元素放置到网格中.有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列.网格的大小既可以精确定义,也可以根据自身内容自动计算.你既可以将元素 ...
网格布局--grid
目录一.定义网格及fr单位 1.1 定义网格及fr单位 1.2 容器 1.3 子项 c. justify-self/align-self/place-self 二.常见布局 2.1 叠加布局三.多 ...

CSS3 网格布局(grid-layout)基础知识 - 弹性尺寸的定义单位：fr 简介及实例

CSS3 网格布局(grid-layout)基础知识 - 弹性尺寸的定义单位：fr 简介及实例相关推荐

最新文章

热门文章