From e873b388da138501858fa0d7d6e2eca631b5a4a7 Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Tue, 11 Feb 2020 21:32:25 +0800 Subject: [PATCH] fix(i18n): update Chinese translation of css flexbox (#37923) --- ...-superpowers-to-the-tweet-embed.chinese.md | 59 +++++++++++-------- ...-using-the-align-items-property.chinese.md | 29 ++++++--- ...ng-the-justify-content-property.chinese.md | 30 +++++++--- ...ate-a-column-in-the-tweet-embed.chinese.md | 24 +++++--- ...-create-rows-in-the-tweet-embed.chinese.md | 30 ++++++---- ...play-flex-to-position-two-boxes.chinese.md | 29 +++++---- ...ems-property-in-the-tweet-embed.chinese.md | 27 +++++---- .../use-the-align-self-property.chinese.md | 31 ++++++---- ...set-the-initial-size-of-an-item.chinese.md | 45 ++++++++------ ...ction-property-to-make-a-column.chinese.md | 24 +++++--- ...irection-property-to-make-a-row.chinese.md | 26 +++++--- ...x-grow-property-to-expand-items.chinese.md | 35 ++++++----- ...use-the-flex-shorthand-property.chinese.md | 37 +++++++----- ...shrink-property-to-shrink-items.chinese.md | 32 ++++++---- ...roperty-to-wrap-a-row-or-column.chinese.md | 27 ++++++--- ...ent-property-in-the-tweet-embed.chinese.md | 24 +++++--- ...der-property-to-rearrange-items.chinese.md | 30 ++++++---- 17 files changed, 332 insertions(+), 207 deletions(-) diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.chinese.md index bca1177991..4777bc0d49 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.chinese.md @@ -2,35 +2,41 @@ id: 587d78ab367417b2b2512af1 title: Add Flex Superpowers to the Tweet Embed challengeType: 0 -videoUrl: '' -localeTitle: 添加Flex Superpowers到Tweet Embed +videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM' +forumTopicId: 301100 +localeTitle: 在推文中添加弹性盒子布局 --- ## Description -
右侧是推文嵌入，将用作实际示例。使用不同的布局，一些元素看起来会更好。最后的挑战展示了display: flex 。在这里，您将把它添加到嵌入的推文中的几个组件，以开始调整它们的位置。
+
+ 我们以右边的嵌入推文为例。一些元素换一个布局方式或许更好看。上一个挑战演示了display: flex，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。 +
## Instructions -
将CSS属性display: flex添加到以下所有项目中 - 请注意，选择器已经设置在CSS： header ，标题的.profile-name ，标题的.follow-btn ，标题的h3和h4 ， footer和页脚的.stats 。
+
+为下列项目添加 CSS 属性display: flex。注意，CSS 选择器已写好： +header、header 的.profile-name、header 的.follow-btn、header 的h3和h4、footer以及 footer 的.stats。 +
## Tests
```yml tests: - - text: 您的header应该具有设置为flex的display属性。 - testString: 'assert($("header").css("display") == "flex", "Your header should have a display property set to flex.");' - - text: 您的footer应该具有设置为flex的display属性。 - testString: 'assert($("footer").css("display") == "flex", "Your footer should have a display property set to flex.");' - - text: 你的h3应该有一个display属性设置为flex。 - testString: 'assert($("h3").css("display") == "flex", "Your h3 should have a display property set to flex.");' - - text: 你的h4应该有一个display属性设置为flex。 - testString: 'assert($("h4").css("display") == "flex", "Your h4 should have a display property set to flex.");' - - text: 您的.profile-name应该将display属性设置为flex。 - testString: 'assert($(".profile-name").css("display") == "flex", "Your .profile-name should have a display property set to flex.");' - - text: 你的.follow-btn应该有一个display属性设置为flex。 - testString: 'assert($(".follow-btn").css("display") == "flex", "Your .follow-btn should have a display property set to flex.");' - - text: 您的.stats应该将display属性设置为flex。 - testString: 'assert($(".stats").css("display") == "flex", "Your .stats should have a display property set to flex.");' + - text: 'header的display属性应为 flex。' + testString: assert($('header').css('display') == 'flex', 'header的display属性应为 flex。'); + - text: 'footer的display属性应为 flex。' + testString: assert($('footer').css('display') == 'flex', 'footer的display属性应为 flex。'); + - text: 'h3的display属性应为 flex。' + testString: assert($('h3').css('display') == 'flex', 'h3的display属性应为 flex。'); + - text: 'h4的display属性应为 flex。' + testString: assert($('h4').css('display') == 'flex', 'h4的display属性应为 flex。'); + - text: '.profile-name的display属性应为 flex。' + testString: assert($('.profile-name').css('display') == 'flex', '.profile-name的display属性应为 flex。'); + - text: '.follow-btn的display属性应为 flex。' + testString: assert($('.follow-btn').css('display') == 'flex', '.follow-btn的display属性应为 flex。'); + - text: '.stats的display属性应为 flex。' + testString: assert($('.stats').css('display') == 'flex', '.stats的display属性应为 flex。'); ``` @@ -47,7 +53,7 @@ tests: font-family: Arial, sans-serif; } header { - + } header .profile-thumbnail { width: 50px; @@ -55,11 +61,11 @@ tests: border-radius: 4px; } header .profile-name { - + margin-left: 10px; } header .follow-btn { - + margin: 0 0 0 auto; } header .follow-btn button { @@ -68,7 +74,7 @@ tests: padding: 5px; } header h3, header h4 { - + margin: 0; } #inner p { @@ -81,10 +87,10 @@ tests: opacity: 0.1; } footer { - + } footer .stats { - + font-size: 15px; } footer .stats strong { @@ -131,7 +137,6 @@ tests: - ``` @@ -143,7 +148,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.chinese.md index d7d64c3127..931b6b9b44 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.chinese.md @@ -2,23 +2,33 @@ id: 587d78ad367417b2b2512af8 title: Align Elements Using the align-items Property challengeType: 0 -videoUrl: '' -localeTitle: 使用align-items属性对齐元素 +videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk' +forumTopicId: 301101 +localeTitle: 使用 align-items 属性对齐元素 --- ## Description -
align-items属性类似于justify-content 。回想一下， justify-content属性沿主轴对齐flex项目。对于行，主轴是水平线，对于列，它是垂直线。 Flex容器还具有与主轴相反的横轴。对于行，横轴是垂直的，对于列，横轴是水平的。 CSS提供align-items属性以沿着交叉轴对齐flex项。对于一行，它告诉CSS如何在容器内向上或向下推动整行中的项目。对于列，如何在容器内向左或向右推送所有项目。 align-items可用的不同值包括：
  • flex-start ：将项目对齐到Flex容器的开头。对于行，这会将项目对齐到容器的顶部。对于列，这会将项目对齐到容器的左侧。
  • flex-end ：将项目对齐到Flex容器的末尾。对于行，这会将项目对齐到容器的底部。对于列，这会将项目对齐到容器的右侧。
  • center ：将项目对齐到中心。对于行，这会垂直对齐项目（项目上方和下方的空格相等）。对于列，它会水平对齐它们（项目左侧和右侧的空格相等）。
  • stretch ：拉伸项目以填充弹性容器。例如，行项目被拉伸以从上到下填充Flex容器。
  • baseline ：将项目与其基线对齐。基线是一个文本概念，将其视为字母所在的行。
