chore(learn): Applied MDX format to Chinese curriculum files (#40462)
This commit is contained in:
Randell Dawson
GitHub
@ -1,155 +1,64 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: 在推文中添加弹性盒子布局
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
|
||||
forumTopicId: 301100
|
||||
title: 在推文中添加弹性盒子布局
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
我们以右边的嵌入推文为例。一些元素换一个布局方式或许更好看。上一个挑战演示了<code>display: flex</code>，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<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>
|
||||
我们以右边的嵌入推文为例。一些元素换一个布局方式或许更好看。上一个挑战演示了`display: flex`，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>header</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('header').css('display') == 'flex');
|
||||
- text: <code>footer</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('footer').css('display') == 'flex');
|
||||
- text: <code>h3</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('h3').css('display') == 'flex');
|
||||
- text: <code>h4</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('h4').css('display') == 'flex');
|
||||
- text: <code>.profile-name</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('.profile-name').css('display') == 'flex');
|
||||
- text: <code>.follow-btn</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('.follow-btn').css('display') == 'flex');
|
||||
- text: <code>.stats</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('.stats').css('display') == 'flex');
|
||||
为下列项目添加 CSS 属性`display: flex`。注意，CSS 选择器已写好：
|
||||
|
||||
`header`、header 的`.profile-name`、header 的`.follow-btn`、header 的`h3`和`h4`、`footer`以及 footer 的`.stats`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`header`的`display`属性应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('header').css('display') == 'flex');
|
||||
```
|
||||
|
||||
</section>
|
||||
`footer`的`display`属性应为 `flex`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```js
|
||||
assert($('footer').css('display') == 'flex');
|
||||
```
|
||||
|
||||
</div>
|
||||
`h3`的`display`属性应为 `flex`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h3').css('display') == 'flex');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`h4`的`display`属性应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('h4').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`.profile-name`的`display`属性应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`.follow-btn`的`display`属性应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`.stats`的`display`属性应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('.stats').css('display') == 'flex');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,82 +1,37 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: 使用 align-items 属性对齐元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
|
||||
forumTopicId: 301101
|
||||
title: 使用 align-items 属性对齐元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>的可选值包括：
|
||||
# --description--
|
||||
|
||||
`align-items`属性与`justify-content`类似。回忆一下，`justify-content`属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。
|
||||
|
||||
Flex 容器中，与主轴垂直的叫做 **cross axis（交叉轴）**。行的交叉轴是垂直的，列的交叉轴是水平的。
|
||||
|
||||
使用 CSS 中的`align-items`属性定义 flex 子元素沿交叉轴的对齐方式，对行来说，将行中的项目在容器中往上或往下移动；对列来说，将列中的项目在容器中往左或往右移动。
|
||||
|
||||
`align-items`的可选值包括：
|
||||
|
||||
<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'>
|
||||
这个例子可以帮助你理解这个属性，在<code>#box-container</code>添加 CSS 属性<code>align-items</code>并将值设为 center。
|
||||
<strong>提示：</strong><br>在编辑器里试试<code>align-items</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 <code>center</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
这个例子可以帮助你理解这个属性，在`#box-container`添加 CSS 属性`align-items`并将值设为 center。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-container</code>元素应有<code>align-items</code>属性，其值应为 <code>center</code>。
|
||||
testString: assert($('#box-container').css('align-items') == 'center');
|
||||
**提示：**
|
||||
在编辑器里试试`align-items`的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`元素应有`align-items`属性，其值应为 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('align-items') == 'center');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 200px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 200px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"><p>Hello</p></div>
|
||||
<div id="box-2"><p>Goodbye</p></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,83 +1,37 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: 使用 justify-content 属性对齐元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
|
||||
forumTopicId: 301102
|
||||
title: 使用 justify-content 属性对齐元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<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 容器中居中排列。其他可选值还有：
|
||||
# --description--
|
||||
|
||||
flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。幸运的是，我们可以通过`justify-content`属性的不同的值来实现。在介绍`justify-content`的可选值之前，我们要先理解一些重要术语。
|
||||
|
||||
[这张图片的元素横着排列，很好地描述了下面的概念。](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
|
||||
回忆一下，把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 **main axis（主轴）**。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。
|
||||
|
||||
关于 flex 子元素在主轴的排列方式，可以选择以下值：其中一个很常用的是`justify-content: center;`，使 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'>
|
||||
这个例子可以帮助你理解这个属性，在<code>#box-container</code>元素添加 CSS 属性<code>justify-content</code>，其值为 <code>center</code>。
|
||||
<strong>提示：</strong><br>在编辑器里试试<code>justify-content</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 <code>center</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
这个例子可以帮助你理解这个属性，在`#box-container`元素添加 CSS 属性`justify-content`，其值为 `center`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-container</code>应有<code>justify-content</code>属性，其值应为 <code>center</code>。
|
||||
testString: assert($('#box-container').css('justify-content') == 'center');
|
||||
**提示：**
|
||||
在编辑器里试试`justify-content`的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`应有`justify-content`属性，其值应为 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('justify-content') == 'center');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,141 +1,26 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: 使用 flex-direction 在嵌入推文中创建一列
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
|
||||
forumTopicId: 301103
|
||||
title: 使用 flex-direction 在嵌入推文中创建一列
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在上一个挑战中，把嵌入推文的<code>header</code>和<code>footer</code>的<code>flex-direction</code>属性值设为 row（行）。相似地，把<code>.profile-name</code>选择器对应的元素竖着排列会好看一点。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在 header 的<code>.profile-name</code>元素添加 CSS 属性<code>flex-direction</code>，将其值设为 column。
|
||||
</section>
|
||||
在上一个挑战中，把嵌入推文的`header`和`footer`的`flex-direction`属性值设为 row（行）。相似地，把`.profile-name`选择器对应的元素竖着排列会好看一点。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>.profile-name</code>应有<code>flex-direction</code>属性，其值应为 column。'
|
||||
testString: assert($('.profile-name').css('flex-direction') == 'column');
|
||||
在 header 的`.profile-name`元素添加 CSS 属性`flex-direction`，将其值设为 column。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.profile-name`应有`flex-direction`属性，其值应为 column。
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('flex-direction') == 'column');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,146 +1,32 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: 使用 flex-direction 在嵌入推文中创建多行
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
|
||||
forumTopicId: 301104
|
||||
title: 使用 flex-direction 在嵌入推文中创建多行
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
嵌入推文示例中的<code>header</code>和<code>footer</code>有自己的子元素，使用<code>flex-direction</code>属性可以把这些子元素排成行。这个属性告诉 CSS 需要将这些子元素水平排列。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为<code>header</code>和<code>footer</code>添加 CSS 属性<code>flex-direction</code>并把值设为 row。
|
||||
</section>
|
||||
嵌入推文示例中的`header`和`footer`有自己的子元素，使用`flex-direction`属性可以把这些子元素排成行。这个属性告诉 CSS 需要将这些子元素水平排列。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>header</code>应有<code>flex-direction</code>属性，其值应为 row。'
|
||||
testString: assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
- text: '<code>footer</code>应有<code>flex-direction</code>属性，其值应为 row。'
|
||||
testString: assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
为`header`和`footer`添加 CSS 属性`flex-direction`并把值设为 row。
|
||||
|
||||
# --hints--
|
||||
|
||||
`header`应有`flex-direction`属性，其值应为 row。
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
`footer`应有`flex-direction`属性，其值应为 row。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,76 +1,28 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: '使用 display: flex 定位两个盒子'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
|
||||
forumTopicId: 301105
|
||||
title: '使用 display: flex 定位两个盒子'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
这节会使用一种不同的挑战方式来学习一下如何使用 CSS 更灵活地布局元素。首先通过一个挑战来理解原理，然后通过操作一个简单的推文组件来应用“弹性盒子”（flexbox）。
|
||||
只要在一个元素的 CSS 中添加<code>display: flex;</code>，就可以使用其它 flex 属性来构建响应式页面了。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为<code>#box-container</code>添加<code>display</code>属性，设置其值为 <code>flex</code>。
|
||||
</section>
|
||||
只要在一个元素的 CSS 中添加`display: flex;`，就可以使用其它 flex 属性来构建响应式页面了。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-container</code>应有<code>display</code>属性，其值应为 <code>flex</code>。
|
||||
testString: assert($('#box-container').css('display') == 'flex');
|
||||
为`#box-container`添加`display`属性，设置其值为 `flex`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`应有`display`属性，其值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('display') == 'flex');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,143 +1,26 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: 在推文中使用 align-items 属性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
|
||||
forumTopicId: 301106
|
||||
title: 在推文中使用 align-items 属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
上一个挑战介绍了<code>align-items</code>属性并给出了例子。可以对嵌入推文的一些元素使用这个属性，以调整其中 flex 子元素的位置。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在 header 的<code>.follow-btn</code>添加 CSS 属性<code>align-items</code>，把值设为 center。
|
||||
</section>
|
||||
上一个挑战介绍了`align-items`属性并给出了例子。可以对嵌入推文的一些元素使用这个属性，以调整其中 flex 子元素的位置。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>.follow-btn</code>应有<code>align-items</code>属性，其值应为 <code>center</code>.
|
||||
testString: assert($('.follow-btn').css('align-items') == 'center');
|
||||
在 header 的`.follow-btn`添加 CSS 属性`align-items`，把值设为 center。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.follow-btn`应有`align-items`属性，其值应为 `center`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('align-items') == 'center');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,80 +1,34 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: 使用 align-self 属性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
|
||||
forumTopicId: 301107
|
||||
title: 使用 align-self 属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<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>设为 <code>flex-end</code>。
|
||||
</section>
|
||||
flex 子项目的最后一个属性是`align-self`。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为`float`、`clear`和`vertical-align`等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`align-self`可设置的值与`align-items`的一样，并且它会覆盖`align-items`的值。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-1</code>元素应有<code>align-self</code>属性，其值应为 <code>center</code>。
|
||||
testString: assert($('#box-1').css('align-self') == 'center');
|
||||
- text: <code>#box-2</code>元素应有<code>align-self</code>属性，其值应为 <code>flex-end</code>。
|
||||
testString: assert($('#box-2').css('align-self') == 'flex-end');
|
||||
# --instructions--
|
||||
|
||||
在`#box-1`和`#box-2`添加 CSS 属性`align-self`。`#box-1`设为 center，`#box-2`设为 `flex-end`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`align-self`属性，其值应为 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('align-self') == 'center');
|
||||
```
|
||||
|
||||
</section>
|
||||
`#box-2`元素应有`align-self`属性，其值应为 `flex-end`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```js
|
||||
assert($('#box-2').css('align-self') == 'flex-end');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,83 +1,46 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: 使用 flex-basis 属性设置项目的初始大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
|
||||
forumTopicId: 301108
|
||||
title: 使用 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>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<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>
|
||||
`flex-basis`属性定义了在使用 CSS 的`flex-shrink`或`flex-grow`属性对项目进行调整前，项目的初始大小。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`flex-basis`属性的单位与其他表示尺寸的属性的单位一致（`px`、`em`、`%`等）。如果值为`auto`，则项目的尺寸随内容调整。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应有<code>flex-basis</code>属性。'
|
||||
testString: assert($('#box-1').css('flex-basis') != 'auto');
|
||||
- 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));
|
||||
- text: '<code>#box-2</code>元素应有<code>flex-basis</code>属性。'
|
||||
testString: assert($('#box-2').css('flex-basis') != 'auto');
|
||||
- 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));
|
||||
# --instructions--
|
||||
|
||||
使用`flex-basis`为盒子设置初始值。给`#box-1`和`#box-2`添加 CSS 属性`flex-basis`。设置`#box-1`的尺寸初始值为`10em`，`#box-2`的尺寸初始值为`20em`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`flex-basis`属性。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
</section>
|
||||
`#box-1`的`flex-basis`应为`10em`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
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>
|
||||
```js
|
||||
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
```
|
||||
|
||||
</div>
|
||||
`#box-2`元素应有`flex-basis`属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('#box-2').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`#box-2`的`flex-basis`应为`20em`。
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,76 +1,26 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: 使用 flex-direction 属性创建一列
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
|
||||
forumTopicId: 301109
|
||||
title: 使用 flex-direction 属性创建一列
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
之前两个挑战使用<code>flex-direction</code>属性创建行（row）。这个属性还能创建一个列，让子元素垂直排列在 flex 容器中。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给<code>#box-container</code>元素添加 CSS 属性<code>flex-direction</code>，赋值为 <code>column</code>。
|
||||
</section>
|
||||
之前两个挑战使用`flex-direction`属性创建行（row）。这个属性还能创建一个列，让子元素垂直排列在 flex 容器中。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 column。
|
||||
testString: assert($('#box-container').css('flex-direction') == 'column');
|
||||
给`#box-container`元素添加 CSS 属性`flex-direction`，赋值为 `column`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`应有`flex-direction`属性，其值应为 column。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'column');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
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>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,78 +1,31 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: 使用 flex-direction 属性创建一行
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
forumTopicId: 301110
|
||||
title: 使用 flex-direction 属性创建一行
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为<code>#box-container</code>添加 CSS 属性<code>flex-direction</code>，其值设为 row-reverse。
|
||||
</section>
|
||||
给元素添加`display: flex`属性使其变成 flex 容器。只要给父元素添加`flex-direction`属性，并把属性值设置为 row 或 column，即可横排或竖排它的子元素。设为 row 可以让子元素水平排列，设为 column 可以让子元素垂直排列。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`flex-direction`的其他可选值还有 row-reverse 和 column-reverse。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 row-reverse。'
|
||||
testString: assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
**注意**
|
||||
`flex-direction`的默认值为 row。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为`#box-container`添加 CSS 属性`flex-direction`，其值设为 row-reverse。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`应有`flex-direction`属性，其值应为 row-reverse。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
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>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,79 +1,34 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: 使用 flex-grow 属性扩展项目
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
|
||||
forumTopicId: 1301111
|
||||
title: 使用 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>属性值为 <code>1</code>，另一个项目的<code>flex-grow</code>属性值为 <code>3</code>，那么后者会较前者扩大 3 倍。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-grow</code>，<code>#box-1</code>的值设为 <code>1</code>，<code>#box-2</code>的值设为 <code>2</code>。
|
||||
</section>
|
||||
与`flex-shrink`相对的是`flex-grow`。你应该还记得，`flex-shrink`会在容器太小时对元素作出调整。相应地，`flex-grow`会在容器太大时对元素作出调整。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
例子与上一个挑战相似，如果一个项目的`flex-grow`属性值为 `1`，另一个项目的`flex-grow`属性值为 `3`，那么后者会较前者扩大 3 倍。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-1</code>元素应有<code>flex-grow</code>属性，其值应为 <code>1</code>。
|
||||
testString: assert($('#box-1').css('flex-grow') == '1');
|
||||
- text: <code>#box-2</code>元素应有<code>flex-grow</code>属性，其值应为 <code>2</code>。
|
||||
testString: assert($('#box-2').css('flex-grow') == '2');
|
||||
# --instructions--
|
||||
|
||||
为`#box-1`和`#box-2`添加 CSS 属性`flex-grow`，`#box-1`的值设为 `1`，`#box-2`的值设为 `2`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`flex-grow`属性，其值应为 `1`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-grow') == '1');
|
||||
```
|
||||
|
||||
</section>
|
||||
`#box-2`元素应有`flex-grow`属性，其值应为 `2`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
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>
|
||||
```js
|
||||
assert($('#box-2').css('flex-grow') == '2');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,82 +1,52 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: 使用 flex 短方法属性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
|
||||
forumTopicId: 301112
|
||||
title: 使用 flex 短方法属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>#box-1</code>和<code>#box-2</code>添加<code>flex</code>属性。为<code>#box-1</code>设置<code>flex-grow</code>属性值为 <code>2</code>，<code>flex-shrink</code>属性值为 <code>2</code>，<code>flex-basis</code>属性值为 <code>150px</code>。为<code>#box-2</code>设置<code>flex-grow</code>属性值为 <code>1</code>，<code>flex-shrink</code>属性值为 <code>1</code>，<code>flex-basis</code>属性值为 <code>150px</code>。
|
||||
通过上面的设置，在容器大于 300px 时，<code>#box-1</code>扩大的空间是<code>#box-2</code>扩大空间的两倍；在容器小于 300px 时，<code>#box-1</code>缩小的空间<code>#box-2</code>缩小空间的两倍。300px 是两个盒子的<code>flex-basis</code>的值之和。
|
||||
</section>
|
||||
上面几个 flex 属性有一个简写方式。`flex-grow`、`flex-shrink`和`flex-basis`属性可以在`flex`中一同设置。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
例如，`flex: 1 0 10px;`会把项目属性设为`flex-grow: 1;`、`flex-shrink: 0;`以及`flex-basis: 10px;`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-1</code>元素应有<code>flex</code>属性，其值应为 <code>2 2 150px</code>。
|
||||
testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px');
|
||||
- text: <code>#box-2</code>元素应有<code>flex</code>属性，其值应为 <code>1 1 150px</code>。
|
||||
testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '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);
|
||||
属性的默认设置是`flex: 0 1 auto;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`#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`的值之和。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`flex`属性，其值应为 `2 2 150px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#box-1').css('flex-grow') == '2' &&
|
||||
$('#box-1').css('flex-shrink') == '2' &&
|
||||
$('#box-1').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
`#box-2`元素应有`flex`属性，其值应为 `1 1 150px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
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>
|
||||
```js
|
||||
assert(
|
||||
$('#box-2').css('flex-grow') == '1' &&
|
||||
$('#box-2').css('flex-shrink') == '1' &&
|
||||
$('#box-2').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
`#box-1`和`#box-2`应具有`flex`属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,81 +1,36 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: 使用 flex-shrink 属性收缩项目
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
|
||||
forumTopicId: 301113
|
||||
title: 使用 flex-shrink 属性收缩项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
目前为止，挑战里的提到的属性都应用于 flex 容器（flex 子元素的父元素）。除此之外，flex 子元素也有很多实用属性。
|
||||
首先介绍的是<code>flex-shrink</code>属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。
|
||||
项目的<code>flex-shrink</code>属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的<code>flex-shrink</code>属性值为 <code>1</code>，另一个项目的<code>flex-shrink</code>属性值为 <code>3</code>，那么后者相比前者会受到 <code>3</code> 倍压缩。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-shrink</code>，<code>#box-1</code>的值设为 <code>1</code>，<code>#box-2</code>的值设为 <code>2</code>。
|
||||
</section>
|
||||
首先介绍的是`flex-shrink`属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
项目的`flex-shrink`属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的`flex-shrink`属性值为 `1`，另一个项目的`flex-shrink`属性值为 `3`，那么后者相比前者会受到 `3` 倍压缩。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-1</code>元素应有<code>flex-shrink</code>属性，其值应为 <code>1</code>.
|
||||
testString: assert($('#box-1').css('flex-shrink') == '1');
|
||||
- text: <code>#box-2</code>元素应有<code>flex-shrink</code>属性，其值应为 <code>2</code>.
|
||||
testString: assert($('#box-2').css('flex-shrink') == '2');
|
||||
# --instructions--
|
||||
|
||||
为`#box-1`和`#box-2`添加 CSS 属性`flex-shrink`，`#box-1`的值设为 `1`，`#box-2`的值设为 `2`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`flex-shrink`属性，其值应为 `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-shrink') == '1');
|
||||
```
|
||||
|
||||
</section>
|
||||
`#box-2`元素应有`flex-shrink`属性，其值应为 `2`.
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```js
|
||||
assert($('#box-2').css('flex-shrink') == '2');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,104 +1,32 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: 使用 flex-wrap 属性包裹一行或一列
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
|
||||
forumTopicId: 301114
|
||||
title: 使用 flex-wrap 属性包裹一行或一列
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。
|
||||
不过，使用<code>flex-wrap</code>属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。
|
||||
|
||||
不过，使用`flex-wrap`属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。
|
||||
|
||||
换行方向的可选值有这些：
|
||||
|
||||
<ul><li><code>nowrap</code>：默认值，不换行。</li><li><code>wrap</code>：行从上到下排，列从左到又排。</li><li><code>wrap-reverse</code>：行从下到上排，列从左到右排。</li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
现在的布局一行里面元素太多了，在<code>#box-container</code>元素添加 CSS 属性<code>flex-wrap</code>，把值设为 <code>wrap</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
现在的布局一行里面元素太多了，在`#box-container`元素添加 CSS 属性`flex-wrap`，把值设为 `wrap`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-container</code>元素应有<code>flex-wrap</code>属性，其值应为 <code>wrap</code>。
|
||||
testString: assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
# --hints--
|
||||
|
||||
`#box-container`元素应有`flex-wrap`属性，其值应为 `wrap`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-3 {
|
||||
background-color: violet;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-4 {
|
||||
background-color: yellow;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-5 {
|
||||
background-color: green;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-6 {
|
||||
background-color: black;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
<div id="box-3"></div>
|
||||
<div id="box-4"></div>
|
||||
<div id="box-5"></div>
|
||||
<div id="box-6"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,142 +1,30 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: 在推文中使用 justify-content 属性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
|
||||
forumTopicId: 301115
|
||||
title: 在推文中使用 justify-content 属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
上一项挑战展示了<code>justify-content</code>属性的作用。如果我们想对齐推文内的子元素，可以把<code>justify-content</code>应用在<code>.profile-name</code>上。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在 header 的<code>.profile-name</code>元素添加 CSS 属性<code>justify-content</code>，把它的值设为上面挑战提到的任意可用值。
|
||||
</section>
|
||||
上一项挑战展示了`justify-content`属性的作用。如果我们想对齐推文内的子元素，可以把`justify-content`应用在`.profile-name`上。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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|space-evenly)\s*;/g));'
|
||||
在 header 的`.profile-name`元素添加 CSS 属性`justify-content`，把它的值设为上面挑战提到的任意可用值。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.profile-name`元素的`justify-content`属性可选以下值：center、flex-start、flex-end、space-between、space-around。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,79 +1,32 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: 使用 order 属性重新排列项目
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
||||
forumTopicId: 301116
|
||||
title: 使用 order 属性重新排列项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>order</code>属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>order</code>，<code>#box-1</code>的<code>order</code>属性值设为 <code>2</code>，<code>#box-2</code>的<code>order</code>属性值设为 <code>1</code>。
|
||||
</section>
|
||||
`order`属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>#box-1</code>元素应有<code>order</code>属性，其值应为 <code>2</code>。
|
||||
testString: assert($('#box-1').css('order') == '2');
|
||||
- text: <code>#box-2</code>元素应有<code>order</code>属性，其值应为 <code>1</code>。
|
||||
testString: assert($('#box-2').css('order') == '1');
|
||||
给`#box-1`和`#box-2`添加 CSS 属性`order`，`#box-1`的`order`属性值设为 `2`，`#box-2`的`order`属性值设为 `1`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`order`属性，其值应为 `2`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('order') == '2');
|
||||
```
|
||||
|
||||
</section>
|
||||
`#box-2`元素应有`order`属性，其值应为 `1`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```js
|
||||
assert($('#box-2').css('order') == '1');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user