Translate css-flexbox #13

SSShooter · 2018-07-23T03:03:33Z

翻译章节

《响应式网页设计——弹性盒子》

变更文件

css-flexbox.json
css-flexbox.md

翻译进度

100%
99%

标题等待统一翻译

…nch 'translate' of https://github.com/FreeCodeCampChina/challenges into translate

S1ngS1ng

每道题都加了 translations: {}，应该去掉吧？
根据昨天的讨论，<code></code> 外面不加空格。麻烦你更新下，谢谢
我觉得 option 其实可以不必翻译成“选项”，有时和翻译成“值”，或者“可用值”（放到句子里就是 “xxx 属性还有 yyy、zzz 这些值可以使用”）。你觉得呢？
“项目”（flex items），要不要按照 MDN 上的翻译？
记得更新下 md 文件，有冲突。pull --rebase 一下

主要是通顺性的问题，整体翻译的很不错 👍

（Align Elements Using the justify-content Property 这道题的翻译质量很高）

S1ngS1ng · 2018-07-27T21:14:16Z

01-responsive-web-design/css-flexbox.json

      "description": [
-        "This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.",
-        "Placing the CSS property <code>display: flex;</code> on an element allows you to use other flex properties to build a responsive page.",
+        "这节会使用另一个挑战方法为你介绍 CSS 弹性盒子。挑战会先解释理论，然后动手做一个弹性盒子布局的简单的推文组件。" ,


意思基本正确。建议：

在这一节，我们会用一种不同的挑战方式来学习一下如何更灵活地使用 CSS 布局。首先，我们会先用一个挑战解释原理，然后使用“弹性盒子”（flexbox）调整一个推文组件的样式来完成挑战。

注意第一句话其实没有提到 flexbox

S1ngS1ng · 2018-07-27T21:16:54Z

01-responsive-web-design/css-flexbox.json

-        "This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.",
-        "Placing the CSS property <code>display: flex;</code> on an element allows you to use other flex properties to build a responsive page.",
+        "这节会使用另一个挑战方法为你介绍 CSS 弹性盒子。挑战会先解释理论，然后动手做一个弹性盒子布局的简单的推文组件。" ,
+        "给一个元素赋予 CSS 属性 <code>display: flex;</code>，你就可以使用其他 flex 属性构建响应式页面了。",


只要在一个元素的 CSS 中添加<code>display: flex;</code>，那就可以使用其他 flex 属性来构建响应式页面了。

S1ngS1ng · 2018-07-27T21:18:16Z

01-responsive-web-design/css-flexbox.json

+        "给一个元素赋予 CSS 属性 <code>display: flex;</code>，你就可以使用其他 flex 属性构建响应式页面了。",
        "<hr>",
-        "Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to flex."
+        "为 <code>#box-container</code> 添加 <code>display</code> 属性，设置为 flex。"


添加 <code>display</code> 属性，设置为 flex。 =>
添加 <code>display</code> 属性，设置它的值为 flex。

或

添加 <code>display</code> 属性且设置值为 flex。

我比较建议第一种

S1ngS1ng · 2018-07-27T21:21:18Z

01-responsive-web-design/css-flexbox.json

      "title": "Add Flex Superpowers to the Tweet Embed",
      "description": [
-        "To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated <code>display: flex</code>. Here you'll add it to several components in the tweet embed to start adjusting their positioning.",
+        "我们以右边的内嵌推文为基础开始实践。一些元素换一个布局方式或许更好看。上一个挑战演示了 <code>display: flex</code>，现在你需要把它添加到内嵌推文的多个组件来调整它们的位置。",


内嵌推文的多个组件 => 推文内嵌的多个组件中

S1ngS1ng · 2018-07-27T21:22:47Z

01-responsive-web-design/css-flexbox.json

        "<hr>",
-        "Add the CSS property <code>display: flex</code> to all of the following items - note that the selectors are already set up in the CSS:",
-        "<code>header</code>, the header's <code>.profile-name</code>, the header's <code>.follow-btn</code>, the header's <code>h3</code> and <code>h4</code>, the <code>footer</code>, and the footer's <code>.stats</code>."
+        "为下列项目添加 CSS 属性 <code>display: flex</code> —— 注意，选择器已在 CSS 中准备好：",


这里的破折号有待讨论

选择器已在 CSS 中准备好： => 选择器已在 CSS 中给出：

S1ngS1ng · 2018-07-27T22:06:18Z

01-responsive-web-design/css-flexbox.json

-        "There is a shortcut available to set several flex properties at once. The <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties can all be set together by using the <code>flex</code> property.",
-        "For example, <code>flex: 1 0 10px;</code> will set the item to <code>flex-grow: 1;</code>, <code>flex-shrink: 0;</code>, and <code>flex-basis: 10px;</code>.",
-        "The default property settings are <code>flex: 0 1 auto;</code>.",
+        "上面几个 flex 属性有一个缩写法。<code>flex-grow</code>、<code>flex-shrink</code> 和 <code>flex-basis</code> 属性可以在 <code>flex</code> 中一同设置。",


缩写法 => 简写方式？
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

S1ngS1ng · 2018-07-27T22:07:00Z

01-responsive-web-design/css-flexbox.json

        "<hr>",
-        "Add the CSS property <code>flex</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> the values so its <code>flex-grow</code> is 2, its <code>flex-shrink</code> is 2, and its <code>flex-basis</code> is 150px. Give <code>#box-2</code> the values so its <code>flex-grow</code> is 1, its <code>flex-shrink</code> is 1, and its <code>flex-basis</code> is 150px.",
-        "These values will cause <code>#box-1</code> to grow to fill the extra space at twice the rate of <code>#box-2</code> when the container is greater than 300px and shrink at twice the rate of <code>#box-2</code> when the container is less than 300px. 300px is the combined size of the <code>flex-basis</code> values of the two boxes."
+        "在 <code>#box-1</code> and <code>#box-2</code> 添加 <code>flex</code> 属性。把 <code>#box-1</code> 设置成 <code>flex-grow</code> 为 2，<code>flex-shrink</code> 为 2, <code>flex-basis</code> 为 150px。把 <code>#box-2</code> 设置成 <code>flex-grow</code> 为 1，<code>flex-shrink</code> 为 1，<code>flex-basis</code> 为 150px。",


有一个逗号是半角的

S1ngS1ng · 2018-07-27T22:07:27Z

01-responsive-web-design/css-flexbox.json

-        "Add the CSS property <code>flex</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> the values so its <code>flex-grow</code> is 2, its <code>flex-shrink</code> is 2, and its <code>flex-basis</code> is 150px. Give <code>#box-2</code> the values so its <code>flex-grow</code> is 1, its <code>flex-shrink</code> is 1, and its <code>flex-basis</code> is 150px.",
-        "These values will cause <code>#box-1</code> to grow to fill the extra space at twice the rate of <code>#box-2</code> when the container is greater than 300px and shrink at twice the rate of <code>#box-2</code> when the container is less than 300px. 300px is the combined size of the <code>flex-basis</code> values of the two boxes."
+        "在 <code>#box-1</code> and <code>#box-2</code> 添加 <code>flex</code> 属性。把 <code>#box-1</code> 设置成 <code>flex-grow</code> 为 2，<code>flex-shrink</code> 为 2, <code>flex-basis</code> 为 150px。把 <code>#box-2</code> 设置成 <code>flex-grow</code> 为 1，<code>flex-shrink</code> 为 1，<code>flex-basis</code> 为 150px。",
+        "上面设置的属性,在容器大于 300px 时，会让 <code>#box-1</code> 填充倍率为 <code>#box-2</code> 的两倍；在容器小于 300px 时，缩小倍率为 <code>#box-2</code> 的两倍。300px 是两个盒子的 <code>flex-basis</code> 的值之和。"


同样，第一个逗号是半角的

S1ngS1ng · 2018-07-27T22:07:53Z

01-responsive-web-design/css-flexbox.json

      "title": "Use the order Property to Rearrange Items",
      "description": [
-        "The <code>order</code> property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.",
+        "<code>order</code> 属性告诉 CSS flex 容器里项目的顺序。 默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，负数可用。",


句号之后多了个空格

负数可用 => 可以使用负数

S1ngS1ng · 2018-07-27T22:08:56Z

01-responsive-web-design/css-flexbox.json

-        "The final property for flex items is <code>align-self</code>. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties <code>float</code>, <code>clear</code>, and <code>vertical-align</code> do not work on flex items.",
-        "<code>align-self</code> accepts the same values as <code>align-items</code> and will override any value set by the <code>align-items</code> property.",
+        "flex 项目的最后一个属性是 <code>align-self</code>。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为 <code>float</code>、<code>clear</code> 和 <code>vertical-align</code> 等调整使用的属性都不能应用在 flex 项目，所以这个属性显得十分有用。",
+        "<code>align-self</code> 的可能值与 <code>align-items</code> 一样，并且它会覆盖 <code>align-items</code> 的值。",


可能值 => 允许值，如何？

SSShooter · 2018-07-28T03:22:42Z

@S1ngS1ng 感谢细心校对，已作修改

S1ngS1ng · 2018-07-29T16:54:26Z

@SSShooter 处理一下 conflicts 就好。现在你的 PR 里包含了不属于你的改动。如果不好处理，你可以新开一个 branch，然后 apply 你在这个 branch 的改动就好。

# 获取 upstream 的 HEAD
git fetch upstream
# 根据最新的 upstream/translate branch 新建 translate-css-flexbox branch
git checkout -b translate-css-flexbox upstream/translate

# apply 这个 PR 对应的本地 branch 的文件
git checkout translate-/01-responsive-web-design/css-flexbox.json -- 01-responsive-web-design/css-flexbox.json
git checkout translate-/01-responsive-web-design/css-flexbox.json -- 01-responsive-web-design/css-flexbox.md

# 提交
git add .
git commit -m "xxxx"
git push origin translate-css-flexbox

SSShooter · 2018-07-30T01:26:20Z

@S1ngS1ng 这样是不是要重新提 pr 呢？

S1ngS1ng · 2018-07-30T06:12:32Z

@SSShooter 不需要的。你可以 pull --rebase 然后本地处理，然后 push 就行。
但 managing-packages-with-npm.json 这个 json 和 md，你是不该改的吧？这种情况下，新建个 branch 重新提交方便些。你的 commit history 里有 merge commit。所以 pull --rebase 会不太好处理

SSShooter · 2018-07-30T13:28:22Z

@S1ngS1ng 😂 对不起有点问题...新分支是建了，文件也提交了，但是我发现 PR 只可以修改目标分支不能修改来源分支呀...

S1ngS1ng · 2018-07-30T18:01:12Z

@SSShooter 没关系的，用新的 branch 再开个 PR 就好啦。回头这个 PR 关掉就行

…-flexbox.json

huluoyang · 2018-07-30T19:23:28Z

@SSShooter 🎉 恭喜你这个 PR 已经 merge 进仓库了，你完成了你的光荣使命。

* translation 2/10 * translation 4/10 * translate assert & revise * translation 2/10 * revise * fix typo * 01-responsive-web-design/css-flexbox.json 翻译完成 * translation 2/10 * fix typo * revise * css-flexbox.md 翻译完成标题等待统一翻译 * translate the document * fix typo * translate the title * 根据建议修改翻译

ifyour and others added 10 commits July 19, 2018 00:55

translation 2/10

4ddbbb2

translation 4/10

f700e69

translate assert & revise

8a87184

translation 2/10

1e36c04

revise

7e99791

merge remote into local

3d7a29b

fix typo

25654be

01-responsive-web-design/css-flexbox.json 翻译完成

dd8ee95

translation 2/10

0a96b07

fix typo

ac7e875

S1ngS1ng added the ready for review Use when a translation (?) PR is ready for review label Jul 24, 2018

ifyour added 2 commits July 24, 2018 20:09

revise

1d22a1e

merge upstream into local

3f2049b

huluoyang changed the title ~~01-responsive-web-design/css-flexbox.json 翻译完成~~ Translate css-flexbox Jul 24, 2018

SSShooter and others added 7 commits July 25, 2018 09:41

css-flexbox.md 翻译完成

00ab9f9

标题等待统一翻译

translate the document

a6f2390

fix typo

5f43ac4

merge upstream into local

b7cc876

Merge branch 'translate' of https://github.com/ifyour/challenges; bra…

10eeafe

…nch 'translate' of https://github.com/FreeCodeCampChina/challenges into translate

translate the title

b98c12d

merge upstream & fix conflict

3bb7771

S1ngS1ng suggested changes Jul 27, 2018

View reviewed changes

S1ngS1ng added need update Use when a translation (?) PR has been reviewed and needs to address comments and removed ready for review Use when a translation (?) PR is ready for review labels Jul 27, 2018

SSShooter added 2 commits July 28, 2018 11:10

合并

f08b2c9

根据建议修改翻译

66cc748

S1ngS1ng approved these changes Jul 29, 2018

View reviewed changes

S1ngS1ng added the ship it Use when a translation (?) PR is ready for shipping label Jul 29, 2018

Merge branch 'translate' into translate-/01-responsive-web-design/css…

841abd4

…-flexbox.json

huluoyang merged commit d577ea5 into FreeCodeCampChina:translate Jul 30, 2018

SSShooter deleted the translate-/01-responsive-web-design/css-flexbox.json branch July 31, 2018 01:17

Translate css-flexbox #13

Translate css-flexbox #13

Uh oh!

Conversation

SSShooter commented Jul 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

翻译章节

变更文件

翻译进度

Uh oh!

S1ngS1ng left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SSShooter commented Jul 28, 2018

Uh oh!

S1ngS1ng commented Jul 29, 2018

Uh oh!

SSShooter commented Jul 30, 2018

Uh oh!

S1ngS1ng commented Jul 30, 2018

Uh oh!

SSShooter commented Jul 30, 2018

Uh oh!

S1ngS1ng commented Jul 30, 2018

Uh oh!

huluoyang commented Jul 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SSShooter commented Jul 23, 2018 •

edited

Loading

S1ngS1ng left a comment •

edited

Loading

huluoyang commented Jul 30, 2018 •

edited

Loading