+
+align-items属性与justify-content类似。回忆一下，justify-content属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。 +Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。 +使用 CSS 中的align-items属性定义 flex 子元素沿交叉轴的对齐方式，对行来说，将行中的项目在容器中往上或往下移动；对列来说，将列中的项目在容器中往左或往右移动。 +align-items的可选值包括： +
  • flex-start：从 flex 容器的起始位置开始对齐项目。对行来说，把项目移至容器顶部；对列来说，是把项目移至容器左边。
  • flex-end：从 flex 容器的终止位置开始对齐项目。对行来说，把项目移至容器底部；对列来说，把项目移至容器右边。
  • center：把项目居中放置。对行来说，垂直居中（项目距离顶部和底部的距离相等）；对列来说，水平居中（项目距离左边和右边的距离相等）。
  • stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。如未设置align-items的值，那么默认值是stretch。
  • baseline：沿基线对齐。基线是文本相关的概念，可以认为它是字母排列的下端基准线。
+
## Instructions -
一个示例有助于显示此属性的运行情况。将CSS属性align-items添加到#box-container元素，并为其指定center值。 奖金
在代码编辑器中尝试使用align-items属性的其他选项来查看它们之间的差异。但请注意，中心值是唯一能够通过此挑战的值。
+
+这个例子可以帮助你理解这个属性，在#box-container添加 CSS 属性align-items并将值设为 center。 +提示：
在编辑器里试试align-items的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center。 +
## Tests
```yml tests: - - text: '#box-container元素的align-items属性应设置为center的值。' - testString: 'assert($("#box-container").css("align-items") == "center", "The #box-container element should have an align-items property set to a value of center.");' + - text: '#box-container元素应有align-items属性，其值应为 center。' + testString: assert($('#box-container').css('align-items') == 'center', '#box-container元素应有align-items属性，其值应为 center。'); ``` @@ -35,7 +45,7 @@ tests: background: gray; display: flex; height: 500px; - + } #box-1 { background-color: dodgerblue; @@ -54,7 +64,6 @@ tests:

Hello

Goodbye

