选择 Grid 还是 Flex？ #5289

Reaper622 · 2019-03-01T08:56:27Z

译文翻译完成，resolve #5282

选择 Grid 还是 Flex？

xionglong58 · 2019-03-01T08:57:10Z

校对认领

fanyijihua · 2019-03-01T08:57:12Z

@xionglong58 好的呢 🍺

xionglong58

还有些校对稍后发布

xionglong58 · 2019-03-01T09:18:16Z

TODO1/to-grid-or-to-flex.md


-A recent [Twitter thread](https://twitter.com/chriscoyier/status/1088827201468813312) started by Chris Coyier got me thinking about how people in general interpret the use cases for CSS Grid Layout versus flexbox:
+一个最近由 Chris Coyier 发起的的 [推特话题](https://twitter.com/chriscoyier/status/1088827201468813312) 使我开始思考人们通常在什么情况下使用 CSS Grid 布局还是 Flexbox:


使我开始思考人们通常在什么情况下使用 CSS Grid 布局还是 Flexbox:=>使我开始思考人们通常在什么情况下使用 CSS Grid 布局和 Flexbox布局:

xionglong58 · 2019-03-01T09:19:52Z

TODO1/to-grid-or-to-flex.md


-> For y'all that have an understand of both CSS grid and flexbox, what's your favorite way of explaining the difference?
+> 对于你们已经理解了 CSS grid 和 flexbox 的人来说， 你们最喜欢的解释它们差异的方法是什么？


对于你们已经理解了 CSS grid 和 flexbox 的人来说，你们最喜欢的解释它们差异的方法是什么？=》对于已经理解了 CSS grid 和 flexbox 的你们来说，最喜欢的描述两者之间差异的方法是什么？

xionglong58 · 2019-03-01T09:21:28Z

TODO1/to-grid-or-to-flex.md

 > 
 > — Chris Coyier (@chriscoyier) [January 25, 2019](https://twitter.com/chriscoyier/status/1088827201468813312?ref_src=twsrc%5Etfw)

-Naturally some of the most insightful replies came from Rachel Andrew and Jen Simmons:
+自然地一些最有见地的回复来自于  Rachel Andrew 和 Jen Simmons:


自然地一些最有见地的回复来自于 Rachel Andrew 和 Jen Simmons:=》 Rachel Andrew 和 Jen Simmons两位权威人士的观点是:

我觉得此处翻译为权威人士有点过于夸张，可能只是回复的十分有见地或者回复内容有深度，直接翻译为两位权威不是很合适，您觉得呢？ 🤔

xionglong58 · 2019-03-01T09:22:26Z

TODO1/to-grid-or-to-flex.md


-> Flexbox is for one dimensional layout. A row OR a column. Grid is for two dimensional layout. Rows AND columns.
+> Flexbox 是一种一维的布局。一行或者一列。Grid 是一种二维的布局。多行和多列。


Flexbox 是一种一维的布局。一行或者一列。Grid 是一种二维的布局。多行和多列。=》Flexbox 是一种一维布局。一行或者一列。Grid 是一种二维布局。多行和多列。

xionglong58 · 2019-03-01T09:36:01Z

TODO1/to-grid-or-to-flex.md

 > 
 > — Jen Simmons (@jensimmons) [January 26, 2019](https://twitter.com/jensimmons/status/1089181330133450752?ref_src=twsrc%5Etfw)

-However, reading tweets individually doesn’t tell the whole story. In this article I want to unpack when and where you might want to use Grid or flexbox, and some reasons for choosing one or the other.
+然而，只是单单阅读推文并不会告诉我们始末。在这篇文章中我想要仔细解析什么时候并在什么条件下你可能会想要使用 Grid 或者 flexbox，和你学着其一而不选择另一的原因。


然而，只是单单阅读推文并不会告诉我们始末。在这篇文章中我想要仔细解析什么时候并在什么条件下你可能会想要使用 Grid 或者 flexbox，和你学着其一而不选择另一的原因。=》上述观点并没有告诉我们两者的应用场景。这篇文章旨在告诉读者两者的适用场景，以及在哪种情况下只能选择使用其中一个。

henry-fun · 2019-03-01T10:08:07Z

@leviding 校对认领

fanyijihua · 2019-03-01T10:08:12Z

@hanxiansen 妥妥哒 🍻

根据 xionglong58 的校对建议进行修改

henry-fun

提供一些参考建议 @leviding @Reaper622 校对完成

henry-fun · 2019-03-02T15:11:52Z

TODO1/to-grid-or-to-flex.md


-What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.
+当我阅读那个话题下面的回复时，那些人们的数量令我十分吃惊——他们陈述着他们只会在页面级的布局中使用 Grid，而且其他情况下直接使用 flexbox。如果你把这个当成一条准则，那么你在严重的限制自己使用 Grid 的强大的功能。我想告诉你们的最主要的建议是，把每个设计个体化，分析可行的选项并且不要对你需要使用的技术来做出假设。当你选择一种布局方法是，先扪心自问一下下面的这些问题。


[我想告诉你们的最主要的建议是，] => [我想告诉你们的最主要的建议是：]

[当你选择一种布局方法是] => [当你选择一种布局方法时]

[下面的这些问题。] => [下面的这些问题：]

henry-fun · 2019-03-02T15:16:37Z

TODO1/to-grid-or-to-flex.md


-> If it looks like I’d need to reach for calc() a lot for layout then that’s usually a good sign of when I need Grid over flexbox
+> 当我看起来似乎需要对布局使用大量的计算时，那通常是我需要使用 Grid 而不是 flexbox 的一个好兆头。


[当我看起来似乎需要对布局使用大量的计算时] => [当我看起来似乎需要calc()对布局进行大量计算时]

henry-fun · 2019-03-02T15:24:20Z

TODO1/to-grid-or-to-flex.md

 > 
 > — Michelle Barker (@mbarker_84) [January 26, 2019](https://twitter.com/mbarker_84/status/1089182216020742144?ref_src=twsrc%5Etfw)

-Often, if you’re having to use _calc()_ a lot to get precise track sizes (factoring in gutters, for example) then it’s worth considering using Grid, as the _fr_ unit will do the heavy lifting for you and save you any number of headaches. While that’s fine as a general principle, it’s not the whole picture. There are cases when you might need Grid, even though your layout doesn’t require _calc()_. One example might be a fixed-width, two-dimensional layout, where each track is 200px wide - you don’t need _calc()_ to tell you how wide those tracks should be, but you might still want the behaviour of Grid. Likewise, there are cases for using flexbox where you do need _calc()_, so this can only be interpreted as a guideline.
+通常地，如果你不得不大量的使用 _calc()_ 来得到精确地位置与尺寸(例如考虑到间隔的情况)，那么通常是值得去考虑一下使用 Grid 的，因为 _fr_ 单位会帮我们做繁重的适配并减少你头痛的次数。虽然这作为一般准则这很不错，但也并不是适用于所有的场景。这是一些你可能会用到 Grid 的场景，计时你的布局并不需要大量的 _calc()_。一个例子是一个固定宽度的二维布局，每个网格轨道是 200px 宽 - 你不需要 _calc()_ 来告诉你网格轨道应该是多宽，但你可能仍然想要 Grid 的表现行为。同样，有些你需要计算的情况下也使用 flexbox ，因此这只能被解释为一个指南。


[虽然这作为一般准则这很不错] => [虽然作为一般准则这很不错]

[计时你的布局并不需要大量的 calc()] => [即使你的布局并不需要calc()]

henry-fun · 2019-03-02T15:28:16Z

TODO1/to-grid-or-to-flex.md


-A big difference between Grid and flexbox is that Grid allows us to control the placement of items in two dimensions (rows and columns), where flexbox does not. Again, that doesn’t mean you should _never_ use grid for one-dimensional layouts. I’ve often opted to use Grid when I need to prescisely control the size and placement for items in one dimension like in this demo and [accompanying article](https://css-tricks.com/super-power-grid-components-with-css-custom-properties/):
+Grid 和 flexbox 的一个很大的差异是 Grid 允许我们在二维空间(多行多列)控制元素的位置，而 flexbox 则不行。 再强调一次，那并不意味着你_永远_不能再一维布局中使用 Grid。我经常在我需要准确地在一维空间控制元素的尺寸和位置时选择使用 Grid。就像在这个实例和随附的文章中：


[就像在这个实例和随附的文章中] => [就像这个示例和随附的文章所示]

henry-fun · 2019-03-02T15:34:58Z

TODO1/to-grid-or-to-flex.md


-Grid is often the right choice when you need to control the layout in two dimensions. That doesn’t make Grid a better choice for _everything_ though. With Grid you have tracks (rows and columns), cells, and grid areas (a group of more than one cell) and items must be placed in these cells or Grid areas.
+Grid 通常在你需要控制二维空间的布局时是一个正确的选择。但它不意为着对_任何情况_来说都是一个更好的选择。Grid 给你带来的网格轨道(多行和多列)，网格单元以及网格区域（多个网格单元组成的组）并且元素必须被放置在这些网格单元或者 Grid 区域。


[但它不意为着对] =>[但它不意味着对]

henry-fun · 2019-03-02T15:57:28Z

TODO1/to-grid-or-to-flex.md


-We have a grid of nine items of equal width placed from left to right in rows of three, and a 20px gap between each item. We could build this with either Grid or flexbox. The Grid code is much simpler and cleaner:
+我们有一个由九个等宽的元素组成的网格，从左到右排成三排，每个元素之间有 20px 的间隙:


[从左到右排成三排] => [从上到下排成三排]

[We could build this with either Grid or flexbox. The Grid code is much simpler and cleaner] => [我们可以使用grid或flexbox进行布局，不过grid布局相较起来更加简单和明了]

还有遗漏翻译处

henry-fun · 2019-03-02T16:17:18Z

TODO1/to-grid-or-to-flex.md

@@ -84,63 +84,63 @@ By contrast, if we were to create this layout with flexbox, we would need to sty
 }
 ```

-We need negative margins on the grid container to counteract the fact that the total width of the items would be larger than the container itself, and therefore wrap onto the next line. We also don’t get the same responsive behaviour out of the box and would likely need to use media queries.
+我们需要在网格容器上使用负边距来抵消这一事实—— 内部元素的总的宽度可能要比容器更大， 因此它会被换行到下一行。我们也没有了开箱即用的响应式行为并且很可能需要使用媒体查询


[使用负边距] => [使用负margin]

根据 hanxiansen 的建议进行修改

Reaper622 · 2019-03-03T01:04:33Z

@xionglong58 @hanxiansen 已根据校对建议进行修改，请查看 😃

xionglong58 · 2019-03-03T03:34:14Z

TODO1/to-grid-or-to-flex.md


-What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.
+当我阅读那个话题下面的回复时，那些人们的数量令我十分吃惊——他们陈述着他们只会在页面级的布局中使用 Grid，而且其他情况下直接使用 flexbox。如果你把这个当成一条准则，那么你在严重的限制自己使用 Grid 的强大的功能。我想告诉你们的最主要的建议是：把每个设计个体化，分析可行的选项并且不要对你需要使用的技术来做出假设。当你选择一种布局方法时，先扪心自问一下下面的这些问题。



[当我阅读那个话题下面的回复时，那些人们的数量令我十分吃惊——他们陈述着他们只会在页面级的布局中使用 Grid，而且其他情况下直接使用 flexbox。]=>[当浏览话题下面的回复时，我发现相当大数量的人只在页面级的布局中使用Grid，而且其他情况下直接使用 flexbox。]
[我想告诉你们的最主要的建议是：]=>[我尤其建议的是：]
[把每个设计个体化，分析可行的选项并且不要对你需要使用的技术来做出假设。当你选择一种布局方法时，先扪心自问一下下面的这些问题。]=>[把每个设计个体化，分析可选方案的可行性，不要对你使用的技术来做出主观的猜想。当你选择一种布局方法时，先扪心自问一下下面的这些问题。]

第一部分我想重点突出作者的吃惊了，可能有点太依照着原文翻译了，实为不妥，感谢建议，请多见谅。

xionglong58 · 2019-03-03T03:37:58Z

TODO1/to-grid-or-to-flex.md


-> If it looks like I’d need to reach for calc() a lot for layout then that’s usually a good sign of when I need Grid over flexbox
+> 当我看起来似乎需要`calc()`对布局使用大量的计算时，那通常是我需要使用 Grid 而不是 flexbox 的一个好兆头。


[当我看起来似乎需要calc()对布局使用大量的计算时，那通常是我需要使用 Grid 而不是 flexbox 的一个好兆头。]=>[当我需要calc()对布局使用大量的计算时，Grid 是一个更好的选择。]

xionglong58 · 2019-03-03T03:42:49Z

@leviding 怀疑译文质量，存在大量错误

leviding · 2019-03-03T04:41:22Z

@xionglong58 收到，请 @xitu/fe-miners 来看一下质量。

aladdin-add · 2019-03-03T04:56:36Z

感觉原文的质量也有点水啊 …（⊙＿⊙；）…

根据 xionglong58 的建议进行修改

Reaper622 · 2019-03-03T06:08:16Z

@xionglong58 已根据建议修改
第一次翻译，多有欠缺，确实存在失误，多请谅解。
特别感谢校对以及建议。

自己重新阅读了一边并进行了相应调整

xionglong58 · 2019-03-04T02:34:18Z

@Reaper622 加油
校对完成 @fanyijihua

leviding

有一些格式上的问题，看下最新的两个 commit 记录，结合 WIKI 中的译文格式要求部分，明确下问题。

leviding · 2019-03-04T02:36:35Z

@Reaper622 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

Reaper622 · 2019-03-04T06:54:59Z

@xionglong58 稍后我会发布，请等待谢谢🙏🏻

noahziheng · 2019-03-04T06:59:21Z

@xionglong58 掘金上通常应由译者发布，积分的话 @leviding 会公平添加滴

xionglong58 · 2019-03-04T07:17:09Z

已删除@noahziheng

Reaper622 · 2019-03-04T08:59:09Z

@leviding 已经发布
链接:https://juejin.im/post/5c7ce781e51d4514913c5bc4
🎉 也特别感谢 @leviding @noahziheng @aladdin-add 的建议
再次感谢两位校对的工作 @hanxiansen @xionglong58

xionglong58 · 2019-03-06T14:35:12Z

@fanyijihua

选择 Grid 还是 Flex？

34e7f49

选择 Grid 还是 Flex？

fanyijihua added the 校对认领 label Mar 1, 2019

fanyijihua mentioned this pull request Mar 1, 2019

选择 Grid 还是 Flex？ #5282

Closed

fanyijihua added the 正在校对 label Mar 1, 2019

xionglong58 reviewed Mar 1, 2019

View reviewed changes

fanyijihua removed the 校对认领 label Mar 1, 2019

leviding added the 前端 label Mar 1, 2019

根据 xionglong58 的校对建议进行修改

d127c14

根据 xionglong58 的校对建议进行修改

henry-fun reviewed Mar 2, 2019

View reviewed changes

根据 hanxiansen 的建议进行修改

de32d82

根据 hanxiansen 的建议进行修改

xionglong58 reviewed Mar 3, 2019

View reviewed changes

leviding added the enhancement 等待译者修改 label Mar 3, 2019

根据 xionglong58 的建议进行修改

9d15175

根据 xionglong58 的建议进行修改

leviding added 标注待管理员 Review and removed enhancement 等待译者修改 labels Mar 3, 2019

Reaper622 and others added 3 commits March 3, 2019 21:09

自己重新阅读了一边并进行了相应调整

0795e25

自己重新阅读了一边并进行了相应调整

Update to-grid-or-to-flex.md

c94c9c2

Update to-grid-or-to-flex.md

9a5fedd

leviding approved these changes Mar 4, 2019

View reviewed changes

leviding merged commit ef68218 into xitu:master Mar 4, 2019

leviding added 翻译完成 and removed 标注待管理员 Review 正在校对 labels Mar 4, 2019


		A recent [Twitter thread](https://twitter.com/chriscoyier/status/1088827201468813312) started by Chris Coyier got me thinking about how people in general interpret the use cases for CSS Grid Layout versus flexbox:
		一个最近由 Chris Coyier 发起的的 [推特话题](https://twitter.com/chriscoyier/status/1088827201468813312) 使我开始思考人们通常在什么情况下使用 CSS Grid 布局还是 Flexbox:


		> For y'all that have an understand of both CSS grid and flexbox, what's your favorite way of explaining the difference?
		> 对于你们已经理解了 CSS grid 和 flexbox 的人来说，你们最喜欢的解释它们差异的方法是什么？


		> Flexbox is for one dimensional layout. A row OR a column. Grid is for two dimensional layout. Rows AND columns.
		> Flexbox 是一种一维的布局。一行或者一列。Grid 是一种二维的布局。多行和多列。


		What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.
		当我阅读那个话题下面的回复时，那些人们的数量令我十分吃惊——他们陈述着他们只会在页面级的布局中使用 Grid，而且其他情况下直接使用 flexbox。如果你把这个当成一条准则，那么你在严重的限制自己使用 Grid 的强大的功能。我想告诉你们的最主要的建议是，把每个设计个体化，分析可行的选项并且不要对你需要使用的技术来做出假设。当你选择一种布局方法是，先扪心自问一下下面的这些问题。


		> If it looks like I’d need to reach for calc() a lot for layout then that’s usually a good sign of when I need Grid over flexbox
		> 当我看起来似乎需要对布局使用大量的计算时，那通常是我需要使用 Grid 而不是 flexbox 的一个好兆头。


		A big difference between Grid and flexbox is that Grid allows us to control the placement of items in two dimensions (rows and columns), where flexbox does not. Again, that doesn’t mean you should _never_ use grid for one-dimensional layouts. I’ve often opted to use Grid when I need to prescisely control the size and placement for items in one dimension like in this demo and [accompanying article](https://css-tricks.com/super-power-grid-components-with-css-custom-properties/):
		Grid 和 flexbox 的一个很大的差异是 Grid 允许我们在二维空间(多行多列)控制元素的位置，而 flexbox 则不行。再强调一次，那并不意味着你_永远_不能再一维布局中使用 Grid。我经常在我需要准确地在一维空间控制元素的尺寸和位置时选择使用 Grid。就像在这个实例和随附的文章中：


		Grid is often the right choice when you need to control the layout in two dimensions. That doesn’t make Grid a better choice for _everything_ though. With Grid you have tracks (rows and columns), cells, and grid areas (a group of more than one cell) and items must be placed in these cells or Grid areas.
		Grid 通常在你需要控制二维空间的布局时是一个正确的选择。但它不意为着对_任何情况_来说都是一个更好的选择。Grid 给你带来的网格轨道(多行和多列)，网格单元以及网格区域（多个网格单元组成的组）并且元素必须被放置在这些网格单元或者 Grid 区域。


		We have a grid of nine items of equal width placed from left to right in rows of three, and a 20px gap between each item. We could build this with either Grid or flexbox. The Grid code is much simpler and cleaner:
		我们有一个由九个等宽的元素组成的网格，从左到右排成三排，每个元素之间有 20px 的间隙:


		> If it looks like I’d need to reach for calc() a lot for layout then that’s usually a good sign of when I need Grid over flexbox
		> 当我看起来似乎需要`calc()`对布局使用大量的计算时，那通常是我需要使用 Grid 而不是 flexbox 的一个好兆头。

选择 Grid 还是 Flex？ #5289

选择 Grid 还是 Flex？ #5289

Conversation

Reaper622 commented Mar 1, 2019 • edited by leviding Loading

xionglong58 commented Mar 1, 2019

fanyijihua commented Mar 1, 2019

xionglong58 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

henry-fun commented Mar 1, 2019

fanyijihua commented Mar 1, 2019

henry-fun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Reaper622 commented Mar 3, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xionglong58 commented Mar 3, 2019

leviding commented Mar 3, 2019

aladdin-add commented Mar 3, 2019

Reaper622 commented Mar 3, 2019

xionglong58 commented Mar 4, 2019

leviding left a comment

Choose a reason for hiding this comment

leviding commented Mar 4, 2019

Reaper622 commented Mar 4, 2019

noahziheng commented Mar 4, 2019

xionglong58 commented Mar 4, 2019

Reaper622 commented Mar 4, 2019

xionglong58 commented Mar 6, 2019

Reaper622 commented Mar 1, 2019 •

edited by leviding

Loading