CSS Grid 和 Flexbox 布局的基本区别和用法

介绍

CSS Grid 和 Flexbox 布局是目前最受欢迎的前端布局技术。它们简化了网页和应用程序的布局过程，提高了网页的可读性和交互性。

区别

CSS Grid（栅格布局）

• 两维网格系统，可以控制行和列
• 可以让开发者定义多个元素之间的空间关系
• 自适应

Flexbox（弹性布局）

• 单一轴线布局（水平或垂直）
• 容易控制每个元素的位置以及空间占用
• 自适应

用法

CSS Grid 布局

1. 父元素上使用 display: grid，创建一个干净规则的网格。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
}

1. 让子元素自动填充网格，使用 grid-auto-flow 和 grid-auto-rows 或 grid-auto-columns 属性。

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  grid-auto-flow: dense;
  grid-auto-rows: 50px;
}

1. 使用 grid-gap 属性创建网格之间的空白。

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  grid-gap: 20px;
}

Flexbox 布局

1. 父元素上使用 display: flex，创建一个容器。

.container {
  display: flex;
  flex-wrap: wrap;
}

1. 使用 justify-content 和 align-items 属性来控制子元素的位置。

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

1. 使用 flex 属性来控制子元素的弹性。

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1
}

总结

CSS Grid 和 Flexbox 布局为网页和应用程序开发提供了强大的布局选项，提高了网页的可读性和交互性。开发人员应该根据需要使用不同的技术。如果需要更精细的布局，使用 CSS Grid 更为合适；如果需要更高效的控制子元素的位置和大小，使用 Flexbox 更为合适。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654de6d27d4982a6eb744503