网格自动流 | grid-auto-flow (Grid Layout) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    网格自动流 | grid-auto-flow (Grid Layout) - CSS 中文开发手册

    grid-auto-flow控制自动布局算法如何工作,指定自动放置项目将究竟是如何流入网格。

    /* Keyword values */
    grid-auto-flow: row;
    grid-auto-flow: column;
    grid-auto-flow: dense;
    grid-auto-flow: row dense;
    grid-auto-flow: column dense;
    
    /* Global values */
    grid-auto-flow: inherit;
    grid-auto-flow: initial;
    grid-auto-flow: unset;

    初始值

    row

    应用于

    grid containers

    是否继承

    no

    适用媒体

    visual

    计算值

    as specified

    动画类型

    discrete

    规范顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    取值为下面两种形式之一:

    单个关键字:row,column或dense。两个关键词:row dense或column dense.

    价值

    row是一个关键字,指定自动放置算法通过依次填充每一行来放置项,并在必要时添加新行。如果两者都没有row也不column提供,row都是假设的。

    column是一个关键字,指定自动放置算法通过依次填充每个列来放置项,在必要时添加新列。

    dense是一个关键字,指定自动布局算法使用“密集”填充算法,如果稍后出现较小的项目,该算法将尝试在网格中更早地填充漏洞。这可能会导致项目出现无序,这样做会填补较大的项目留下的漏洞。

    如果省略,则使用“稀疏”算法,其中放置算法只在放置项目时在网格中“向前”移动,从不回溯以填补漏洞。这确保了所有自动放置的项目看起来“有序”,即使这留下了漏洞,可能已经填补了以后的项目。

    形式语法

    [ row | column ] || dense

    HTML内容

    <div id="grid">
    ? <div id="item1"></div>
    ? <div id="item2"></div>
    ? <div id="item3"></div>
    ? <div id="item4"></div>
    ? <div id="item5"></div>
    </div>
    <select id="direction" onchange="changeGridAutoFlow()">
    ? <option value="column">column</option>
    ? <option value="row">row</option>
    </select>
    <input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
    <label for="dense">dense</label>

    CSS内容

    #grid {
      height: 200px;
      width: 200px;
      display: grid;
      grid-gap: 10px;
      grid-template: repeat(4, 1fr) / repeat(2, 1fr);
      grid-auto-flow: column;  /* or ‘row‘, ‘row dense‘, ‘column dense‘ */
    }
    
    #item1 {
      background-color: lime;
      grid-row-start: 3;
    }
    
    #item2 {
      background-color: yellow;
    }
    
    #item3 {
      background-color: blue;
    }
    
    #item4 {
      grid-column-start: 2;
      background-color: red;
    }
    
    #item5 {
      background-color: aqua;
    }

    规范

    Specification

    Status

    Comment

    CSS Grid LayoutThe definition of ‘grid-auto-flow‘ in that specification.

    Candidate Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Edge

    Opera

    Safari

    Basic support

    57.01

    52.0 (52.0)2

    No support

    No support

    443

    No support4

    Feature

    Android Webview

    Chrome for Android

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    57.01

    57.01

    52.0 (52.0)2

    No support

    44

    No support

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32213.html

    网格自动流 | grid-auto-flow (Grid Layout) - CSS 中文开发手册 - Break易站

    上一篇:hibernate外键缺失异常


    下一篇:css基础:选择器、尺寸、背景