- ``` @@ -66,7 +75,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.chinese.md index 050f810b30..65b43f81c3 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.chinese.md @@ -2,23 +2,34 @@ id: 587d78ac367417b2b2512af6 title: Align Elements Using the justify-content Property challengeType: 0 -videoUrl: '' -localeTitle: 使用justify-content属性对齐元素 +videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm' +forumTopicId: 301102 +localeTitle: 使用 justify-content 属性对齐元素 --- ## Description -
有时，flex容器中的flex项不会填充容器中的所有空间。通常希望告诉CSS如何以特定方式对齐和展开弹性项目。幸运的是， justify-content属性有几个选项可以做到这一点。但首先，在审查这些选项之前，需要了解一些重要的术语。 这是一个有用的图像，显​​示了一行来说明下面的概念。回想一下，将flex容器设置为一行可以从左到右并排放置Flex项目。设置为列的弹性容器将弹性项目从上到下放置在垂直堆栈中。对于每个，柔性项目的排列方向称为主轴 。对于一行，这是一条切割每个项目的水平线。对于列，主轴是穿过项目的垂直线。如何沿着作为主轴的直线对弹性项目进行间隔有几种选择。其中最常用的是justify-content: center; ，将所有弹性项目对齐到Flex容器内的中心。其他选择包括：
  • flex-start ：将项目对齐到Flex容器的开头。对于一行，这会将项目推送到容器的左侧。对于列，这会将项目推送到容器的顶部。
  • flex-end ：将项目对齐到Flex容器的末尾。对于一行，这会将项目推送到容器的右侧。对于列，这会将项目推送到容器的底部。
  • space-between ：将项目与主轴的中心对齐，在项目之间放置额外的空间。第一个和最后一个项目被推送到Flex容器的最边缘。例如，在第一项中，第一项是在容器的左侧，最后一项是在容器的右侧，然后它们之间的其他项是均匀间隔的。
  • space-around ：类似于space-between但是第一个和最后一个项目没有锁定到容器的边缘，空间分布在所有项目周围
+
+flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。幸运的是，我们可以通过justify-content属性的不同的值来实现。在介绍justify-content的可选值之前，我们要先理解一些重要术语。 +这张图片的元素横着排列，很好地描述了下面的概念。 +回忆一下，把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。 +关于 flex 子元素在主轴的排列方式，可以选择以下值：其中一个很常用的是justify-content: center;，使 flex 子元素在 flex 容器中居中排列。其他可选值还有： + +
  • flex-start：从 flex 容器的起始位置开始排列项目。对行来说是把项目移至左边，对于列是把项目移至顶部。如未设置justify-content的值，那么默认值是flex-start。
  • flex-end：从 flex 容器的终止位置开始排列项目。对行来说是把项目移至右边，对于列是把项目移至底部。
  • space-between：项目间保留一定间距地沿主轴居中排列。第一个和最后一个项目被放置在容器边沿。例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
  • space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
+
## Instructions -
一个示例有助于显示此属性的运行情况。将CSS属性justify-content添加到#box-container元素，并为其赋值为center。 奖金
在代码编辑器中尝试使用justify-content属性的其他选项来查看它们之间的差异。但请注意，中心值是唯一能够通过此挑战的值。
+
+这个例子可以帮助你理解这个属性，在#box-container元素添加 CSS 属性justify-content，其值为 center。 +提示：
在编辑器里试试justify-content的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center. +
## Tests
```yml tests: - - text: '#box-container元素应该将justify-content属性设置为center的值。' - testString: 'assert($("#box-container").css("justify-content") == "center", "The #box-container element should have a justify-content property set to a value of center.");' + - text: '#box-container应有justify-content属性，其值应为 center。' + testString: assert($('#box-container').css('justify-content') == 'center', '#box-container应有justify-content属性，其值应为 center。'); ``` @@ -35,7 +46,7 @@ tests: background: gray; display: flex; height: 500px; - + } #box-1 { background-color: dodgerblue; @@ -54,7 +65,6 @@ tests:
- ``` @@ -66,7 +76,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.chinese.md index 6b7ad090ba..02ef4bc686 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.chinese.md @@ -2,23 +2,28 @@ id: 587d78ac367417b2b2512af5 title: Apply the flex-direction Property to Create a Column in the Tweet Embed challengeType: 0 -videoUrl: '' -localeTitle: 应用flex-direction属性在Tweet Embed中创建一个列 +videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9' +forumTopicId: 301103 +localeTitle: 使用 flex-direction 在嵌入推文中创建一列 --- ## Description -
tweet嵌入header和footer先前使用了flex-direction属性和行值。同样， .profile-name元素中的项目可以很好地堆叠为列。
+
+在上一个挑战中，把嵌入推文的header和footer的flex-direction属性值设为 row（行）。相似地，把.profile-name选择器对应的元素竖着排列会好看一点。 +
## Instructions -
将CSS属性flex-direction添加到标头的.profile-name元素，并将值设置为column。
+
+在 header 的.profile-name元素添加 CSS 属性flex-direction，将其值设为 column。 +
## Tests
```yml tests: - - text: .profile-name元素应将flex-direction属性设置为column。 - testString: 'assert($(".profile-name").css("flex-direction") == "column", "The .profile-name element should have a flex-direction property set to column.");' + - text: '.profile-name应有flex-direction属性，其值应为 column。' + testString: assert($('.profile-name').css('flex-direction') == 'column', '.profile-name应有flex-direction属性，其值应为 column。'); ``` @@ -45,7 +50,7 @@ tests: } header .profile-name { display: flex; - + margin-left: 10px; } header .follow-btn { @@ -118,7 +123,6 @@ tests: - ``` @@ -130,7 +134,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.chinese.md index 9ef00f892b..6be6b956fd 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.chinese.md @@ -2,25 +2,30 @@ id: 587d78ab367417b2b2512af3 title: Apply the flex-direction Property to Create Rows in the Tweet Embed challengeType: 0 -videoUrl: '' -localeTitle: 应用flex-direction属性在Tweet Embed中创建行 +videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq' +forumTopicId: 301104 +localeTitle: 使用 flex-direction 在嵌入推文中创建多行 --- ## Description -
tweet嵌入示例中的header和footer具有可以使用flex-direction属性排列为行的子项。这告诉CSS水平对齐孩子。
+
+嵌入推文示例中的header和footer有自己的子元素，使用flex-direction属性可以把这些子元素排成行。这个属性告诉 CSS 需要将这些子元素水平排列。 +
## Instructions -
将CSS属性flex-direction添加到header和footer ，并将值设置为row。
+
+为header和footer添加 CSS 属性flex-direction并把值设为 row。 +
## Tests
```yml tests: - - text: header应该将flex-direction属性设置为row。 - testString: 'assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g), "The header should have a flex-direction property set to row.");' - - text: footer应将flex-direction属性设置为row。 - testString: 'assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g), "The footer should have a flex-direction property set to row.");' + - text: 'header应有flex-direction属性，其值应为 row。' + testString: 'assert(code.match(/header\s*?{\s*?.*?\s*?.*?\s*?flex-direction:\s*?row;/g), ''header应有flex-direction属性，其值应为 row。'');' + - text: 'footer应有flex-direction属性，其值应为 row。' + testString: 'assert(code.match(/footer\s*?{\s*?.*?\s*?.*?\s*?flex-direction:\s*?row;/g), ''footer应有flex-direction属性，其值应为 row。'');' ``` @@ -38,7 +43,7 @@ tests: } header { display: flex; - + } header .profile-thumbnail { width: 50px; @@ -73,7 +78,7 @@ tests: } footer { display: flex; - + } footer .stats { display: flex; @@ -123,7 +128,6 @@ tests: - ``` @@ -135,7 +139,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.chinese.md index 2144ab8a76..cbd3838c67 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.chinese.md @@ -2,23 +2,29 @@ id: 587d78ab367417b2b2512af0 title: 'Use display: flex to Position Two Boxes' challengeType: 0 -videoUrl: '' -localeTitle: 使用display：flex定位两个Box +videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7' +forumTopicId: 301105 +localeTitle: '使用 display: flex 定位两个盒子' --- ## Description -
本节使用交替挑战样式来展示如何使用CSS以灵活的方式定位元素。首先，挑战将解释理论，然后使用简单推文组件的实际挑战将应用flexbox概念。放置CSS属性display: flex;在元素上允许您使用其他flex属性来构建响应式页面。
+
+这节会使用一种不同的挑战方式来学习一下如何使用 CSS 更灵活地布局元素。首先通过一个挑战来理解原理，然后通过操作一个简单的推文组件来应用“弹性盒子”（flexbox）。 +只要在一个元素的 CSS 中添加display: flex;，就可以使用其它 flex 属性来构建响应式页面了。 +
## Instructions -
将CSS属性display添加到#box-container并将其值设置为flex。
+
+为#box-container添加display属性，设置其值为 flex。 +
## Tests
```yml tests: - - text: '#box-container应将display属性设置为flex值。' - testString: 'assert($("#box-container").css("display") == "flex", "#box-container should have the display property set to a value of flex.");' + - text: '#box-container应有display属性，其值应为 flex。' + testString: assert($('#box-container').css('display') == 'flex', '#box-container应有display属性，其值应为 flex。'); ``` @@ -33,28 +39,25 @@ tests:
- ``` @@ -66,7 +69,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.chinese.md index 81fa6ab097..44e16d3129 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.chinese.md @@ -2,23 +2,28 @@ id: 587d78ad367417b2b2512af9 title: Use the align-items Property in the Tweet Embed challengeType: 0 -videoUrl: '' -localeTitle: 使用Tweet Embed中的align-items属性 +videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq' +forumTopicId: 301106 +localeTitle: 在推文中使用 align-items 属性 --- ## Description -
最后一个挑战引入了align-items属性并举了一个例子。此属性可应用于一些tweet嵌入元素，以对齐其中的flex项。
+
+上一个挑战介绍了align-items属性并给出了例子。可以对嵌入推文的一些元素使用这个属性，以调整其中 flex 子元素的位置。 +
## Instructions -
将CSS属性align-items添加到标题的.follow-btn元素中。将值设置为居中。
+
+在 header 的.follow-btn添加 CSS 属性align-items，把值设为 center。 +
## Tests
```yml tests: - - text: .follow-btn元素应将align-items属性设置为center的值。 - testString: 'assert($(".follow-btn").css("align-items") == "center", "The .follow-btn element should have the align-items property set to a value of center.");' + - text: '.follow-btn应有align-items属性，其值应为 center.' + testString: assert($('.follow-btn').css('align-items') == 'center', '.follow-btn应有align-items属性，其值应为 center.'); ``` @@ -51,7 +56,7 @@ tests: } header .follow-btn { display: flex; - + margin: 0 0 0 auto; } header .follow-btn button { @@ -60,8 +65,7 @@ tests: padding: 5px; } header h3, header h4 { - display: flex; - + display: flex; margin: 0; } #inner p { @@ -121,7 +125,6 @@ tests: - ``` @@ -133,7 +136,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.chinese.md index a9fa3a15a4..fa10559492 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.chinese.md @@ -2,25 +2,31 @@ id: 587d78af367417b2b2512b00 title: Use the align-self Property challengeType: 0 -videoUrl: '' -localeTitle: 使用align-self属性 +videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv' +forumTopicId: 301107 +localeTitle: 使用 align-self 属性 --- ## Description -
flex项的最终属性是align-self 。此属性允许您单独调整每个项目的对齐方式，而不是一次性设置它们。这很有用，因为使用CSS属性float ， clear和vertical-align其他常用调整技术对flex项不起作用。 align-self接受与align-items相同的值，并将覆盖align-items属性设置的任何值。
+
+flex 子项目的最后一个属性是align-self。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为float、clear和vertical-align等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。 +align-self可设置的值与align-items的一样，并且它会覆盖align-items的值。 +
## Instructions -
将CSS属性align-self添加到#box-1和#box-2 。给#box-1一个中心值，给#box-2一个flex-end值。
+
+在#box-1和#box-2添加 CSS 属性align-self。#box-1设为 center，#box-2设为 flex-end。 +
## Tests
```yml tests: - - text: '#box-1元素应将align-self属性设置为center的值。' - testString: 'assert($("#box-1").css("align-self") == "center", "The #box-1 element should have the align-self property set to a value of center.");' - - text: '#box-2元素应该将align-self属性设置为flex-end的值。' - testString: 'assert($("#box-2").css("align-self") == "flex-end", "The #box-2 element should have the align-self property set to a value of flex-end.");' + - text: '#box-1元素应有align-self属性，其值应为 center。' + testString: assert($('#box-1').css('align-self') == 'center', '#box-1元素应有align-self属性，其值应为 center。'); + - text: '#box-2元素应有align-self属性，其值应为 flex-end。' + testString: assert($('#box-2').css('align-self') == 'flex-end', '#box-2元素应有align-self属性，其值应为 flex-end。'); ``` @@ -39,14 +45,14 @@ tests: } #box-1 { background-color: dodgerblue; - + height: 200px; width: 200px; } #box-2 { background-color: orangered; - + height: 200px; width: 200px; } @@ -56,7 +62,6 @@ tests:
- ``` @@ -68,7 +73,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.chinese.md index 0a9614a0f9..d6ef7dbbe1 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.chinese.md @@ -2,29 +2,35 @@ id: 587d78ae367417b2b2512afd title: Use the flex-basis Property to Set the Initial Size of an Item challengeType: 0 -videoUrl: '' -localeTitle: 使用flex-basis属性设置项的初始大小 +videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa' +forumTopicId: 301108 +localeTitle: 使用 flex-basis 属性设置项目的初始大小 --- ## Description -
flex-basis属性指定CSS在使用flex-shrink或flex-grow进行调整之前的项的初始大小。 flex-basis属性使用的单位与其他大小属性（ px ， em ， %等）相同。该值根据内容auto项目大小。
+
+flex-basis属性定义了在使用 CSS 的flex-shrink或flex-grow属性对项目进行调整前，项目的初始大小。 +flex-basis属性的单位与其他表示尺寸的属性的单位一致（px、em、%等）。如果值为auto，则项目的尺寸随内容调整。 +
## Instructions -
使用flex-basis设置框的初始大小。将CSS属性flex-basis添加到#box-1和#box-2 。给#box-1一个值为10em ， #box-2给一个值为20em 。
+
+使用flex-basis为盒子设置初始值。给#box-1和#box-2添加 CSS 属性flex-basis。设置#box-1的尺寸初始值为10em，#box-2的尺寸初始值为20em。 +
## Tests
```yml tests: - - text: '#box-1元素应该具有flex-basis属性。' - testString: 'assert($("#box-1").css("flex-basis") != "auto", "The #box-1 element should have a flex-basis property.");' - - text: '#box-1元素的flex-basis值应为10em 。' - testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The #box-1 element should have a flex-basis value of 10em.");' - - text: '#box-2元素应该具有flex-basis属性。' - testString: 'assert($("#box-2").css("flex-basis") != "auto", "The #box-2 element should have the flex-basis property.");' - - text: '#box-2元素的flex-basis值应为20em 。' - testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The #box-2 element should have a flex-basis value of 20em.");' + - text: '#box-1元素应有flex-basis属性。' + testString: assert($('#box-1').css('flex-basis') != 'auto', '#box-1元素应有flex-basis属性。'); + - text: '#box-1的flex-basis应为10em。' + testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), ''#box-1的flex-basis应为10em。'');' + - text: '#box-2元素应有flex-basis属性。' + testString: assert($('#box-2').css('flex-basis') != 'auto', '#box-2元素应有flex-basis属性。'); + - text: '#box-2的flex-basis应为20em。' + testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), ''#box-2的flex-basis应为20em。'');' ``` @@ -41,25 +47,24 @@ tests: display: flex; height: 500px; } - + #box-1 { background-color: dodgerblue; height: 200px; - + } - + #box-2 { background-color: orangered; height: 200px; - + } - +
- ``` @@ -71,7 +76,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.chinese.md index 9001aebda9..b8e212c9d1 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.chinese.md @@ -2,23 +2,28 @@ id: 587d78ac367417b2b2512af4 title: Use the flex-direction Property to Make a Column challengeType: 0 -videoUrl: '' -localeTitle: 使用flex-direction属性创建列 +videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4' +forumTopicId: 301109 +localeTitle: 使用 flex-direction 属性创建一列 --- ## Description -
最后两个挑战使用了flex-direction属性设置为row。此属性还可以通过垂直堆叠Flex容器的子项来创建列。
+
+之前两个挑战使用flex-direction属性创建行（row）。这个属性还能创建一个列，让子元素垂直排列在 flex 容器中。 +
## Instructions -
将CSS属性flex-direction添加到#box-container元素，并为其赋值column。
+
+给#box-container元素添加 CSS 属性flex-direction，赋值为 column。 +
## Tests
```yml tests: - - text: '#box-container元素应该将flex-direction属性设置为column。' - testString: 'assert($("#box-container").css("flex-direction") == "column", "The #box-container element should have a flex-direction property set to column.");' + - text: '#box-container应有flex-direction属性，其值应为 column。' + testString: assert($('#box-container').css('flex-direction') == 'column', '#box-container应有flex-direction属性，其值应为 column。'); ``` @@ -34,7 +39,7 @@ tests: #box-container { display: flex; height: 500px; - + } #box-1 { background-color: dodgerblue; @@ -53,7 +58,6 @@ tests:
- ``` @@ -65,7 +69,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.chinese.md index c5b9ceca1b..6878f3ecce 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.chinese.md @@ -2,23 +2,30 @@ id: 587d78ab367417b2b2512af2 title: Use the flex-direction Property to Make a Row challengeType: 0 -videoUrl: '' -localeTitle: 使用flex-direction属性创建一行 +videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ' +forumTopicId: 301110 +localeTitle: 使用 flex-direction 属性创建一行 --- ## Description -
添加display: flex to a element将其转换为flex容器。这使得可以将该元素的任何子节点对齐成行或列。您可以通过将flex-direction属性添加到父项并将其设置为行或列来完成此操作。创建行将水平对齐子项，创建列将垂直对齐子项。 flex-direction其他选项是row-reverse和column-reverse。 注意
flex-direction属性的默认值为row。
+
+给元素添加display: flex属性使其变成 flex 容器。只要给父元素添加flex-direction属性，并把属性值设置为 row 或 column，即可横排或竖排它的子元素。设为 row 可以让子元素水平排列，设为 column 可以让子元素垂直排列。 +flex-direction的其他可选值还有 row-reverse 和 column-reverse。 +注意
flex-direction的默认值为 row。 +
## Instructions -
将CSS属性flex-direction添加到#box-container元素，并为其赋值row-reverse。
+
+为#box-container添加 CSS 属性flex-direction，其值设为 row-reverse。 +
## Tests
```yml tests: - - text: '#box-container元素的flex-direction属性应设置为row-reverse。' - testString: 'assert($("#box-container").css("flex-direction") == "row-reverse", "The #box-container element should have a flex-direction property set to row-reverse.");' + - text: '#box-container应有flex-direction属性，其值应为 row-reverse。' + testString: assert($('#box-container').css('flex-direction') == 'row-reverse', '#box-container应有flex-direction属性，其值应为 row-reverse。'); ``` @@ -34,7 +41,7 @@ tests: #box-container { display: flex; height: 500px; - + } #box-1 { background-color: dodgerblue; @@ -53,7 +60,6 @@ tests:
- ``` @@ -65,7 +71,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.chinese.md index 96f23c9322..9ef53fbadc 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.chinese.md @@ -2,25 +2,31 @@ id: 587d78ae367417b2b2512afc title: Use the flex-grow Property to Expand Items challengeType: 0 -videoUrl: '' -localeTitle: 使用flex-grow属性扩展项目 +videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg' +forumTopicId: 1301111 +localeTitle: 使用 flex-grow 属性扩展项目 --- ## Description -
与flex-shrink相反的是flex-grow属性。回想一下，当容器缩小时， flex-shrink控制项目的大小。当父容器展开时， flex-grow属性控制项的大小。使用上一个挑战中的类似示例，如果一个项目的flex-grow值为1而另一个项目的flex-grow值为3，则值为3的项目将增长为另一个项目的三倍。
+
+与flex-shrink相对的是flex-grow。你应该还记得，flex-shrink会在容器太小时对元素作出调整。相应地，flex-grow会在容器太大时对元素作出调整。 +例子与上一个挑战相似，如果一个项目的flex-grow属性值为 1，另一个项目的flex-grow属性值为 3，那么后者会较前者扩大三倍。 +
## Instructions -
将CSS属性flex-grow添加到#box-1和#box-2 。将#box-1的值设为1，将#box-2的值设为2。
+
+为#box-1和#box-2添加 CSS 属性flex-grow，#box-1的值设为 1，#box-2的值设为 2。 +
## Tests
```yml tests: - - text: '#box-1元素应将flex-grow属性设置为值1。' - testString: 'assert($("#box-1").css("flex-grow") == "1", "The #box-1 element should have the flex-grow property set to a value of 1.");' - - text: '#box-2元素应将flex-grow属性设置为值2。' - testString: 'assert($("#box-2").css("flex-grow") == "2", "The #box-2 element should have the flex-grow property set to a value of 2.");' + - text: '#box-1元素应有flex-grow属性，其值应为 1。' + testString: assert($('#box-1').css('flex-grow') == '1', '#box-1元素应有flex-grow属性，其值应为 1。'); + - text: '#box-2元素应有flex-grow属性，其值应为 2。' + testString: assert($('#box-2').css('flex-grow') == '2', '#box-2元素应有flex-grow属性，其值应为 2。'); ``` @@ -37,17 +43,17 @@ tests: display: flex; height: 500px; } - + #box-1 { background-color: dodgerblue; height: 200px; - + } - + #box-2 { background-color: orangered; height: 200px; - + } @@ -55,7 +61,6 @@ tests:
- ``` @@ -67,7 +72,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.chinese.md index 30d77d0315..7e473fdc3f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.chinese.md @@ -2,27 +2,35 @@ id: 587d78ae367417b2b2512afe title: Use the flex Shorthand Property challengeType: 0 -videoUrl: '' -localeTitle: 使用flex速记属性 +videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE' +forumTopicId: 301112 +localeTitle: 使用 flex 短方法属性 --- ## Description -
有一个快捷方式可以同时设置多个flex属性。通过使用flex属性，可以将flex-grow ， flex-shrink和flex-basis属性设置在一起。例如， flex: 1 0 10px;将项目设置为flex-grow: 1; ， flex-shrink: 0; ，和flex-basis: 10px; 。默认属性设置为flex: 0 1 auto; 。
+
+上面几个 flex 属性有一个简写方式。flex-grow、flex-shrink和flex-basis属性可以在flex中一同设置。 +例如，flex: 1 0 10px;会把项目属性设为flex-grow: 1;、flex-shrink: 0;以及flex-basis: 10px;。 +属性的默认设置是flex: 0 1 auto;。 +
## Instructions -
将CSS属性flex添加到#box-1和#box-2 。给#box-1赋值，使flex-grow为2， flex-shrink为2， flex-basis为150px。给#box-2赋值，使flex-grow为1， flex-shrink为1，其flex-basis为150px。这些值将导致#box-1增长以在容器大于300px时以#box-2两倍速率填充额外空间，并在容器小于300px时以#box-2的速率缩小两倍。 300px是两个框的flex-basis值的组合大小。
+
+在#box-1和#box-2添加flex属性。为#box-1设置flex-grow属性值为 2，flex-shrink属性值为 2，flex-basis属性值为 150px。为#box-2设置flex-grow属性值为 1，flex-shrink属性值为 1，flex-basis属性值为 150px。 +通过上面的设置，在容器大于 300px 时，#box-1扩大的空间是#box-2扩大空间的两倍；在容器小于 300px 时，#box-1缩小的空间#box-2缩小空间的两倍。300px 是两个盒子的flex-basis的值之和。 +
## Tests
```yml tests: - - text: '#box-1元素的flex属性应设置为2 2 150px。' - testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The #box-1 element should have the flex property set to a value of 2 2 150px.");' - - text: '#box-2元素的flex属性应设置为1 1 150px。' - testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The #box-2 element should have the flex property set to a value of 1 1 150px.");' - - text: '您的代码应该使用#box-1和#box-2的flex属性。' - testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the flex property for #box-1 and #box-2.");' + - text: '#box-1元素应有flex属性，其值应为 2 2 150px。' + testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', '#box-1元素应有flex属性，其值应为 2 2 150px。'); + - text: '#box-2元素应有flex属性，其值应为 1 1 150px。' + testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', '#box-2元素应有flex属性，其值应为 1 1 150px。'); + - text: '应对#box-1和#box-2使用flex属性。' + testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, ''应对#box-1和#box-2使用flex属性。'');' ``` @@ -41,13 +49,13 @@ tests: } #box-1 { background-color: dodgerblue; - + height: 200px; } #box-2 { background-color: orangered; - + height: 200px; } @@ -56,7 +64,6 @@ tests:
- ``` @@ -68,7 +75,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.chinese.md index 0e3e5fa664..5b5a50ce0f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.chinese.md @@ -2,25 +2,32 @@ id: 587d78ad367417b2b2512afb title: Use the flex-shrink Property to Shrink Items challengeType: 0 -videoUrl: '' -localeTitle: 使用flex-shrink属性收缩项目 +videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr' +forumTopicId: 301113 +localeTitle: 使用 flex-shrink 属性收缩项目 --- ## Description -
到目前为止，挑战中的所有属性都适用于Flex容器（flex项的父级）。但是，flex项有几个有用的属性。第一个是flex-shrink属性。当它被使用时，如果柔性容器太小，它允许物品收缩。当父容器的宽度小于其中所有flex项的组合宽度时，项会收缩。 flex-shrink属性将数字作为值。数字越大，与容器中的其他项目相比，它将收缩得越多。例如，如果一个项目的flex-shrink值为1而另一个项目的flex-shrink值为3，则值为3的项目将缩小为另一个项目的三倍。
+
+目前为止，挑战里的提到的属性都应用于 flex 容器（flex 子元素的父元素）。除此之外，flex 子元素也有很多实用属性。 +首先介绍的是flex-shrink属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。 +项目的flex-shrink属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的flex-shrink属性值为 1 ，另一个项目的flex-shrink属性值为 3，那么后者相比前者会受到 3 倍压缩。 +
## Instructions -
将CSS属性flex-shrink添加到#box-1和#box-2 。将#box-1的值设为1，将#box-2的值设为2。
+
+为#box-1和#box-2添加 CSS 属性flex-shrink，#box-1的值设为 1，#box-2的值设为 2。 +
## Tests
```yml tests: - - text: '#box-1元素应将flex-shrink属性设置为值1。' - testString: 'assert($("#box-1").css("flex-shrink") == "1", "The #box-1 element should have the flex-shrink property set to a value of 1.");' - - text: '#box-2元素的flex-shrink属性应设置为值2。' - testString: 'assert($("#box-2").css("flex-shrink") == "2", "The #box-2 element should have the flex-shrink property set to a value of 2.");' + - text: '#box-1元素应有flex-shrink属性，其值应为 1.' + testString: assert($('#box-1').css('flex-shrink') == '1', '#box-1元素应有flex-shrink属性，其值应为 1.'); + - text: '#box-2元素应有flex-shrink属性，其值应为 2.' + testString: assert($('#box-2').css('flex-shrink') == '2', '#box-2元素应有flex-shrink属性，其值应为 2.'); ``` @@ -41,14 +48,14 @@ tests: background-color: dodgerblue; width: 100%; height: 200px; - + } #box-2 { background-color: orangered; width: 100%; height: 200px; - + } @@ -56,7 +63,6 @@ tests:
- ``` @@ -68,7 +74,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.chinese.md index dc57cc1bf1..1279a4d085 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.chinese.md @@ -2,23 +2,31 @@ id: 587d78ad367417b2b2512afa title: Use the flex-wrap Property to Wrap a Row or Column challengeType: 0 -videoUrl: '' -localeTitle: 使用flex-wrap属性包装行或列 +videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG' +forumTopicId: 301114 +localeTitle: 使用 flex-wrap 属性包裹一行或一列 --- ## Description -
CSS flexbox具有将flex项分割为多行（或列）的功能。默认情况下，Flex容器将所有Flex项目放在一起。例如，一行将全部在一行上。但是，使用flex-wrap属性，它会告诉CSS包装项目。这意味着额外的项目将移动到新的行或列中。包装发生的断点取决于物品的大小和容器的大小。 CSS还有包装方向的选项：
  • nowrap ：这是默认设置，不包装项目。
  • wrap ：如果项目在一行中，则从左到右包装，如果它们在列中，则从上到下包装。
  • wrap-reverse ：如果项目在一行中，则从下到上包装项目;如果它们在列中，则从右到左包装。
