博主信息
Peter_Zhu教學筆記
博文
27
粉絲
1497
評論
20
訪問量
13431
積分:139
P豆:867.5

新疆十一选五推荐号码预测专家:一圖搞定Grid布局

2019年12月12日 14:44:09閱讀數:606博客 / Peter_Zhu教學筆記 / PHP

一圖搞定: Grid 網格布局

Grid 布局

1. 術語

1.1 容器

  • 網格布局的元素

    1.2 項目

  • 容器內采用網格定位的子元素

    1.3 軌道

  • 行: 容器中的水平區域
  • 列:容器中的垂直區域

    1.4 單元格

  • 容器中行與列的交叉區域

    1.5 網格線

  • 水平網格線: 劃分行軌道
  • 垂直網格線: 劃分列軌道

2. 容器屬性

2.1 設置網格容器

  • 塊級網格: display: grid
  • 內聯網格: display: inline-grid

2.2 劃分網格中行與列

  • 劃分列: grid-template-columns
  • 劃分行: grid-template-rows
  • 函數:repeat()/auto-fill()/minmax()
  • 關鍵字: auto / fr / [line-name]

    2.3 設置網絡行與列間距

  • 行間距: grid-row-gap
  • 列間距: grid-column-gap
  • 簡寫:grid-gap: row column / gap

    2.4 設置網絡區域

  • 命名區域: grid-template-area
  • 設置子元素排列順序,默認先行后列: grid-auto-flow

    2.5 設置內容在單元格中的排列

  • 水平: justify-items
  • 垂直:align-items
  • 簡寫: place-items: align justify

    2.6 設置所有單元格在容器中的排列

  • 水平: justify-content
  • 垂直: align-content
  • 簡寫: place-content: align justify

    2.7 設置容器網格之外的子元素排列

  • 水平: grid-auto-rows
  • 垂直: grid-auto-columns

2.8 綜合簡寫(不推薦):

  • grid-template: grid-template-columns | rows | areas
  • grid:
  • grid-template-columns | rows | areas
  • grid-auto-rows | columns | flow
  • grid-column-gap | grid-row-gap

3. 項目屬性

3.1 基于網格線定位

垂直網格線

  • 左邊框: grid-column-start
  • 右邊框: grid-column-end
  • 簡寫: grid-column: start / end

    水平網格線

  • 上邊框: grid-row-start
  • 下邊框: grid-row-end
  • 簡寫: grid-row: start / end

3.2 基于區域定位

網格線

  • 數字: grid-area: 1 / 2
  • 命名: grid-area: col-1 / col-5
  • 偏移: grid-area: 2 / span 3

    模板

  • 區域名稱: grid-area: header

3.3 設置單元格內容對齊方式

  • 水平: justify-self
  • 垂直: align-self
  • 簡寫: place-self: align justify

新疆十一选五预测号码今天 www.envkt.com gird布局

全部評論

文明上網理性發言,請遵守新聞評論服務協議

條評論
暫無評論暫無評論!