chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to staging.
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
e46e80e08f
commit
3da4be21bb
@ -0,0 +1,258 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: 在推文中添加彈性盒子佈局
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
|
||||
forumTopicId: 301100
|
||||
dashedName: add-flex-superpowers-to-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
以右邊的嵌入推文爲例， 一些元素換一個佈局方式或許更好看。 上一個挑戰演示了 `display: flex`， 現在你需要把它添加到推文內嵌的多個組件中，調整它們的位置。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請爲下列項目添加 CSS 屬性 `display: flex`。 注意，以下 CSS 選擇器已爲你寫好：
|
||||
|
||||
`header`、header 中的 `.profile-name`、header 中的 `.follow-btn`、header 中的 `h3` 和 `h4`、`footer` 以及 footer 中的 `.stats`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
`header` 的 `display` 屬性值應爲 `flex`。
|
||||
|
||||
```js
|
||||
assert($('header').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`footer` 的 `display` 屬性值應爲 `flex`。
|
||||
|
||||
```js
|
||||
assert($('footer').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`h3` 的 `display` 屬性值應爲 `flex`。
|
||||
|
||||
```js
|
||||
assert($('h3').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: 使用 align-items 屬性對齊元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
|
||||
forumTopicId: 301101
|
||||
dashedName: align-elements-using-the-align-items-property
|
||||
---
|
||||
|
||||
# --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>的值，那麼這就是默認值。</li><li><code>baseline</code>：沿基線對齊。 基線是文本相關的概念，可以認爲它是字母排列的下端基準線。</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
這個例子可以幫助你理解這個屬性。 請在 `#box-container` 裏添加 CSS 屬性 `align-items` 並將值設爲 `center`。
|
||||
|
||||
**提示：** 請在編輯器裏試試 `align-items` 的其他值，看看它們之間的區別。 但要通過挑戰，你必須把屬性值設爲 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` 所選擇的元素應有 `align-items` 屬性，且其屬性值應爲 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('align-items') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
align-items: center;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: 使用 justify-content 屬性對齊元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
|
||||
forumTopicId: 301102
|
||||
dashedName: align-elements-using-the-justify-content-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
flex 子元素有時不能充滿整個 flex 容器， 所以我們經常需要告訴 CSS 以什麼方式排列 flex 子元素，以及調整它們的間距。 幸運的是，我們可以通過 `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> 的值，那麼這就是默認值。</li><li><code>flex-end</code>：從 flex 容器的終止位置開始排列項目。 對行來說是把項目移至右邊， 對於列是把項目移至底部。</li><li><code>space-between</code>：項目間保留一定間距地沿主軸居中排列。 第一個和最後一個項目被放置在容器邊沿。 例如，在行中第一個項目會緊貼着容器左邊，最後一個項目會緊貼着容器右邊，然後其他項目均勻排布。</li><li><code>space-around</code>：與<code>space-between</code>相似，但頭尾兩個項目不會緊貼容器邊緣，所有項目之間的空間均勻排布。</li><li><code>space-evenly</code>：頭尾兩個項目不會緊貼容器邊緣，所有項目之間的空間均勻排布。</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
這個例子可以幫助你理解這個屬性。 請爲 `#box-container` 元素添加 CSS 屬性 `justify-content`，並將其屬性值設置爲 `center`。
|
||||
|
||||
**提示：**
|
||||
在編輯器裏試試 `justify-content` 的其他可用值，看看它們之間的區別。 但要通過挑戰，你必須把值設爲 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` 所選擇的元素應有 `justify-content` 屬性，且其屬性值應爲 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('justify-content') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
justify-content: center;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,218 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: 使用 flex-direction 在嵌入推文中創建一列
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
|
||||
forumTopicId: 301103
|
||||
dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在之前的挑戰中，我們把嵌入推文的 `header` 和 `footer` 的 `flex-direction` 屬性值設爲 row（行）。 相似地，把 `.profile-name` 選擇器中的元素豎着排列會好看一點。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請給標題的 `.profile-name` 元素添加 CSS 屬性 `flex-direction`，並將其值設爲 `column`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
`.profile-name` 元素應有一個值爲 `column` 的`flex-direction` 屬性。
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('flex-direction') == 'column');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: 使用 flex-direction 在嵌入推文中創建多行
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
|
||||
forumTopicId: 301104
|
||||
dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
嵌入推文示例中的 `header` 和 `footer` 有自己的子元素，使用 `flex-direction` 屬性可以把這些子元素排成行。 這個屬性告訴 CSS 需要將這些子元素水平排列。
|
||||
|
||||
# --instructions--
|
||||
|
||||
爲 `header` 和 `footer` 添加 CSS 屬性 `flex-direction`，並把值設爲 `row`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
`header` 應有 `flex-direction` 屬性，其值應爲 `row`。
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
`footer` 應有 `flex-direction` 屬性，其值應爲 `row`。
|
||||
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
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>
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: '使用 display: flex 定位兩個盒子'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
|
||||
forumTopicId: 301105
|
||||
dashedName: use-display-flex-to-position-two-boxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
這節我們會使用不同的挑戰方式來學習如何使用 CSS 更靈活地佈局元素。 首先我們會通過一個挑戰來解釋原理，然後通過操作一個簡單的推文組件來應用彈性盒子（flexbox）。
|
||||
|
||||
只要在一個元素的 CSS 中添加 `display: flex;`，就可以使用其它 flex 屬性來構建響應式頁面了。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請爲 `#box-container` 添加 `display` 屬性，並設置其屬性值爲 `flex`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` 應具有 `display`屬性，其屬性值應爲 `flex`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('display') == 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: 在推文中使用 align-items 屬性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
|
||||
forumTopicId: 301106
|
||||
dashedName: use-the-align-items-property-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在上一個挑戰中，我們介紹了 `align-items` 屬性並給出了示例。 我們可以對推文的幾個嵌入元素使用這個屬性，以調整其中 flex 元素的對齊方式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
爲 header 中的 `.follow-btn` 元素添加 CSS 屬性 `align-items`， 並將其屬性值設爲 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
`.follow-btn` 元素應有值爲 `center` 的 `align-items` 屬性。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('align-items') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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;
|
||||
align-items: center;
|
||||
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>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: 使用 align-self 屬性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
|
||||
forumTopicId: 301107
|
||||
dashedName: use-the-align-self-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
flex 子項目的最後一個屬性是 `align-self`。 這個屬性允許你調整單個子元素自己的對齊方式，而不會影響到全部子元素。 因爲 `float`、`clear` 和 `vertical-align` 等調整對齊方式的屬性都不能應用於 flex 子元素，所以這個屬性顯得十分有用。
|
||||
|
||||
`align-self` 可設置的值與 `align-items` 的一樣，並且它會覆蓋 `align-items` 所設置的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請爲 `#box-1` 和 `#box-2` 添加 CSS 屬性 `align-self`。 將 `#box-1` 的 `align-self` 屬性值設爲 center，將 `#box-2` 的設爲 `flex-end`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1` 元素應具有 `align-self` 屬性，其屬性值應爲 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('align-self') == 'center');
|
||||
```
|
||||
|
||||
`#box-2` 元素應具有 `align-self` 屬性，其屬性值應爲 `flex-end`。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('align-self') == 'flex-end');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
align-self: center;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
align-self: flex-end;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: 使用 flex-basis 屬性設置元素的初始大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
|
||||
forumTopicId: 301108
|
||||
dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`flex-basis` 屬性定義了在使用 CSS 的 `flex-shrink` 或 `flex-grow` 屬性對元素進行調整前，元素的初始大小。
|
||||
|
||||
`flex-basis` 屬性的單位與其他表示尺寸的屬性的單位一致（`px`、`em`、`%` 等）。 如果值爲 `auto`，則項目的尺寸隨內容調整。
|
||||
|
||||
# --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');
|
||||
```
|
||||
|
||||
`#box-1` 的 `flex-basis` 屬性值應爲 `10em`。
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
```
|
||||
|
||||
`#box-2` 元素應具有 `flex-basis` 屬性。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
`#box-2` 的 `flex-basis` 屬性值應爲 `20em`。
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
flex-basis: 10em;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
flex-basis: 20em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: 使用 flex-direction 屬性創建一列
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
|
||||
forumTopicId: 301109
|
||||
dashedName: use-the-flex-direction-property-to-make-a-column
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在之前兩個挑戰中，我們使用了 `flex-direction` 屬性，值爲 `row`。 這個屬性還能創建一個列，讓子元素豎直排列在 flex 容器中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請給 `#box-container` 元素添加 CSS 屬性 `flex-direction`，並將其屬性值設置爲 `column`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` 應有 `flex-direction` 屬性，其屬性值應爲 `column`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'column');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
flex-direction: column;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: 使用 flex-direction 屬性創建一個行
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
forumTopicId: 301110
|
||||
dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
給元素添加 `display: flex` 屬性可以讓它變成 flex 容器， 然後可以讓元素的項目排列成行或列。 只要給父元素添加 `flex-direction` 屬性，並把屬性值設置爲 row 或 column，即可橫向排列或縱向排列它的所有子元素。 創建一行將使子項水平對齊，創建一列將使子項垂直對齊。
|
||||
|
||||
`flex-direction` 的其他可選值還有 `row-reverse` 和 `column-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');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: 使用 flex-grow 屬性定義 flex 子元素的增長係數
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
|
||||
forumTopicId: 301111
|
||||
dashedName: use-the-flex-grow-property-to-expand-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
與 `flex-shrink` 相對的是 `flex-grow`。 你應該還記得，`flex-shrink` 會在容器太小時對子元素作出調整。 相應地，`flex-grow` 會在容器太大時對子元素作出調整。
|
||||
|
||||
例子與上一個挑戰相似，如果一個項目的 `flex-grow` 屬性值爲 `1`，另一個項目的 `flex-grow` 屬性值爲 `3`，那麼值爲 `3` 的一個會較另一個擴大 3 倍。
|
||||
|
||||
# --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');
|
||||
```
|
||||
|
||||
`#box-2` 元素應具有 `flex-grow` 屬性，其屬性值應爲 `2`。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-grow') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
flex-grow: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: 使用 flex 短方法屬性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
|
||||
forumTopicId: 301112
|
||||
dashedName: use-the-flex-shorthand-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
上面幾個 flex 屬性有一個簡寫方式。 `flex-grow`、`flex-shrink` 和 `flex-basis` 屬性可以在 `flex` 中一併設置。
|
||||
|
||||
例如，`flex: 1 0 10px;` 會把項目屬性設爲 `flex-grow: 1;`、`flex-shrink: 0;` 以及 `flex-basis: 10px;`。
|
||||
|
||||
屬性的默認設置是 `flex: 0 1 auto;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請給 `#box-1` 和 `#box-2` 添加 `flex` 屬性。 設置 `#box-1` 的 `flex-grow` 屬性值爲 `2`、`flex-shrink` 屬性值爲 `2`、`flex-basis` 屬性值爲 `150px`。 設置 `#box-2` 的 `flex-grow` 屬性值爲 `1`、`flex-shrink` 屬性值爲 `1`、`flex-basis` 屬性值爲 `150px`。
|
||||
|
||||
通過上面的設置，在容器大於 300px 時，`#box-1` 擴大的空間會是 `#box-2` 擴大空間的兩倍；在容器小於 300px 時，前者縮小的空間會是 `#box-2` 縮小空間的兩倍。 300px 是兩個盒子的 `flex-basis` 屬性值之和。
|
||||
|
||||
# --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'
|
||||
);
|
||||
```
|
||||
|
||||
`#box-2` 元素應具有 `flex` 屬性，其屬性值應爲 `1 1 150px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#box-2').css('flex-grow') == '1' &&
|
||||
$('#box-2').css('flex-shrink') == '1' &&
|
||||
$('#box-2').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
應使用 `flex` 的簡寫屬性爲 `#box-1` 和 `#box-2` 添加規則。
|
||||
|
||||
```js
|
||||
assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
flex: 2 2 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
flex: 1 1 150px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: 使用 flex-shrink 屬性定義 flex 子元素的收縮規則
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
|
||||
forumTopicId: 301113
|
||||
dashedName: use-the-flex-shrink-property-to-shrink-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
目前爲止，挑戰裏提到的屬性都是應用於 flex 容器（flex 子元素的父元素）的。 除此之外，flex 子元素也有很多實用屬性。
|
||||
|
||||
首先介紹的是 `flex-shrink` 屬性。 使用之後，如果 flex 容器太小，則子元素會自動縮小。 當容器的寬度小於裏面所有子元素的寬度之和時，所有子元素都會自動壓縮。
|
||||
|
||||
子元素的 `flex-shrink` 接受數值作爲屬性值。 數值越大，則該元素與其他元素相比會被壓縮得更厲害。 比如，一個項目的 `flex-shrink` 屬性值爲 `1`，另一個項目的 `flex-shrink` 屬性值爲 `3`，那麼後者相比前者會受到 `3` 倍壓縮。
|
||||
|
||||
# --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');
|
||||
```
|
||||
|
||||
`#box-2` 元素應具有 `flex-shrink` 屬性，其屬性值應爲 `2`。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-shrink') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
flex-shrink: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: 使用 flex-wrap 屬性包裹一行或一列
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
|
||||
forumTopicId: 301114
|
||||
dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS flexbox 有一個把 flex 子元素拆分爲多行（或多列）的特性。 默認情況下，flex 容器會調整項目大小，把它們都塞到一起。 對於行來說，所有項目都會在一條直線上。
|
||||
|
||||
不過，使用 `flex-wrap` 屬性可以使項目換行展示。 這意味着多出來的子元素會被移到新的行或列。 換行發生的斷點由子元素和容器的大小決定。
|
||||
|
||||
換行方向的可選值有這些：
|
||||
|
||||
<ul><li><code>nowrap</code>：默認值，不換行。</li><li><code>wrap</code>：如果排列以行爲基準，就將行從上往下排列；如果排列以列爲基準，就將列從左往右排列。</li><li><code>wrap-reverse</code>：如果排列以行爲基準，就將行從下往上排列；如果排列以列爲基準，就將列從右往左排列。</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
現在的佈局中，一行裏面的元素太多了。 請爲 `#box-container` 元素添加 CSS 屬性 `flex-wrap`，把將其屬性值設爲 `wrap`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` 元素應具有 `flex-wrap` 屬性，其屬性值應爲 `wrap`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: 在推文中使用 justify-content 屬性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
|
||||
forumTopicId: 301115
|
||||
dashedName: use-the-justify-content-property-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
上一項挑戰展示了 `justify-content` 屬性的作用。 如果我們想對齊推文內的子元素，可以把給 `.profile-name` 元素應用這個屬性。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請在 header 中的 `.profile-name` 元素添加 CSS 屬性 `justify-content`，把它的屬性值設爲上面挑戰提到的任意可用值。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
`.profile-name` 元素的 `justify-content` 屬性可選用以下屬性值：`center`、`flex-start`、`flex-end`、`space-between`、`space-around` 或 `space-evenly`。
|
||||
|
||||
```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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: 使用 order 屬性重新排列子元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
||||
forumTopicId: 301116
|
||||
dashedName: use-the-order-property-to-rearrange-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`order` 屬性告訴 CSS flex 容器裏子元素的順序。 默認情況下，項目排列順序與源 HTML 文件中順序相同。 這個屬性接受數字作爲參數，可以使用負數。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請給 `#box-1` 和 `#box-2` 添加 CSS 屬性 `order`， 並將 `#box-1` 的屬性值設爲 `2`，`#box-2` 的屬性值設爲 `1`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1` 元素應具有 `order` 屬性，其屬性值應爲 `2`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('order') == '2');
|
||||
```
|
||||
|
||||
`#box-2` 元素應具有 `order` 屬性，其屬性值應爲 `1`。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('order') == '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
order: 2;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
order: 1;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user