时间戳

首页 > 解决方案 > 我应该使用 Flexbox 还是 CSS Grid？

css - 我应该使用 Flexbox 还是 CSS Grid？

问题描述

我知道这不是一个新问题，但我还没有找到激烈的辩论，我想听听你的意见。

所以，我想做一个单向布局的简单组件。我应该使用什么：Flexbox 还是 CSS Grid？为什么？

只是偏好还是有利有弊？

检查这个超级简单的例子：https ://codepen.io/joaosaro/pen/rRJXOa 一个有 3 个孩子的容器：两个 div 只占用内容大小，一个可以扩展自己的最大空间。

.flex-container {
  display: flex;
}
.flex-container .child--max {
  flex: 1;
}

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

标签： cssflexboxcss-grid

解决方案

There isn't a strong debate because there is a clear winner:

Use flexbox for one dimensional layouts.

It makes everything so much faster to implement, use, and make it responsive. For one dimensional layouts, using grids is just an absolute overkill.

推荐阅读