display: flex 。在这里，您将把它添加到嵌入的推文中的几个组件，以开始调整它们的位置。 display: flex，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。
+display: flex添加到以下所有项目中 - 请注意，选择器已经设置在CSS： header ，标题的.profile-name ，标题的.follow-btn ，标题的h3和h4 ， footer和页脚的.stats 。 display: flex。注意，CSS 选择器已写好：
+header、header 的.profile-name、header 的.follow-btn、header 的h3和h4、footer以及 footer 的.stats。
+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
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：沿基线对齐。基线是文本相关的概念，可以认为它是字母排列的下端基准线。align-items添加到#box-container元素，并为其指定center值。 奖金 align-items属性的其他选项来查看它们之间的差异。但请注意，中心值是唯一能够通过此挑战的值。 #box-container添加 CSS 属性align-items并将值设为 center。
+提示：align-items的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center。
+#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
justify-content属性有几个选项可以做到这一点。但首先，在审查这些选项之前，需要了解一些重要的术语。 这是一个有用的图像，显示了一行来说明下面的概念。回想一下，将flex容器设置为一行可以从左到右并排放置Flex项目。设置为列的弹性容器将弹性项目从上到下放置在垂直堆栈中。对于每个，柔性项目的排列方向称为主轴 。对于一行，这是一条切割每个项目的水平线。对于列，主轴是穿过项目的垂直线。如何沿着作为主轴的直线对弹性项目进行间隔有几种选择。其中最常用的是justify-content: center; ，将所有弹性项目对齐到Flex容器内的中心。其他选择包括： flex-start ：将项目对齐到Flex容器的开头。对于一行，这会将项目推送到容器的左侧。对于列，这会将项目推送到容器的顶部。 flex-end ：将项目对齐到Flex容器的末尾。对于一行，这会将项目推送到容器的右侧。对于列，这会将项目推送到容器的底部。 space-between ：将项目与主轴的中心对齐，在项目之间放置额外的空间。第一个和最后一个项目被推送到Flex容器的最边缘。例如，在第一项中，第一项是在容器的左侧，最后一项是在容器的右侧，然后它们之间的其他项是均匀间隔的。 space-around ：类似于space-between但是第一个和最后一个项目没有锁定到容器的边缘，空间分布在所有项目周围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相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。justify-content添加到#box-container元素，并为其赋值为center。 奖金 justify-content属性的其他选项来查看它们之间的差异。但请注意，中心值是唯一能够通过此挑战的值。 #box-container元素添加 CSS 属性justify-content，其值为 center。
+提示：justify-content的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center.
+#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
header和footer先前使用了flex-direction属性和行值。同样， .profile-name元素中的项目可以很好地堆叠为列。 header和footer的flex-direction属性值设为 row（行）。相似地，把.profile-name选择器对应的元素竖着排列会好看一点。
+flex-direction添加到标头的.profile-name元素，并将值设置为column。 .profile-name元素添加 CSS 属性flex-direction，将其值设为 column。
+.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
header和footer具有可以使用flex-direction属性排列为行的子项。这告诉CSS水平对齐孩子。 header和footer有自己的子元素，使用flex-direction属性可以把这些子元素排成行。这个属性告诉 CSS 需要将这些子元素水平排列。
+flex-direction添加到header和footer ，并将值设置为row。 header和footer添加 CSS 属性flex-direction并把值设为 row。
+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
display: flex;在元素上允许您使用其他flex属性来构建响应式页面。 display: flex;，就可以使用其它 flex 属性来构建响应式页面了。
+display添加到#box-container并将其值设置为flex。 #box-container添加display属性，设置其值为 flex。
+#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:
align-items属性并举了一个例子。此属性可应用于一些tweet嵌入元素，以对齐其中的flex项。 align-items属性并给出了例子。可以对嵌入推文的一些元素使用这个属性，以调整其中 flex 子元素的位置。
+align-items添加到标题的.follow-btn元素中。将值设置为居中。 .follow-btn添加 CSS 属性align-items，把值设为 center。
+.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
align-self 。此属性允许您单独调整每个项目的对齐方式，而不是一次性设置它们。这很有用，因为使用CSS属性float ， clear和vertical-align其他常用调整技术对flex项不起作用。 align-self接受与align-items相同的值，并将覆盖align-items属性设置的任何值。 align-self。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为float、clear和vertical-align等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。
+align-self可设置的值与align-items的一样，并且它会覆盖align-items的值。
+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。
+#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
flex-basis属性指定CSS在使用flex-shrink或flex-grow进行调整之前的项的初始大小。 flex-basis属性使用的单位与其他大小属性（ px ， em ， %等）相同。该值根据内容auto项目大小。 flex-basis属性定义了在使用 CSS 的flex-shrink或flex-grow属性对项目进行调整前，项目的初始大小。
+flex-basis属性的单位与其他表示尺寸的属性的单位一致（px、em、%等）。如果值为auto，则项目的尺寸随内容调整。
+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。
+#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;
-
+
}
-
+
flex-direction属性设置为row。此属性还可以通过垂直堆叠Flex容器的子项来创建列。 flex-direction属性创建行（row）。这个属性还能创建一个列，让子元素垂直排列在 flex 容器中。
+flex-direction添加到#box-container元素，并为其赋值column。 #box-container元素添加 CSS 属性flex-direction，赋值为 column。
+#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
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。
+flex-direction添加到#box-container元素，并为其赋值row-reverse。 #box-container添加 CSS 属性flex-direction，其值设为 row-reverse。
+#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
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，那么后者会较前者扩大三倍。
+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。
+#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
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-grow、flex-shrink和flex-basis属性可以在flex中一同设置。
+例如，flex: 1 0 10px;会把项目属性设为flex-grow: 1;、flex-shrink: 0;以及flex-basis: 10px;。
+属性的默认设置是flex: 0 1 auto;。
+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的值之和。
+#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
flex-shrink属性。当它被使用时，如果柔性容器太小，它允许物品收缩。当父容器的宽度小于其中所有flex项的组合宽度时，项会收缩。 flex-shrink属性将数字作为值。数字越大，与容器中的其他项目相比，它将收缩得越多。例如，如果一个项目的flex-shrink值为1而另一个项目的flex-shrink值为3，则值为3的项目将缩小为另一个项目的三倍。 flex-shrink属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。
+项目的flex-shrink属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的flex-shrink属性值为 1 ，另一个项目的flex-shrink属性值为 3，那么后者相比前者会受到 3 倍压缩。
+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。
+#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
flex-wrap属性，它会告诉CSS包装项目。这意味着额外的项目将移动到新的行或列中。包装发生的断点取决于物品的大小和容器的大小。 CSS还有包装方向的选项： nowrap ：这是默认设置，不包装项目。 wrap ：如果项目在一行中，则从左到右包装，如果它们在列中，则从上到下包装。 wrap-reverse ：如果项目在一行中，则从下到上包装项目;如果它们在列中，则从右到左包装。 flex-wrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。
+换行方向的可选值有这些：
+nowrap：默认值，不换行。wrap：行从上到下排，列从左到又排。wrap-reverse：行从下到上排，列从左到右排。flex-wrap添加到#box-container元素，并为其赋值wrap。 #box-container元素添加 CSS 属性flex-wrap，把值设为 wrap。
+#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
justify-content属性的例子。对于tweet嵌入，可以应用此属性来对齐.profile-name元素中的项目。 justify-content属性的作用。如果我们想对齐推文内的子元素，可以把justify-content应用在.profile-name上。
+justify-content添加到标头的.profile-name元素，并将值设置为上一个挑战中的任何选项。 .profile-name元素添加 CSS 属性justify-content，把它的值设为上面挑战提到的任意可用值。
+.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
order属性用于告诉CSS Flex项目在Flex容器中的显示顺序。默认情况下，项目将以与源HTML相同的顺序显示。该属性将数字作为值，可以使用负数。 order属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。
+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。
+#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