Grid布局 & Flex布局

[huoxiangdong]

display grid  // 声明
// 显示网格线
grid-template-rows // 创建行网格线
grid-template-columns  // 创建列网格线
// 隐示网格线
grid-auto-rows
grid-auto-columns

[huoxiangdong]

• 网格容器

[huoxiangdong]

• fr 可以自动根据网格容器的宽度来计算列的宽度

[huoxiangdong]

• 网格线

  

[huoxiangdong]

• 合并单元格

[huoxiangdong]

• Grid Area

  • 网格线包围区域
  • 网格容器内

[huoxiangdong]

// Grid属性列表
display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

[huoxiangdong]

// Grid Items 属性列表
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self

[huoxiangdong]

• grid-template-areas

[huoxiangdong]

• justify-items

  • 沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。

• 值：

  • start: 内容与网格区域的左端对齐
  • end: 内容与网格区域的右端对齐
  • center: 内容位于网格区域的中间位置
  • stretch: 内容宽度占据整个网格区域空间(这是默认值)

[huoxiangdong]

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]]

[huoxiangdong]

!!!!! 区别 控制

• 一维布局
• 二维布局

[huoxiangdong]

Flex布局

display: flex;
flex-wrap: wrap; // 自动换行

[huoxiangdong]

box-sizing: border-box;

[huoxiangdong]

flex: flexflex-grow // 放大比
        flex-shrink  // 缩放比
        flex-basis // 宽高
// 默认值为0 1 auto // 0 不均分 1 均分 auto 原始大小
// auto (1 1 auto) 和 none (0 0 auto)