Heim > Web-Frontend > HTML-Tutorial > CSS3网格布局基础知识

CSS3网格布局基础知识

WBOY
Freigeben: 2016-06-24 11:29:03
Original
1753 Leute haben es durchsucht

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

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

比如下面的CSS规则:

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

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

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

完整示范代码:

#grid {    display: grid;    width: 100%;    grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);}#areaA {    background-color: lime;}#areaB {    background-color: yellow;}#areaC {    background-color: lime;}#areaD {    background-color: orange;}#areaA {    background-color: green;}div {    height: 80px;    line-height: 80px;    text-align: center;}
Nach dem Login kopieren

<div id="grid">    <div id="title">Site Logo</div>    <div id="score">Slogan</div>    <div id="stats">User Zone</div>
</div>
Nach dem Login kopieren

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


by iefreer


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage