fix(i18n): update Chinese translation of css flexbox (#37923)
This commit is contained in:
ZhichengChen
GitHub
@ -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
|
||||
<section id="description">右侧是推文嵌入，将用作实际示例。使用不同的布局，一些元素看起来会更好。最后的挑战展示了<code>display: flex</code> 。在这里，您将把它添加到嵌入的推文中的几个组件，以开始调整它们的位置。 </section>
|
||||
<section id='description'>
|
||||
我们以右边的嵌入推文为例。一些元素换一个布局方式或许更好看。上一个挑战演示了<code>display: flex</code>，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>display: flex</code>添加到以下所有项目中 - 请注意，选择器已经设置在CSS： <code>header</code> ，标题的<code>.profile-name</code> ，标题的<code>.follow-btn</code> ，标题的<code>h3</code>和<code>h4</code> ， <code>footer</code>和页脚的<code>.stats</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
为下列项目添加 CSS 属性<code>display: flex</code>。注意，CSS 选择器已写好：
|
||||
<code>header</code>、header 的<code>.profile-name</code>、header 的<code>.follow-btn</code>、header 的<code>h3</code>和<code>h4</code>、<code>footer</code>以及 footer 的<code>.stats</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>header</code>应该具有设置为flex的<code>display</code>属性。
|
||||
testString: 'assert($("header").css("display") == "flex", "Your <code>header</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: 您的<code>footer</code>应该具有设置为flex的<code>display</code>属性。
|
||||
testString: 'assert($("footer").css("display") == "flex", "Your <code>footer</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: 你的<code>h3</code>应该有一个<code>display</code>属性设置为flex。
|
||||
testString: 'assert($("h3").css("display") == "flex", "Your <code>h3</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: 你的<code>h4</code>应该有一个<code>display</code>属性设置为flex。
|
||||
testString: 'assert($("h4").css("display") == "flex", "Your <code>h4</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: 您的<code>.profile-name</code>应该将<code>display</code>属性设置为flex。
|
||||
testString: 'assert($(".profile-name").css("display") == "flex", "Your <code>.profile-name</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: 你的<code>.follow-btn</code>应该有一个<code>display</code>属性设置为flex。
|
||||
testString: 'assert($(".follow-btn").css("display") == "flex", "Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: 您的<code>.stats</code>应该将<code>display</code>属性设置为flex。
|
||||
testString: 'assert($(".stats").css("display") == "flex", "Your <code>.stats</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: '<code>header</code>的<code>display</code>属性应为 flex。'
|
||||
testString: assert($('header').css('display') == 'flex', '<code>header</code>的<code>display</code>属性应为 flex。');
|
||||
- text: '<code>footer</code>的<code>display</code>属性应为 flex。'
|
||||
testString: assert($('footer').css('display') == 'flex', '<code>footer</code>的<code>display</code>属性应为 flex。');
|
||||
- text: '<code>h3</code>的<code>display</code>属性应为 flex。'
|
||||
testString: assert($('h3').css('display') == 'flex', '<code>h3</code>的<code>display</code>属性应为 flex。');
|
||||
- text: '<code>h4</code>的<code>display</code>属性应为 flex。'
|
||||
testString: assert($('h4').css('display') == 'flex', '<code>h4</code>的<code>display</code>属性应为 flex。');
|
||||
- text: '<code>.profile-name</code>的<code>display</code>属性应为 flex。'
|
||||
testString: assert($('.profile-name').css('display') == 'flex', '<code>.profile-name</code>的<code>display</code>属性应为 flex。');
|
||||
- text: '<code>.follow-btn</code>的<code>display</code>属性应为 flex。'
|
||||
testString: assert($('.follow-btn').css('display') == 'flex', '<code>.follow-btn</code>的<code>display</code>属性应为 flex。');
|
||||
- text: '<code>.stats</code>的<code>display</code>属性应为 flex。'
|
||||
testString: assert($('.stats').css('display') == 'flex', '<code>.stats</code>的<code>display</code>属性应为 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:
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -143,7 +148,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description"> <code>align-items</code>属性类似于<code>justify-content</code> 。回想一下， <code>justify-content</code>属性沿主轴对齐flex项目。对于行，主轴是水平线，对于列，它是垂直线。 Flex容器还具有与<strong>主轴</strong>相反的横轴。对于行，横轴是垂直的，对于列，横轴是水平的。 CSS提供<code>align-items</code>属性以沿着交叉轴对齐flex项。对于一行，它告诉CSS如何在容器内向上或向下推动整行中的项目。对于列，如何在容器内向左或向右推送所有项目。 <code>align-items</code>可用的不同值包括： <ul><li> <code>flex-start</code> ：将项目对齐到Flex容器的开头。对于行，这会将项目对齐到容器的顶部。对于列，这会将项目对齐到容器的左侧。 </li><li> <code>flex-end</code> ：将项目对齐到Flex容器的末尾。对于行，这会将项目对齐到容器的底部。对于列，这会将项目对齐到容器的右侧。 </li><li> <code>center</code> ：将项目对齐到中心。对于行，这会垂直对齐项目（项目上方和下方的空格相等）。对于列，它会水平对齐它们（项目左侧和右侧的空格相等）。 </li><li> <code>stretch</code> ：拉伸项目以填充弹性容器。例如，行项目被拉伸以从上到下填充Flex容器。 </li><li> <code>baseline</code> ：将项目与其基线对齐。基线是一个文本概念，将其视为字母所在的行。 </li></ul></section>
|
||||
<section id='description'>
|
||||
<code>align-items</code>属性与<code>justify-content</code>类似。回忆一下，<code>justify-content</code>属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。
|
||||
Flex 容器中，与主轴垂直的叫做 <strong>cross axis（交叉轴）</strong>。行的交叉轴是垂直的，列的交叉轴是水平的。
|
||||
使用 CSS 中的<code>align-items</code>属性定义 flex 子元素沿交叉轴的对齐方式，对行来说，将行中的项目在容器中往上或往下移动；对列来说，将列中的项目在容器中往左或往右移动。
|
||||
<code>align-items</code>的可选值包括：
|
||||
<ul><li><code>flex-start</code>：从 flex 容器的起始位置开始对齐项目。对行来说，把项目移至容器顶部；对列来说，是把项目移至容器左边。</li><li><code>flex-end</code>：从 flex 容器的终止位置开始对齐项目。对行来说，把项目移至容器底部；对列来说，把项目移至容器右边。</li><li><code>center</code>：把项目居中放置。对行来说，垂直居中（项目距离顶部和底部的距离相等）；对列来说，水平居中（项目距离左边和右边的距离相等）。</li><li><code>stretch</code>：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。如未设置<code>align-items</code>的值，那么默认值是<code>stretch</code>。</li><li><code>baseline</code>：沿基线对齐。基线是文本相关的概念，可以认为它是字母排列的下端基准线。</li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">一个示例有助于显示此属性的运行情况。将CSS属性<code>align-items</code>添加到<code>#box-container</code>元素，并为其指定center值。 <strong>奖金</strong> <br>在代码编辑器中尝试使用<code>align-items</code>属性的其他选项来查看它们之间的差异。但请注意，中心值是唯一能够通过此挑战的值。 </section>
|
||||
<section id='instructions'>
|
||||
这个例子可以帮助你理解这个属性，在<code>#box-container</code>添加 CSS 属性<code>align-items</code>并将值设为 center。
|
||||
<strong>提示：</strong><br>在编辑器里试试<code>align-items</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>元素的<code>align-items</code>属性应设置为center的值。'
|
||||
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'
|
||||
- text: '<code>#box-container</code>元素应有<code>align-items</code>属性，其值应为 center。'
|
||||
testString: assert($('#box-container').css('align-items') == 'center', '<code>#box-container</code>元素应有<code>align-items</code>属性，其值应为 center。');
|
||||
|
||||
```
|
||||
|
||||
@ -35,7 +45,7 @@ tests:
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
@ -54,7 +64,6 @@ tests:
|
||||
<div id="box-1"><p>Hello</p></div>
|
||||
<div id="box-2"><p>Goodbye</p></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -66,7 +75,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">有时，flex容器中的flex项不会填充容器中的所有空间。通常希望告诉CSS如何以特定方式对齐和展开弹性项目。幸运的是， <code>justify-content</code>属性有几个选项可以做到这一点。但首先，在审查这些选项之前，需要了解一些重要的术语。 <a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">这是一个有用的图像，显示了一行来说明下面的概念。</a>回想一下，将flex容器设置为一行可以从左到右并排放置Flex项目。设置为列的弹性容器将弹性项目从上到下放置在垂直堆栈中。对于每个，柔性项目的排列方向称为<strong>主轴</strong> 。对于一行，这是一条切割每个项目的水平线。对于列，主轴是穿过项目的垂直线。如何沿着作为主轴的直线对弹性项目进行间隔有几种选择。其中最常用的是<code>justify-content: center;</code> ，将所有弹性项目对齐到Flex容器内的中心。其他选择包括： <ul><li> <code>flex-start</code> ：将项目对齐到Flex容器的开头。对于一行，这会将项目推送到容器的左侧。对于列，这会将项目推送到容器的顶部。 </li><li> <code>flex-end</code> ：将项目对齐到Flex容器的末尾。对于一行，这会将项目推送到容器的右侧。对于列，这会将项目推送到容器的底部。 </li><li> <code>space-between</code> ：将项目与主轴的中心对齐，在项目之间放置额外的空间。第一个和最后一个项目被推送到Flex容器的最边缘。例如，在第一项中，第一项是在容器的左侧，最后一项是在容器的右侧，然后它们之间的其他项是均匀间隔的。 </li><li> <code>space-around</code> ：类似于<code>space-between</code>但是第一个和最后一个项目没有锁定到容器的边缘，空间分布在所有项目周围</li></ul></section>
|
||||
<section id='description'>
|
||||
flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。幸运的是，我们可以通过<code>justify-content</code>属性的不同的值来实现。在介绍<code>justify-content</code>的可选值之前，我们要先理解一些重要术语。
|
||||
<a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">这张图片的元素横着排列，很好地描述了下面的概念。</a>
|
||||
回忆一下，把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 <strong>main axis（主轴）</strong>。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。
|
||||
关于 flex 子元素在主轴的排列方式，可以选择以下值：其中一个很常用的是<code>justify-content: center;</code>，使 flex 子元素在 flex 容器中居中排列。其他可选值还有：
|
||||
|
||||
<ul><li><code>flex-start</code>：从 flex 容器的起始位置开始排列项目。对行来说是把项目移至左边，对于列是把项目移至顶部。如未设置<code>justify-content</code>的值，那么默认值是<code>flex-start</code>。</li><li><code>flex-end</code>：从 flex 容器的终止位置开始排列项目。对行来说是把项目移至右边，对于列是把项目移至底部。</li><li><code>space-between</code>：项目间保留一定间距地沿主轴居中排列。第一个和最后一个项目被放置在容器边沿。例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。</li><li><code>space-around</code>：与<code>space-between</code>相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。</li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">一个示例有助于显示此属性的运行情况。将CSS属性<code>justify-content</code>添加到<code>#box-container</code>元素，并为其赋值为center。 <strong>奖金</strong> <br>在代码编辑器中尝试使用<code>justify-content</code>属性的其他选项来查看它们之间的差异。但请注意，中心值是唯一能够通过此挑战的值。 </section>
|
||||
<section id='instructions'>
|
||||
这个例子可以帮助你理解这个属性，在<code>#box-container</code>元素添加 CSS 属性<code>justify-content</code>，其值为 center。
|
||||
<strong>提示：</strong><br>在编辑器里试试<code>justify-content</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>元素应该将<code>justify-content</code>属性设置为center的值。'
|
||||
testString: 'assert($("#box-container").css("justify-content") == "center", "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.");'
|
||||
- text: '<code>#box-container</code>应有<code>justify-content</code>属性，其值应为 center。'
|
||||
testString: assert($('#box-container').css('justify-content') == 'center', '<code>#box-container</code>应有<code>justify-content</code>属性，其值应为 center。');
|
||||
|
||||
```
|
||||
|
||||
@ -35,7 +46,7 @@ tests:
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
@ -54,7 +65,6 @@ tests:
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -66,7 +76,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description"> tweet嵌入<code>header</code>和<code>footer</code>先前使用了<code>flex-direction</code>属性和行值。同样， <code>.profile-name</code>元素中的项目可以很好地堆叠为列。 </section>
|
||||
<section id='description'>
|
||||
在上一个挑战中，把嵌入推文的<code>header</code>和<code>footer</code>的<code>flex-direction</code>属性值设为 row（行）。相似地，把<code>.profile-name</code>选择器对应的元素竖着排列会好看一点。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>flex-direction</code>添加到标头的<code>.profile-name</code>元素，并将值设置为column。 </section>
|
||||
<section id='instructions'>
|
||||
在 header 的<code>.profile-name</code>元素添加 CSS 属性<code>flex-direction</code>，将其值设为 column。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>.profile-name</code>元素应将<code>flex-direction</code>属性设置为column。
|
||||
testString: 'assert($(".profile-name").css("flex-direction") == "column", "The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
- text: '<code>.profile-name</code>应有<code>flex-direction</code>属性，其值应为 column。'
|
||||
testString: assert($('.profile-name').css('flex-direction') == 'column', '<code>.profile-name</code>应有<code>flex-direction</code>属性，其值应为 column。');
|
||||
|
||||
```
|
||||
|
||||
@ -45,7 +50,7 @@ tests:
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
@ -118,7 +123,6 @@ tests:
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -130,7 +134,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description"> tweet嵌入示例中的<code>header</code>和<code>footer</code>具有可以使用<code>flex-direction</code>属性排列为行的子项。这告诉CSS水平对齐孩子。 </section>
|
||||
<section id='description'>
|
||||
嵌入推文示例中的<code>header</code>和<code>footer</code>有自己的子元素，使用<code>flex-direction</code>属性可以把这些子元素排成行。这个属性告诉 CSS 需要将这些子元素水平排列。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>flex-direction</code>添加到<code>header</code>和<code>footer</code> ，并将值设置为row。 </section>
|
||||
<section id='instructions'>
|
||||
为<code>header</code>和<code>footer</code>添加 CSS 属性<code>flex-direction</code>并把值设为 row。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>header</code>应该将<code>flex-direction</code>属性设置为row。
|
||||
testString: 'assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>header</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
- text: <code>footer</code>应将<code>flex-direction</code>属性设置为row。
|
||||
testString: 'assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>footer</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
- text: '<code>header</code>应有<code>flex-direction</code>属性，其值应为 row。'
|
||||
testString: 'assert(code.match(/header\s*?{\s*?.*?\s*?.*?\s*?flex-direction:\s*?row;/g), ''<code>header</code>应有<code>flex-direction</code>属性，其值应为 row。'');'
|
||||
- text: '<code>footer</code>应有<code>flex-direction</code>属性，其值应为 row。'
|
||||
testString: 'assert(code.match(/footer\s*?{\s*?.*?\s*?.*?\s*?flex-direction:\s*?row;/g), ''<code>footer</code>应有<code>flex-direction</code>属性，其值应为 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:
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -135,7 +139,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">本节使用交替挑战样式来展示如何使用CSS以灵活的方式定位元素。首先，挑战将解释理论，然后使用简单推文组件的实际挑战将应用flexbox概念。放置CSS属性<code>display: flex;</code>在元素上允许您使用其他flex属性来构建响应式页面。 </section>
|
||||
<section id='description'>
|
||||
这节会使用一种不同的挑战方式来学习一下如何使用 CSS 更灵活地布局元素。首先通过一个挑战来理解原理，然后通过操作一个简单的推文组件来应用“弹性盒子”（flexbox）。
|
||||
只要在一个元素的 CSS 中添加<code>display: flex;</code>，就可以使用其它 flex 属性来构建响应式页面了。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>display</code>添加到<code>#box-container</code>并将其值设置为flex。 </section>
|
||||
<section id='instructions'>
|
||||
为<code>#box-container</code>添加<code>display</code>属性，设置其值为 flex。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>应将<code>display</code>属性设置为flex值。'
|
||||
testString: 'assert($("#box-container").css("display") == "flex", "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.");'
|
||||
- text: '<code>#box-container</code>应有<code>display</code>属性，其值应为 flex。'
|
||||
testString: assert($('#box-container').css('display') == 'flex', '<code>#box-container</code>应有<code>display</code>属性，其值应为 flex。');
|
||||
|
||||
```
|
||||
|
||||
@ -33,28 +39,25 @@ tests:
|
||||
<style>
|
||||
#box-container {
|
||||
height: 500px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -66,7 +69,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">最后一个挑战引入了<code>align-items</code>属性并举了一个例子。此属性可应用于一些tweet嵌入元素，以对齐其中的flex项。 </section>
|
||||
<section id='description'>
|
||||
上一个挑战介绍了<code>align-items</code>属性并给出了例子。可以对嵌入推文的一些元素使用这个属性，以调整其中 flex 子元素的位置。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>align-items</code>添加到标题的<code>.follow-btn</code>元素中。将值设置为居中。 </section>
|
||||
<section id='instructions'>
|
||||
在 header 的<code>.follow-btn</code>添加 CSS 属性<code>align-items</code>，把值设为 center。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>.follow-btn</code>元素应将<code>align-items</code>属性设置为center的值。
|
||||
testString: 'assert($(".follow-btn").css("align-items") == "center", "The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.");'
|
||||
- text: '<code>.follow-btn</code>应有<code>align-items</code>属性，其值应为 center.'
|
||||
testString: assert($('.follow-btn').css('align-items') == 'center', '<code>.follow-btn</code>应有<code>align-items</code>属性，其值应为 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:
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -133,7 +136,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description"> flex项的最终属性是<code>align-self</code> 。此属性允许您单独调整每个项目的对齐方式，而不是一次性设置它们。这很有用，因为使用CSS属性<code>float</code> ， <code>clear</code>和<code>vertical-align</code>其他常用调整技术对flex项不起作用。 <code>align-self</code>接受与<code>align-items</code>相同的值，并将覆盖<code>align-items</code>属性设置的任何值。 </section>
|
||||
<section id='description'>
|
||||
flex 子项目的最后一个属性是<code>align-self</code>。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为<code>float</code>、<code>clear</code>和<code>vertical-align</code>等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。
|
||||
<code>align-self</code>可设置的值与<code>align-items</code>的一样，并且它会覆盖<code>align-items</code>的值。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>align-self</code>添加到<code>#box-1</code>和<code>#box-2</code> 。给<code>#box-1</code>一个中心值，给<code>#box-2</code>一个flex-end值。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>align-self</code>。<code>#box-1</code>设为 center，<code>#box-2</code>设为 flex-end。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应将<code>align-self</code>属性设置为center的值。'
|
||||
testString: 'assert($("#box-1").css("align-self") == "center", "The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.");'
|
||||
- text: '<code>#box-2</code>元素应该将<code>align-self</code>属性设置为flex-end的值。'
|
||||
testString: 'assert($("#box-2").css("align-self") == "flex-end", "The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.");'
|
||||
- text: '<code>#box-1</code>元素应有<code>align-self</code>属性，其值应为 center。'
|
||||
testString: assert($('#box-1').css('align-self') == 'center', '<code>#box-1</code>元素应有<code>align-self</code>属性，其值应为 center。');
|
||||
- text: '<code>#box-2</code>元素应有<code>align-self</code>属性，其值应为 flex-end。'
|
||||
testString: assert($('#box-2').css('align-self') == 'flex-end', '<code>#box-2</code>元素应有<code>align-self</code>属性，其值应为 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:
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -68,7 +73,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description"> <code>flex-basis</code>属性指定CSS在使用<code>flex-shrink</code>或<code>flex-grow</code>进行调整之前的项的初始大小。 <code>flex-basis</code>属性使用的单位与其他大小属性（ <code>px</code> ， <code>em</code> ， <code>%</code>等）相同。该值根据内容<code>auto</code>项目大小。 </section>
|
||||
<section id='description'>
|
||||
<code>flex-basis</code>属性定义了在使用 CSS 的<code>flex-shrink</code>或<code>flex-grow</code>属性对项目进行调整前，项目的初始大小。
|
||||
<code>flex-basis</code>属性的单位与其他表示尺寸的属性的单位一致（<code>px</code>、<code>em</code>、<code>%</code>等）。如果值为<code>auto</code>，则项目的尺寸随内容调整。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>flex-basis</code>设置框的初始大小。将CSS属性<code>flex-basis</code>添加到<code>#box-1</code>和<code>#box-2</code> 。给<code>#box-1</code>一个值为<code>10em</code> ， <code>#box-2</code>给一个值为<code>20em</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
使用<code>flex-basis</code>为盒子设置初始值。给<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-basis</code>。设置<code>#box-1</code>的尺寸初始值为<code>10em</code>，<code>#box-2</code>的尺寸初始值为<code>20em</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应该具有<code>flex-basis</code>属性。'
|
||||
testString: 'assert($("#box-1").css("flex-basis") != "auto", "The <code>#box-1</code> element should have a <code>flex-basis</code> property.");'
|
||||
- text: '<code>#box-1</code>元素的<code>flex-basis</code>值应为<code>10em</code> 。'
|
||||
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.");'
|
||||
- text: '<code>#box-2</code>元素应该具有<code>flex-basis</code>属性。'
|
||||
testString: 'assert($("#box-2").css("flex-basis") != "auto", "The <code>#box-2</code> element should have the <code>flex-basis</code> property.");'
|
||||
- text: '<code>#box-2</code>元素的<code>flex-basis</code>值应为<code>20em</code> 。'
|
||||
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.");'
|
||||
- text: '<code>#box-1</code>元素应有<code>flex-basis</code>属性。'
|
||||
testString: assert($('#box-1').css('flex-basis') != 'auto', '<code>#box-1</code>元素应有<code>flex-basis</code>属性。');
|
||||
- text: '<code>#box-1</code>的<code>flex-basis</code>应为<code>10em</code>。'
|
||||
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), ''<code>#box-1</code>的<code>flex-basis</code>应为<code>10em</code>。'');'
|
||||
- text: '<code>#box-2</code>元素应有<code>flex-basis</code>属性。'
|
||||
testString: assert($('#box-2').css('flex-basis') != 'auto', '<code>#box-2</code>元素应有<code>flex-basis</code>属性。');
|
||||
- text: '<code>#box-2</code>的<code>flex-basis</code>应为<code>20em</code>。'
|
||||
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), ''<code>#box-2</code>的<code>flex-basis</code>应为<code>20em</code>。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -41,25 +47,24 @@ tests:
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -71,7 +76,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">最后两个挑战使用了<code>flex-direction</code>属性设置为row。此属性还可以通过垂直堆叠Flex容器的子项来创建列。 </section>
|
||||
<section id='description'>
|
||||
之前两个挑战使用<code>flex-direction</code>属性创建行（row）。这个属性还能创建一个列，让子元素垂直排列在 flex 容器中。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>flex-direction</code>添加到<code>#box-container</code>元素，并为其赋值column。 </section>
|
||||
<section id='instructions'>
|
||||
给<code>#box-container</code>元素添加 CSS 属性<code>flex-direction</code>，赋值为 column。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>元素应该将<code>flex-direction</code>属性设置为column。'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "column", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
- text: '<code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 column。'
|
||||
testString: assert($('#box-container').css('flex-direction') == 'column', '<code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 column。');
|
||||
|
||||
```
|
||||
|
||||
@ -34,7 +39,7 @@ tests:
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
@ -53,7 +58,6 @@ tests:
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -65,7 +69,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">添加<code>display: flex</code> to a element将其转换为flex容器。这使得可以将该元素的任何子节点对齐成行或列。您可以通过将<code>flex-direction</code>属性添加到父项并将其设置为行或列来完成此操作。创建行将水平对齐子项，创建列将垂直对齐子项。 <code>flex-direction</code>其他选项是row-reverse和column-reverse。 <strong>注意</strong> <br> <code>flex-direction</code>属性的默认值为row。 </section>
|
||||
<section id='description'>
|
||||
给元素添加<code>display: flex</code>属性使其变成 flex 容器。只要给父元素添加<code>flex-direction</code>属性，并把属性值设置为 row 或 column，即可横排或竖排它的子元素。设为 row 可以让子元素水平排列，设为 column 可以让子元素垂直排列。
|
||||
<code>flex-direction</code>的其他可选值还有 row-reverse 和 column-reverse。
|
||||
<strong>注意</strong><br><code>flex-direction</code>的默认值为 row。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>flex-direction</code>添加到<code>#box-container</code>元素，并为其赋值row-reverse。 </section>
|
||||
<section id='instructions'>
|
||||
为<code>#box-container</code>添加 CSS 属性<code>flex-direction</code>，其值设为 row-reverse。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>元素的<code>flex-direction</code>属性应设置为row-reverse。'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "row-reverse", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.");'
|
||||
- text: '<code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 row-reverse。'
|
||||
testString: assert($('#box-container').css('flex-direction') == 'row-reverse', '<code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 row-reverse。');
|
||||
|
||||
```
|
||||
|
||||
@ -34,7 +41,7 @@ tests:
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
@ -53,7 +60,6 @@ tests:
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -65,7 +71,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">与<code>flex-shrink</code>相反的是<code>flex-grow</code>属性。回想一下，当容器缩小时， <code>flex-shrink</code>控制项目的大小。当父容器展开时， <code>flex-grow</code>属性控制项的大小。使用上一个挑战中的类似示例，如果一个项目的<code>flex-grow</code>值为1而另一个项目的<code>flex-grow</code>值为3，则值为3的项目将增长为另一个项目的三倍。 </section>
|
||||
<section id='description'>
|
||||
与<code>flex-shrink</code>相对的是<code>flex-grow</code>。你应该还记得，<code>flex-shrink</code>会在容器太小时对元素作出调整。相应地，<code>flex-grow</code>会在容器太大时对元素作出调整。
|
||||
例子与上一个挑战相似，如果一个项目的<code>flex-grow</code>属性值为 1，另一个项目的<code>flex-grow</code>属性值为 3，那么后者会较前者扩大三倍。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>flex-grow</code>添加到<code>#box-1</code>和<code>#box-2</code> 。将<code>#box-1</code>的值设为1，将<code>#box-2</code>的值设为2。 </section>
|
||||
<section id='instructions'>
|
||||
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-grow</code>，<code>#box-1</code>的值设为 1，<code>#box-2</code>的值设为 2。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应将<code>flex-grow</code>属性设置为值1。'
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "1", "The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.");'
|
||||
- text: '<code>#box-2</code>元素应将<code>flex-grow</code>属性设置为值2。'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "2", "The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.");'
|
||||
- text: '<code>#box-1</code>元素应有<code>flex-grow</code>属性，其值应为 1。'
|
||||
testString: assert($('#box-1').css('flex-grow') == '1', '<code>#box-1</code>元素应有<code>flex-grow</code>属性，其值应为 1。');
|
||||
- text: '<code>#box-2</code>元素应有<code>flex-grow</code>属性，其值应为 2。'
|
||||
testString: assert($('#box-2').css('flex-grow') == '2', '<code>#box-2</code>元素应有<code>flex-grow</code>属性，其值应为 2。');
|
||||
|
||||
```
|
||||
|
||||
@ -37,17 +43,17 @@ tests:
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -55,7 +61,6 @@ tests:
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -67,7 +72,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">有一个快捷方式可以同时设置多个flex属性。通过使用<code>flex</code>属性，可以将<code>flex-grow</code> ， <code>flex-shrink</code>和<code>flex-basis</code>属性设置在一起。例如， <code>flex: 1 0 10px;</code>将项目设置为<code>flex-grow: 1;</code> ， <code>flex-shrink: 0;</code> ，和<code>flex-basis: 10px;</code> 。默认属性设置为<code>flex: 0 1 auto;</code> 。 </section>
|
||||
<section id='description'>
|
||||
上面几个 flex 属性有一个简写方式。<code>flex-grow</code>、<code>flex-shrink</code>和<code>flex-basis</code>属性可以在<code>flex</code>中一同设置。
|
||||
例如，<code>flex: 1 0 10px;</code>会把项目属性设为<code>flex-grow: 1;</code>、<code>flex-shrink: 0;</code>以及<code>flex-basis: 10px;</code>。
|
||||
属性的默认设置是<code>flex: 0 1 auto;</code>。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>flex</code>添加到<code>#box-1</code>和<code>#box-2</code> 。给<code>#box-1</code>赋值，使<code>flex-grow</code>为2， <code>flex-shrink</code>为2， <code>flex-basis</code>为150px。给<code>#box-2</code>赋值，使<code>flex-grow</code>为1， <code>flex-shrink</code>为1，其<code>flex-basis</code>为150px。这些值将导致<code>#box-1</code>增长以在容器大于300px时以<code>#box-2</code>两倍速率填充额外空间，并在容器小于300px时以<code>#box-2</code>的速率缩小两倍。 300px是两个框的<code>flex-basis</code>值的组合大小。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>#box-1</code>和<code>#box-2</code>添加<code>flex</code>属性。为<code>#box-1</code>设置<code>flex-grow</code>属性值为 2，<code>flex-shrink</code>属性值为 2，<code>flex-basis</code>属性值为 150px。为<code>#box-2</code>设置<code>flex-grow</code>属性值为 1，<code>flex-shrink</code>属性值为 1，<code>flex-basis</code>属性值为 150px。
|
||||
通过上面的设置，在容器大于 300px 时，<code>#box-1</code>扩大的空间是<code>#box-2</code>扩大空间的两倍；在容器小于 300px 时，<code>#box-1</code>缩小的空间<code>#box-2</code>缩小空间的两倍。300px 是两个盒子的<code>flex-basis</code>的值之和。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素的<code>flex</code>属性应设置为2 2 150px。'
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");'
|
||||
- text: '<code>#box-2</code>元素的<code>flex</code>属性应设置为1 1 150px。'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");'
|
||||
- text: '您的代码应该使用<code>#box-1</code>和<code>#box-2</code>的<code>flex</code>属性。'
|
||||
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");'
|
||||
- text: '<code>#box-1</code>元素应有<code>flex</code>属性，其值应为 2 2 150px。'
|
||||
testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', '<code>#box-1</code>元素应有<code>flex</code>属性，其值应为 2 2 150px。');
|
||||
- text: '<code>#box-2</code>元素应有<code>flex</code>属性，其值应为 1 1 150px。'
|
||||
testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', '<code>#box-2</code>元素应有<code>flex</code>属性，其值应为 1 1 150px。');
|
||||
- text: '应对<code>#box-1</code>和<code>#box-2</code>使用<code>flex</code>属性。'
|
||||
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, ''应对<code>#box-1</code>和<code>#box-2</code>使用<code>flex</code>属性。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -41,13 +49,13 @@ tests:
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
@ -56,7 +64,6 @@ tests:
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -68,7 +75,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">到目前为止，挑战中的所有属性都适用于Flex容器（flex项的父级）。但是，flex项有几个有用的属性。第一个是<code>flex-shrink</code>属性。当它被使用时，如果柔性容器太小，它允许物品收缩。当父容器的宽度小于其中所有flex项的组合宽度时，项会收缩。 <code>flex-shrink</code>属性将数字作为值。数字越大，与容器中的其他项目相比，它将收缩得越多。例如，如果一个项目的<code>flex-shrink</code>值为1而另一个项目的<code>flex-shrink</code>值为3，则值为3的项目将缩小为另一个项目的三倍。 </section>
|
||||
<section id='description'>
|
||||
目前为止，挑战里的提到的属性都应用于 flex 容器（flex 子元素的父元素）。除此之外，flex 子元素也有很多实用属性。
|
||||
首先介绍的是<code>flex-shrink</code>属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。
|
||||
项目的<code>flex-shrink</code>属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的<code>flex-shrink</code>属性值为 1 ，另一个项目的<code>flex-shrink</code>属性值为 3，那么后者相比前者会受到 3 倍压缩。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>flex-shrink</code>添加到<code>#box-1</code>和<code>#box-2</code> 。将<code>#box-1</code>的值设为1，将<code>#box-2</code>的值设为2。 </section>
|
||||
<section id='instructions'>
|
||||
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-shrink</code>，<code>#box-1</code>的值设为 1，<code>#box-2</code>的值设为 2。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应将<code>flex-shrink</code>属性设置为值1。'
|
||||
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");'
|
||||
- text: '<code>#box-2</code>元素的<code>flex-shrink</code>属性应设置为值2。'
|
||||
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");'
|
||||
- text: '<code>#box-1</code>元素应有<code>flex-shrink</code>属性，其值应为 1.'
|
||||
testString: assert($('#box-1').css('flex-shrink') == '1', '<code>#box-1</code>元素应有<code>flex-shrink</code>属性，其值应为 1.');
|
||||
- text: '<code>#box-2</code>元素应有<code>flex-shrink</code>属性，其值应为 2.'
|
||||
testString: assert($('#box-2').css('flex-shrink') == '2', '<code>#box-2</code>元素应有<code>flex-shrink</code>属性，其值应为 2.');
|
||||
|
||||
```
|
||||
|
||||
@ -41,14 +48,14 @@ tests:
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -56,7 +63,6 @@ tests:
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -68,7 +74,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description"> CSS flexbox具有将flex项分割为多行（或列）的功能。默认情况下，Flex容器将所有Flex项目放在一起。例如，一行将全部在一行上。但是，使用<code>flex-wrap</code>属性，它会告诉CSS包装项目。这意味着额外的项目将移动到新的行或列中。包装发生的断点取决于物品的大小和容器的大小。 CSS还有包装方向的选项： <ul><li> <code>nowrap</code> ：这是默认设置，不包装项目。 </li><li> <code>wrap</code> ：如果项目在一行中，则从左到右包装，如果它们在列中，则从上到下包装。 </li><li> <code>wrap-reverse</code> ：如果项目在一行中，则从下到上包装项目;如果它们在列中，则从右到左包装。 </li></ul></section>
|
||||
<section id='description'>
|
||||
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。
|
||||
不过，使用<code>flex-wrap</code>属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。
|
||||
换行方向的可选值有这些：
|
||||
<ul><li><code>nowrap</code>：默认值，不换行。</li><li><code>wrap</code>：行从上到下排，列从左到又排。</li><li><code>wrap-reverse</code>：行从下到上排，列从左到右排。</li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">当前布局对于一行有太多的框。将CSS属性<code>flex-wrap</code>添加到<code>#box-container</code>元素，并为其赋值wrap。 </section>
|
||||
<section id='instructions'>
|
||||
现在的布局一行里面元素太多了，在<code>#box-container</code>元素添加 CSS 属性<code>flex-wrap</code>，把值设为 wrap。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>元素应该将<code>flex-wrap</code>属性设置为wrap值。'
|
||||
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
|
||||
- text: '<code>#box-container</code>元素应有<code>flex-wrap</code>属性，其值应为 wrap。'
|
||||
testString: assert($('#box-container').css('flex-wrap') == 'wrap', '<code>#box-container</code>元素应有<code>flex-wrap</code>属性，其值为 wrap。');
|
||||
|
||||
```
|
||||
|
||||
@ -35,7 +43,7 @@ tests:
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
@ -78,7 +86,6 @@ tests:
|
||||
<div id="box-5"></div>
|
||||
<div id="box-6"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -90,7 +97,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description">最后一项挑战展示了一个<code>justify-content</code>属性的例子。对于tweet嵌入，可以应用此属性来对齐<code>.profile-name</code>元素中的项目。 </section>
|
||||
<section id='description'>
|
||||
上一项挑战展示了<code>justify-content</code>属性的作用。如果我们想对齐推文内的子元素，可以把<code>justify-content</code>应用在<code>.profile-name</code>上。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>justify-content</code>添加到标头的<code>.profile-name</code>元素，并将值设置为上一个挑战中的任何选项。 </section>
|
||||
<section id='instructions'>
|
||||
在 header 的<code>.profile-name</code>元素添加 CSS 属性<code>justify-content</code>，把它的值设为上面挑战提到的任意可用值。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>.profile-name</code>元素应将<code>justify-content</code>属性设置为以下任何值：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 <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, space-around, or space-evenly.");'
|
||||
- text: '<code>.profile-name</code>元素的<code>justify-content</code>属性可选以下值：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), ''<code>.profile-name</code>元素的<code>justify-content</code>属性可选以下值：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:
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -131,7 +135,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="description"> <code>order</code>属性用于告诉CSS Flex项目在Flex容器中的显示顺序。默认情况下，项目将以与源HTML相同的顺序显示。该属性将数字作为值，可以使用负数。 </section>
|
||||
<section id='description'>
|
||||
<code>order</code>属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将CSS属性<code>order</code>添加到<code>#box-1</code>和<code>#box-2</code> 。给<code>#box-1</code>一个值2，给<code>#box-2</code>一个值1。 </section>
|
||||
<section id='instructions'>
|
||||
给<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>order</code>，<code>#box-1</code>的<code>order</code>属性值设为 2，<code>#box-2</code>的<code>order</code>属性值设为 1。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素的<code>order</code>属性应设置为值2。'
|
||||
testString: 'assert($("#box-1").css("order") == "2", "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.");'
|
||||
- text: '<code>#box-2</code>元素应该将<code>order</code>属性设置为值1。'
|
||||
testString: 'assert($("#box-2").css("order") == "1", "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.");'
|
||||
- text: '<code>#box-1</code>元素应有<code>order</code>属性，其值应为 2。'
|
||||
testString: assert($('#box-1').css('order') == '2', '<code>#box-1</code>元素应有<code>order</code>属性，其值应为 2。');
|
||||
- text: '<code>#box-2</code>元素应有<code>order</code>属性，其值应为 1。'
|
||||
testString: assert($('#box-2').css('order') == '1', '<code>#box-2</code>元素应有<code>order</code>属性，其值应为 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:
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -68,7 +72,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user