+
+CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。 +不过，使用flex-wrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。 +换行方向的可选值有这些： +
  • nowrap：默认值，不换行。
  • wrap：行从上到下排，列从左到又排。
  • wrap-reverse：行从下到上排，列从左到右排。
+
## Instructions -
当前布局对于一行有太多的框。将CSS属性flex-wrap添加到#box-container元素，并为其赋值wrap。
+
+现在的布局一行里面元素太多了，在#box-container元素添加 CSS 属性flex-wrap，把值设为 wrap。 +
## Tests
```yml tests: - - text: '#box-container元素应该将flex-wrap属性设置为wrap值。' - testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The #box-container element should have the flex-wrap property set to a value of wrap.");' + - text: '#box-container元素应有flex-wrap属性，其值应为 wrap。' + testString: assert($('#box-container').css('flex-wrap') == 'wrap', '#box-container元素应有flex-wrap属性，其值为 wrap。'); ``` @@ -35,7 +43,7 @@ tests: background: gray; display: flex; height: 100%; - + } #box-1 { background-color: dodgerblue; @@ -78,7 +86,6 @@ tests:
- ``` @@ -90,7 +97,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.chinese.md index 58fb998ff1..6952382751 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.chinese.md @@ -2,23 +2,28 @@ id: 587d78ac367417b2b2512af7 title: Use the justify-content Property in the Tweet Embed challengeType: 0 -videoUrl: '' -localeTitle: 在Tweet Embed中使用justify-content属性 +videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa' +forumTopicId: 301115 +localeTitle: 在推文中使用 justify-content 属性 --- ## Description -
最后一项挑战展示了一个justify-content属性的例子。对于tweet嵌入，可以应用此属性来对齐.profile-name元素中的项目。
+
+上一项挑战展示了justify-content属性的作用。如果我们想对齐推文内的子元素，可以把justify-content应用在.profile-name上。 +
## Instructions -
将CSS属性justify-content添加到标头的.profile-name元素，并将值设置为上一个挑战中的任何选项。
+
+在 header 的.profile-name元素添加 CSS 属性justify-content，把它的值设为上面挑战提到的任意可用值。 +
## Tests
```yml tests: - - text: .profile-name元素应将justify-content属性设置为以下任何值：center，flex-start，flex-end，space-between，space-around或space-evenly。 - testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g), "The .profile-name element should have the justify-content property set to any of these values: center, flex-start, flex-end, space-between, space-around, or space-evenly.");' + - text: '.profile-name元素的justify-content属性可选以下值：center、flex-start、flex-end、space-between、space-around。' + testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g), ''.profile-name元素的justify-content属性可选以下值：center、flex-start、flex-end、space-between、space-around。'');' ``` @@ -46,7 +51,7 @@ tests: header .profile-name { display: flex; flex-direction: column; - + margin-left: 10px; } header .follow-btn { @@ -119,7 +124,6 @@ tests: - ``` @@ -131,7 +135,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.chinese.md index 94a3e9b42c..3501c9c7ff 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.chinese.md @@ -2,25 +2,30 @@ id: 587d78ae367417b2b2512aff title: Use the order Property to Rearrange Items challengeType: 0 -videoUrl: '' -localeTitle: 使用order属性重新排列项目 +videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG' +forumTopicId: 301116 +localeTitle: 使用 order 属性重新排列项目 --- ## Description -
order属性用于告诉CSS Flex项目在Flex容器中的显示顺序。默认情况下，项目将以与源HTML相同的顺序显示。该属性将数字作为值，可以使用负数。
+
+order属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。 +
## Instructions -
将CSS属性order添加到#box-1和#box-2 。给#box-1一个值2，给#box-2一个值1。
+
+给#box-1和#box-2添加 CSS 属性order，#box-1的order属性值设为 2，#box-2的order属性值设为 1。 +
## Tests
```yml tests: - - text: '#box-1元素的order属性应设置为值2。' - testString: 'assert($("#box-1").css("order") == "2", "The #box-1 element should have the order property set to a value of 2.");' - - text: '#box-2元素应该将order属性设置为值1。' - testString: 'assert($("#box-2").css("order") == "1", "The #box-2 element should have the order property set to a value of 1.");' + - text: '#box-1元素应有order属性，其值应为 2。' + testString: assert($('#box-1').css('order') == '2', '#box-1元素应有order属性，其值应为 2。'); + - text: '#box-2元素应有order属性，其值应为 1。' + testString: assert($('#box-2').css('order') == '1', '#box-2元素应有order属性，其值应为 1。'); ``` @@ -39,14 +44,14 @@ tests: } #box-1 { background-color: dodgerblue; - + height: 200px; width: 200px; } #box-2 { background-color: orangered; - + height: 200px; width: 200px; } @@ -56,7 +61,6 @@ tests:
- ``` @@ -68,7 +72,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file