diff --git a/01-responsive-web-design/css-flexbox.json b/01-responsive-web-design/css-flexbox.json
index 5fac9b8..175f4b1 100644
--- a/01-responsive-web-design/css-flexbox.json
+++ b/01-responsive-web-design/css-flexbox.json
@@ -8,15 +8,15 @@
"id": "587d78ab367417b2b2512af0",
"title": "Use display: flex to Position Two Boxes",
"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 display: flex; on an element allows you to use other flex properties to build a responsive page.",
+ "这节会使用一种不同的挑战方式来学习一下如何更灵活地使用 CSS 布局元素。首先，我们会先用一个挑战解释原理，然后使用“弹性盒子”（flexbox）调整一个推文组件的样式来完成挑战。" ,
+ "只要在一个元素的 CSS 中添加display: flex;，就可以使用其他 flex 属性来构建响应式页面了。",
"
",
- "Add the CSS property display to #box-container and set its value to flex."
+ "为#box-container添加display属性，设置其值为 flex。"
],
"tests": [
{
- "text": "#box-container should have the display property set to a value of 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。');"
}
],
"solutions": [],
@@ -63,39 +63,39 @@
"id": "587d78ab367417b2b2512af1",
"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 display: flex. Here you'll add it to several components in the tweet embed to start adjusting their positioning.",
+ "我们以右边的内嵌推文为基础开始实践。一些元素换一个布局方式或许更好看。上一个挑战演示了display: flex，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。",
"
",
- "Add the CSS property display: flex to all of the following items - note that the selectors are already set up in the CSS:",
- "header, the header's .profile-name, the header's .follow-btn, the header's h3 and h4, the footer, and the footer's .stats."
+ "为下列项目添加 CSS 属性display: flex—— 注意，选择器已在 CSS 中给出：",
+ "header、header 的.profile-name、header 的.follow-btn、header 的h3和h4、footer以及 footer 的.stats。"
],
"tests": [
{
- "text": "Your header should have a display property set to flex.",
- "testString": "assert($('header').css('display') == 'flex', 'Your header should have a display property set to flex.');"
+ "text": "header的display属性应为 flex。",
+ "testString": "assert($('header').css('display') == 'flex', 'header的display属性应为 flex。');"
},
{
- "text": "Your footer should have a display property set to flex.",
- "testString": "assert($('footer').css('display') == 'flex', 'Your footer should have a display property set to flex.');"
+ "text": "footer的display属性应为 flex。",
+ "testString": "assert($('footer').css('display') == 'flex', 'footer的display属性应为 flex。');"
},
{
- "text": "Your h3 should have a display property set to flex.",
- "testString": "assert($('h3').css('display') == 'flex', 'Your h3 should have a display property set to flex.');"
+ "text": "h3的display属性应为 flex。",
+ "testString": "assert($('h3').css('display') == 'flex', 'h3的display属性应为 flex。');"
},
{
- "text": "Your h4 should have a display property set to flex.",
- "testString": "assert($('h4').css('display') == 'flex', 'Your h4 should have a display property set to flex.');"
+ "text": "h4的display属性应为 flex。",
+ "testString": "assert($('h4').css('display') == 'flex', 'h4的display属性应为 flex。');"
},
{
- "text": "Your .profile-name should have a display property set to flex.",
- "testString": "assert($('.profile-name').css('display') == 'flex', 'Your .profile-name should have a display property set to flex.');"
+ "text": ".profile-name的display属性应为 flex。",
+ "testString": "assert($('.profile-name').css('display') == 'flex', '.profile-name的display属性应为 flex。');"
},
{
- "text": "Your .follow-btn should have a display property set to flex.",
- "testString": "assert($('.follow-btn').css('display') == 'flex', 'Your .follow-btn should have a display property set to flex.');"
+ "text": ".follow-btn的display属性应为 flex。",
+ "testString": "assert($('.follow-btn').css('display') == 'flex', '.follow-btn的display属性应为 flex。');"
},
{
- "text": "Your .stats should have a display property set to flex.",
- "testString": "assert($('.stats').css('display') == 'flex', 'Your .stats should have a display property set to flex.');"
+ "text": ".stats的display属性应为 flex。",
+ "testString": "assert($('.stats').css('display') == 'flex', '.stats的display属性应为 flex。');"
}
],
"solutions": [],
@@ -207,16 +207,16 @@
"id": "587d78ab367417b2b2512af2",
"title": "Use the flex-direction Property to Make a Row",
"description": [
- "Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.",
- "Other options for flex-direction are row-reverse and column-reverse.",
- "Note
The default value for the flex-direction property is row.",
+ "添加了display: flex的元素会成为 flex 容器。只要把flex-direction属性添加到父元素，并设置其为 row 或 column 即可轻易横或竖排列它的子元素。设为 row 可以让子元素水平排列，column 可以让子元素垂直排列。",
+ "flex-direction的其他可选值还有 row-reverse 和 column-reverse。",
+ "注意
flex-direction的默认值为 row。",
"
",
- "Add the CSS property flex-direction to the #box-container element, and give it a value of row-reverse."
+ "为#box-container添加 CSS 属性flex-direction，其值设为 row-reverse。"
],
"tests": [
{
- "text": "The #box-container element should have a flex-direction property set to 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。');"
}
],
"solutions": [],
@@ -262,18 +262,18 @@
"id": "587d78ab367417b2b2512af3",
"title": "Apply the flex-direction Property to Create Rows in the Tweet Embed",
"description": [
- "The header and footer in the tweet embed example have child items that could be arranged as rows using the flex-direction property. This tells CSS to align the children horizontally.",
+ "内嵌推文样例中的header和footer有自己的子元素，使用flex-direction属性可以把这些子元素排列成一行。这个属性告诉 CSS 需要将这个元素的子元素水平排列。",
"
",
- "Add the CSS property flex-direction to both the header and footer and set the value to row."
+ "为header和footer添加 CSS 属性flex-direction并把值设为 row。"
],
"tests": [
{
- "text": "The header should have a flex-direction property set to row.",
- "testString": "assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The header 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": "The footer should have a flex-direction property set to row.",
- "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The footer should have a flex-direction property set to row.');"
+ "text": "footer应有flex-direction属性，其值应为 row。",
+ "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'footer应有flex-direction属性，其值应为 row。');"
}
],
"solutions": [],
@@ -387,14 +387,14 @@
"id": "587d78ac367417b2b2512af4",
"title": "Use the flex-direction Property to Make a Column",
"description": [
- "The last two challenges used the flex-direction property set to row. This property can also create a column by vertically stacking the children of a flex container.",
+ "之前两项挑战把flex-direction设为 row。这个属性还能创建一个列，让子元素垂直排列在 flex 容器中。",
"
",
- "Add the CSS property flex-direction to the #box-container element, and give it a value of column."
+ "给#box-container元素添加 CSS 属性flex-direction，赋值为 column。"
],
"tests": [
{
- "text": "The #box-container element should have a flex-direction property set to 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。');"
}
],
"solutions": [],
@@ -440,14 +440,14 @@
"id": "587d78ac367417b2b2512af5",
"title": "Apply the flex-direction Property to Create a Column in the Tweet Embed",
"description": [
- "The tweet embed header and footer used the flex-direction property earlier with a row value. Similarly, the items inside the .profile-name element would work well stacked as a column.",
+ "上面，内嵌推文的header和footer把flex-direction属性设为 row。相似地，.profile-name里的元素或许竖着排列会好看一点。",
"
",
- "Add the CSS property flex-direction to the header's .profile-name element and set the value to column."
+ "在 header 的.profile-name元素添加 CSS 属性flex-direction，将其值设为 column。"
],
"tests": [
{
- "text": "The .profile-name element should have a flex-direction property set to 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。');"
}
],
"solutions": [],
@@ -558,19 +558,19 @@
"id": "587d78ac367417b2b2512af6",
"title": "Align Elements Using the justify-content Property",
"description": [
- "Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this. But first, there is some important terminology to understand before reviewing those options.",
- "Here is a useful image showing a row to illustrate the concepts below.",
- "Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the main axis. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.",
- "There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is justify-content: center;, which aligns all the flex items to the center inside the flex container. Others options include:",
- "flex-start: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container.flex-end: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.space-between: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the other items between them are spaced evenly.space-around: similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items
",
+ "flex 容器里的 flex 子元素有时不能充满整个容器，所以我们需要告诉 CSS 如何以特定方案排列和调整 flex 子元素。幸运的是，我们有justify-content属性处理这个问题。但在介绍justify-content的可选值之前，我们要先理解一些重要术语。",
+ "这张图片的元素横着排列，很好地描述了下面的概念。",
+ "回忆一下，把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。",
+ "关于 flex 子元素在主轴排列方式，可以选择以下值：其中一个很常用的是justify-content: center;，可以让 flex 子元素排列在 flex 容器中间。其他可选值还有：",
+ "flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边
",
"
",
- "An example helps show this property in action. Add the CSS property justify-content to the #box-container element, and give it a value of center.",
- "Bonus
Try the other options for the justify-content property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge."
+ "这个例子可以帮助你理解这个属性，在#box-container元素添加 CSS 属性justify-content，其值为 center。",
+ "提示：
在编辑器里试试justify-content的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center."
],
"tests": [
{
- "text": "The #box-container element should have a justify-content property set to a value of 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。');"
}
],
"solutions": [],
@@ -617,14 +617,14 @@
"id": "587d78ac367417b2b2512af7",
"title": "Use the justify-content Property in the Tweet Embed",
"description": [
- "The last challenge showed an example of the justify-content property. For the tweet embed, this property can be applied to align the items in the .profile-name element.",
+ "上一项挑战展示了justify-content属性的作用。如果我们想对齐推文内的子元素，可以把justify-content应用在.profile-name上。",
"
",
- "Add the CSS property justify-content to the header's .profile-name element and set the value to any of the options from the last challenge."
+ "在 header 的.profile-name元素添加 CSS 属性justify-content，把它的值设为上面挑战提到的任意可用值。"
],
"tests": [
{
- "text": "The .profile-name element should have the justify-content property set to any of these values: center, flex-start, flex-end, space-between, or 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), 'The .profile-name element should have the justify-content property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');"
+ "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。');"
}
],
"solutions": [],
@@ -736,19 +736,19 @@
"id": "587d78ad367417b2b2512af8",
"title": "Align Elements Using the align-items Property",
"description": [
- "The align-items property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.",
- "Flex containers also have a cross axis which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.",
- "CSS offers the align-items property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.",
- "The different values available for align-items include:",
- "flex-start: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.flex-end: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.center: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).stretch: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom.baseline: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.
",
+ "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 容器。例如，排成行的项目从容器顶部拉伸到底部。baseline：基线对齐地排列。基线是字体相关的概念，可以认为字体坐落在基线上。
",
"
",
- "An example helps show this property in action. Add the CSS property align-items to the #box-container element, and give it a value of center.",
- "Bonus
Try the other options for the align-items property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge."
+ "这个例子可以帮助你理解这个属性，在#box-container添加 CSS 属性align-items并将值设为 center。",
+ "提示：
在编辑器里试试align-items的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center。"
],
"tests": [
{
- "text": "The #box-container element should have an align-items property set to a value of 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。');"
}
],
"solutions": [],
@@ -795,14 +795,14 @@
"id": "587d78ad367417b2b2512af9",
"title": "Use the align-items Property in the Tweet Embed",
"description": [
- "The last challenge introduced the align-items property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.",
+ "上一个挑战介绍了align-items并给出了例子。这个属性可以应用在不少元素上，调整它们的子元素的位置。",
"
",
- "Add the CSS property align-items to the header's .follow-btn element. Set the value to center."
+ "在 header 的.follow-btn添加 CSS 属性align-items，把值设为 center。"
],
"tests": [
{
- "text": "The .follow-btn element should have the align-items property set to a value of 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.');"
}
],
"solutions": [],
@@ -916,17 +916,17 @@
"id": "587d78ad367417b2b2512afa",
"title": "Use the flex-wrap Property to Wrap a Row or Column",
"description": [
- "CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.",
- "However, using the flex-wrap property, it tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.",
- "CSS also has options for the direction of the wrap:",
- "nowrap: this is the default setting, and does not wrap items.wrap: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.wrap-reverse: wraps items from bottom-to-top if they are in a row, or left-to-right if they are in a column.
",
+ "CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。",
+ "不过，使用flex-wrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。",
+ "换行方向的可选值有这些：",
+ "nowrap：默认值，不换行。wrap：行从上到下排，列从左到又排。wrap-reverse：行从下到上排，列从右到左排。
",
"
",
- "The current layout has too many boxes for one row. Add the CSS property flex-wrap to the #box-container element, and give it a value of wrap."
+ "现在的布局一行里面元素太多了，在#box-container元素添加 CSS 属性flex-wrap，把值设为 wrap。"
],
"tests": [
{
- "text": "The #box-container element should have the flex-wrap property set to a value of 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。');"
}
],
"solutions": [],
@@ -997,20 +997,20 @@
"id": "587d78ad367417b2b2512afb",
"title": "Use the flex-shrink Property to Shrink Items",
"description": [
- "So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.",
- "The first is the flex-shrink property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.",
- "The flex-shrink property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a flex-shrink value of 1 and the other has a flex-shrink value of 3, the one with the value of 3 will shrink three times as much as the other.",
+ "目前为止，挑战里的提到的属性都应用于 flex 容器（flex 子元素的父元素）。除此之外，flex 子元素也有很多实用属性。",
+ "首先介绍的是flex-shrink属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。",
+ "flex-shrink属性接受 number 类型的值。数值越大，与其他项目相比会被压缩得更厉害。例如，如果一个项目的flex-shrink为 1 ，另一个项目flex-shrink为 3，那么 3 的那个与另一个相比会受到 3 倍压缩。",
"
",
- "Add the CSS property flex-shrink to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2."
+ "为#box-1和#box-2添加 CSS 属性flex-shrink，#box-1的值设为 1，#box-2的值设为 2。"
],
"tests": [
{
- "text": "The #box-1 element should have the flex-shrink property set to a value of 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-1元素应有flex-shrink属性，其值应为 1.",
+ "testString": "assert($('#box-1').css('flex-shrink') == '1', '#box-1元素应有flex-shrink属性，其值应为 1.');"
},
{
- "text": "The #box-2 element should have the flex-shrink property set to a value of 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-2元素应有flex-shrink属性，其值应为 2.",
+ "testString": "assert($('#box-2').css('flex-shrink') == '2', '#box-2元素应有flex-shrink属性，其值应为 2.');"
}
],
"solutions": [],
@@ -1057,19 +1057,19 @@
"id": "587d78ae367417b2b2512afc",
"title": "Use the flex-grow Property to Expand Items",
"description": [
- "The opposite of flex-shrink is the flex-grow property. Recall that flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands.",
- "Using a similar example from the last challenge, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.",
+ "与flex-shrink相对的是flex-grow。你应该还记得，flex-shrink会在容器太小时对元素作出调整。相应地，flex-grow会在容器太大时对元素作出调整。",
+ "例子与上一个挑战相似，如果一个项目flex-grow属性的值为 1，另一个flex-grow为 3，那么 3 的会比 1 的扩大三倍。",
"
",
- "Add the CSS property flex-grow to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2."
+ "为#box-1和#box-2添加 CSS 属性flex-grow，#box-1的值设为 1，#box-2的值设为 2。"
],
"tests": [
{
- "text": "The #box-1 element should have the flex-grow property set to a value of 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-1元素应有flex-grow属性，其值应为 1。",
+ "testString": "assert($('#box-1').css('flex-grow') == '1', '#box-1元素应有flex-grow属性，其值应为 1。');"
},
{
- "text": "The #box-2 element should have the flex-grow property set to a value of 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-2元素应有flex-grow属性，其值应为 2。",
+ "testString": "assert($('#box-2').css('flex-grow') == '2', '#box-2元素应有flex-grow属性，其值应为 2。');"
}
],
"solutions": [],
@@ -1115,27 +1115,27 @@
"id": "587d78ae367417b2b2512afd",
"title": "Use the flex-basis Property to Set the Initial Size of an Item",
"description": [
- "The flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.",
- "The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.",
+ "flex-basis属性指定了项目在 CSS 进行flex-shrink或flex-grow调整前的初始大小。",
+ "flex-basis属性的单位与其他 size 属性一致（px、em、%等）。如果值为auto，项目的大小依赖于自身内容。",
"
",
- "Set the initial size of the boxes using flex-basis. Add the CSS property flex-basis to both #box-1 and #box-2. Give #box-1 a value of 10em and #box-2 a value of 20em."
+ "使用flex-basis为盒子设置原始值。在#box-1和#box-2添加 CSS 属性flex-basis。设置#box-1为10em，#box-2为20em。"
],
"tests": [
{
- "text": "The #box-1 element should have a flex-basis property.",
- "testString": "assert($('#box-1').css('flex-basis') != 'auto', 'The #box-1 element should have a flex-basis property.');"
+ "text": "#box-1元素应有flex-basis属性。",
+ "testString": "assert($('#box-1').css('flex-basis') != 'auto', '#box-1元素应有flex-basis属性。');"
},
{
- "text": "The #box-1 element should have a flex-basis value of 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-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": "The #box-2 element should have the flex-basis property.",
- "testString": "assert($('#box-2').css('flex-basis') != 'auto', 'The #box-2 element should have the flex-basis property.');"
+ "text": "#box-2元素应有flex-basis属性。",
+ "testString": "assert($('#box-2').css('flex-basis') != 'auto', '#box-2元素应有flex-basis属性。');"
},
{
- "text": "The #box-2 element should have a flex-basis value of 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-2的flex-basis应为20em。",
+ "testString": "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), '#box-2的flex-basis应为20em。');"
}
],
"solutions": [],
@@ -1181,25 +1181,25 @@
"id": "587d78ae367417b2b2512afe",
"title": "Use the flex Shorthand Property",
"description": [
- "There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.",
- "For example, flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.",
- "The default property settings are 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;。",
"
",
- "Add the CSS property flex to both #box-1 and #box-2. Give #box-1 the values so its flex-grow is 2, its flex-shrink is 2, and its flex-basis is 150px. Give #box-2 the values so its flex-grow is 1, its flex-shrink is 1, and its flex-basis is 150px.",
- "These values will cause #box-1 to grow to fill the extra space at twice the rate of #box-2 when the container is greater than 300px and shrink at twice the rate of #box-2 when the container is less than 300px. 300px is the combined size of the flex-basis values of the two boxes."
+ "在#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-2的两倍。300px 是两个盒子的flex-basis的值之和。"
],
"tests": [
{
- "text": "The #box-1 element should have the flex property set to a value of 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-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": "The #box-2 element should have the flex property set to a value of 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-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": "Your code should use the flex property for #box-1 and #box-2.",
- "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和#box-2使用flex属性。",
+ "testString": "assert(code.match(/flex:\\s*?\\d\\s+?\\d\\s+?150px;/g).length == 2, '应对#box-1和#box-2使用flex属性。');"
}
],
"solutions": [],
@@ -1244,18 +1244,18 @@
"id": "587d78ae367417b2b2512aff",
"title": "Use the order Property to Rearrange Items",
"description": [
- "The order 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.",
+ "order属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。",
"
",
- "Add the CSS property order to both #box-1 and #box-2. Give #box-1 a value of 2 and give #box-2 a value of 1."
+ "在#box-1和#box-2添加 CSS 属性order。#box-1设为 2，#box-2设为 1。"
],
"tests": [
{
- "text": "The #box-1 element should have the order property set to a value of 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-1元素应有order属性，其值应为 2。",
+ "testString": "assert($('#box-1').css('order') == '2', '#box-1元素应有order属性，其值应为 2。');"
},
{
- "text": "The #box-2 element should have the order property set to a value of 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-2元素应有order属性，其值应为 1。",
+ "testString": "assert($('#box-2').css('order') == '1', '#box-2元素应有order属性，其值应为 1。');"
}
],
"solutions": [],
@@ -1302,19 +1302,19 @@
"id": "587d78af367417b2b2512b00",
"title": "Use the align-self Property",
"description": [
- "The final property for flex items is align-self. 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 float, clear, and vertical-align do not work on flex items.",
- "align-self accepts the same values as align-items and will override any value set by the align-items property.",
+ "flex 子元素的最后一个属性是align-self。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为float、clear和vertical-align等调整使用的属性都不能应用在 flex 子元素，所以这个属性显得十分有用。",
+ "align-self的允许值与align-items一样，并且它会覆盖align-items的值。",
"
",
- "Add the CSS property align-self to both #box-1 and #box-2. Give #box-1 a value of center and give #box-2 a value of flex-end."
+ "在#box-1和#box-2添加 CSS 属性align-self。#box-1设为 center，#box-2设为 flex-end。"
],
"tests": [
{
- "text": "The #box-1 element should have the align-self property set to a value of 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-1元素应有align-self属性，其值应为 center。",
+ "testString": "assert($('#box-1').css('align-self') == 'center', '#box-1元素应有align-self属性，其值应为 center。');"
},
{
- "text": "The #box-2 element should have the align-self property set to a value of 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-2元素应有align-self属性，其值应为 flex-end。",
+ "testString": "assert($('#box-2').css('align-self') == 'flex-end', '#box-2元素应有align-self属性，其值应为 flex-end。');"
}
],
"solutions": [],
@@ -1358,4 +1358,4 @@
}
}
]
-}
\ No newline at end of file
+}
diff --git a/01-responsive-web-design/css-flexbox.md b/01-responsive-web-design/css-flexbox.md
index e38623e..9b5118d 100644
--- a/01-responsive-web-design/css-flexbox.md
+++ b/01-responsive-web-design/css-flexbox.md
@@ -1,5 +1,41 @@
# Introduction to the CSS Flexbox Challenges #
-A website's User Interface ("UI") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.
+网页的用户界面（User Interface 缩写 UI）包括两个部分。第一部分是视觉要素，如色彩、字体和图片等。第二部分是这些元素的排列和定位。在响应式网页设计中，UI 布局必须适配不同浏览器和设备。
-CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.
+CSS3 引入了 Flexible Box，或者叫 flexbox，它可以为动态 UI 创建页面布局。这种布局可以以一种可预见的方式排列元素，使其适用于不同的屏幕大小和浏览器。虽然这是个新东西，但所有现代浏览器都已经支持 flexbox。这一节将要介绍如何使用 flexbox 及其提供的布局选项。
+
+# 课程目录 #
+
+使用 display: flex 定位两个盒子
+
+为嵌入推文添加 Flex 的神奇力量
+
+使用 flex-direction 属性 to Make a Row
+
+Apply the flex-direction 属性 to Create Rows in the 嵌入推文
+
+使用 flex-direction 属性 to Make a Column
+
+Apply the flex-direction 属性 to Create a Column in the 嵌入推文
+
+Align Elements Using the justify-content 属性
+
+使用 justify-content 属性 in the 嵌入推文
+
+Align Elements Using the align-items 属性
+
+在嵌入推文中使用 align-items 属性
+
+使用 flex-wrap 属性换行
+
+使用 flex-shrink 属性压缩项目
+
+使用 flex-grow 属性扩展项目
+
+使用 flex-basis 属性设置项目原始大小
+
+使用 flex 简写属性
+
+使用 order 属性重排项目
+
+使用 align-self 属性