Chinese translation of responsive-web-design (#40607)
This commit is contained in:
Xing Liu
GitHub
@ -8,53 +8,53 @@ forumTopicId: 301100
|
||||
|
||||
# --description--
|
||||
|
||||
我们以右边的嵌入推文为例。一些元素换一个布局方式或许更好看。上一个挑战演示了`display: flex`，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。
|
||||
我们以右边的嵌入推文为例，一些元素换一个布局方式或许更好看。上一个挑战演示了 `display: flex`，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为下列项目添加 CSS 属性`display: flex`。注意，CSS 选择器已写好：
|
||||
请为下列项目添加 CSS 属性 `display: flex`。注意，以下 CSS 选择器已为你写好：
|
||||
|
||||
`header`、header 的`.profile-name`、header 的`.follow-btn`、header 的`h3`和`h4`、`footer`以及 footer 的`.stats`。
|
||||
`header`、header 中的 `.profile-name`、header 中的 `.follow-btn`、header 中的 `h3` 和 `h4`、`footer` 以及 footer 中的 `.stats`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`header`的`display`属性应为 `flex`。
|
||||
`header` 的 `display` 属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('header').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`footer`的`display`属性应为 `flex`。
|
||||
`footer` 的 `display` 属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('footer').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`h3`的`display`属性应为 `flex`。
|
||||
`h3` 的 `display` 属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('h3').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`h4`的`display`属性应为 `flex`。
|
||||
`h4` 的 `display` 属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('h4').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`.profile-name`的`display`属性应为 `flex`。
|
||||
`.profile-name` 的 `display` 属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`.follow-btn`的`display`属性应为 `flex`。
|
||||
`.follow-btn` 的 `display` 属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('display') == 'flex');
|
||||
```
|
||||
|
||||
`.stats`的`display`属性应为 `flex`。
|
||||
`.stats` 的 `display` 属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('.stats').css('display') == 'flex');
|
||||
|
||||
@ -8,26 +8,26 @@ forumTopicId: 301101
|
||||
|
||||
# --description--
|
||||
|
||||
`align-items`属性与`justify-content`类似。回忆一下，`justify-content`属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。
|
||||
`align-items` 属性与 `justify-content` 类似。回忆一下，`justify-content` 属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。
|
||||
|
||||
Flex 容器中，与主轴垂直的叫做 **cross axis（交叉轴）**。行的交叉轴是垂直的，列的交叉轴是水平的。
|
||||
|
||||
使用 CSS 中的`align-items`属性定义 flex 子元素沿交叉轴的对齐方式，对行来说，将行中的项目在容器中往上或往下移动；对列来说，将列中的项目在容器中往左或往右移动。
|
||||
CSS 中的 `align-items` 属性用来定义 flex 子元素沿交叉轴的对齐方式。对行来说，定义的是元素的上下对齐方式；对列来说，是定义元素的左右对齐方式。
|
||||
|
||||
`align-items`的可选值包括：
|
||||
`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>
|
||||
|
||||
# --instructions--
|
||||
|
||||
这个例子可以帮助你理解这个属性，在`#box-container`添加 CSS 属性`align-items`并将值设为 center。
|
||||
这个例子可以帮助你理解这个属性。请在 `#box-container` 里添加 CSS 属性 `align-items` 并将值设为 `center`。
|
||||
|
||||
**提示：**
|
||||
在编辑器里试试`align-items`的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 `center`。
|
||||
**提示：**
|
||||
请在编辑器里试试 `align-items` 的其他值，看看它们之间的区别。但要通过挑战，你必须把属性值设为 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`元素应有`align-items`属性，其值应为 `center`。
|
||||
`#box-container` 所选择的元素应有 `align-items` 属性，且其属性值应为 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('align-items') == 'center');
|
||||
|
||||
@ -8,26 +8,26 @@ forumTopicId: 301102
|
||||
|
||||
# --description--
|
||||
|
||||
flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。幸运的是，我们可以通过`justify-content`属性的不同的值来实现。在介绍`justify-content`的可选值之前，我们要先理解一些重要术语。
|
||||
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 容器设为一个行，它的子元素会从左到右逐个排列；如果把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 **main axis（主轴）**。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。
|
||||
|
||||
关于 flex 子元素在主轴的排列方式，可以选择以下值：其中一个很常用的是`justify-content: center;`，使 flex 子元素在 flex 容器中居中排列。其他可选值还有：
|
||||
关于 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>
|
||||
|
||||
# --instructions--
|
||||
|
||||
这个例子可以帮助你理解这个属性，在`#box-container`元素添加 CSS 属性`justify-content`，其值为 `center`。
|
||||
这个例子可以帮助你理解这个属性。请为 `#box-container` 元素添加 CSS 属性 `justify-content`，并将其属性值设置为 `center`。
|
||||
|
||||
**提示：**
|
||||
在编辑器里试试`justify-content`的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 `center`。
|
||||
在编辑器里试试 `justify-content` 的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`应有`justify-content`属性，其值应为 `center`。
|
||||
`#box-container` 所选择的元素应有 `justify-content` 属性，且其属性值应为 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('justify-content') == 'center');
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301103
|
||||
|
||||
# --description--
|
||||
|
||||
在上一个挑战中，把嵌入推文的`header`和`footer`的`flex-direction`属性值设为 row（行）。相似地，把`.profile-name`选择器对应的元素竖着排列会好看一点。
|
||||
在之前的挑战中，我们把嵌入推文的 `header` 和 `footer` 的 `flex-direction` 属性值设为 row（行）。相似地，把 `.profile-name` 选择器中的元素竖着排列会好看一点。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 header 的`.profile-name`元素添加 CSS 属性`flex-direction`，将其值设为 column。
|
||||
请给 header 的 `.profile-name` 元素添加 CSS 属性 `flex-direction`，并将其值设为 column。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.profile-name`应有`flex-direction`属性，其值应为 column。
|
||||
`.profile-name` 所选择的元素应有 `flex-direction` 属性，且其属性值应为 column。
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('flex-direction') == 'column');
|
||||
|
||||
@ -8,21 +8,21 @@ forumTopicId: 301104
|
||||
|
||||
# --description--
|
||||
|
||||
嵌入推文示例中的`header`和`footer`有自己的子元素，使用`flex-direction`属性可以把这些子元素排成行。这个属性告诉 CSS 需要将这些子元素水平排列。
|
||||
嵌入推文示例中的 `header` 和 `footer` 有自己的子元素，使用 `flex-direction` 属性可以把这些子元素排成行。这个属性告诉 CSS 需要将这些子元素水平排列。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为`header`和`footer`添加 CSS 属性`flex-direction`并把值设为 row。
|
||||
为 `header` 和 `footer` 添加 CSS 属性 `flex-direction` 并把值设为 row。
|
||||
|
||||
# --hints--
|
||||
|
||||
`header`应有`flex-direction`属性，其值应为 row。
|
||||
`header` 应有 `flex-direction` 属性，其值应为 row。
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
`footer`应有`flex-direction`属性，其值应为 row。
|
||||
`footer` 应有 `flex-direction` 属性，其值应为 row。
|
||||
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301105
|
||||
|
||||
# --description--
|
||||
|
||||
这节会使用一种不同的挑战方式来学习一下如何使用 CSS 更灵活地布局元素。首先通过一个挑战来理解原理，然后通过操作一个简单的推文组件来应用“弹性盒子”（flexbox）。
|
||||
这节我们会使用不同的挑战方式来学习如何使用 CSS 更灵活地布局元素。首先我们会通过一个挑战来解释原理，然后通过操作一个简单的推文组件来应用弹性盒子（flexbox）。
|
||||
|
||||
只要在一个元素的 CSS 中添加`display: flex;`，就可以使用其它 flex 属性来构建响应式页面了。
|
||||
只要在一个元素的 CSS 中添加 `display: flex;`，就可以使用其它 flex 属性来构建响应式页面了。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为`#box-container`添加`display`属性，设置其值为 `flex`。
|
||||
请为 `#box-container` 添加 `display` 属性，并设置其属性值为 `flex`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`应有`display`属性，其值应为 `flex`。
|
||||
`#box-container` 应具有 `display`属性，其属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('display') == 'flex');
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301106
|
||||
|
||||
# --description--
|
||||
|
||||
上一个挑战介绍了`align-items`属性并给出了例子。可以对嵌入推文的一些元素使用这个属性，以调整其中 flex 子元素的位置。
|
||||
在上一个挑战中，我们介绍了 `align-items` 属性并给出了示例。我们可以对推文的几个嵌入元素使用这个属性，以调整其中 flex 元素的对齐方式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 header 的`.follow-btn`添加 CSS 属性`align-items`，把值设为 center。
|
||||
为 header 中的 `.follow-btn` 元素添加 CSS 属性 `align-items`，并将其属性值设为 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.follow-btn`应有`align-items`属性，其值应为 `center`.
|
||||
`.follow-btn` 选取的元素应有 `align-items` 属性，且其属性值应为 `center`。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('align-items') == 'center');
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 301107
|
||||
|
||||
# --description--
|
||||
|
||||
flex 子项目的最后一个属性是`align-self`。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为`float`、`clear`和`vertical-align`等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。
|
||||
flex 子项目的最后一个属性是 `align-self`。这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。因为 `float`、`clear` 和 `vertical-align` 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。
|
||||
|
||||
`align-self`可设置的值与`align-items`的一样，并且它会覆盖`align-items`的值。
|
||||
`align-self` 可设置的值与 `align-items` 的一样，并且它会覆盖 `align-items` 所设置的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`#box-1`和`#box-2`添加 CSS 属性`align-self`。`#box-1`设为 center，`#box-2`设为 `flex-end`。
|
||||
请为 `#box-1` 和 `#box-2` 添加 CSS 属性 `align-self`。将 `#box-1` 的 `align-self` 属性值设为 center，将 `#box-2` 的设为 `flex-end`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`align-self`属性，其值应为 `center`。
|
||||
`#box-1` 元素应具有 `align-self` 属性，其属性值应为 `center`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('align-self') == 'center');
|
||||
```
|
||||
|
||||
`#box-2`元素应有`align-self`属性，其值应为 `flex-end`。
|
||||
`#box-2` 元素应具有 `align-self` 属性，其属性值应为 `flex-end`。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('align-self') == 'flex-end');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: 使用 flex-basis 属性设置项目的初始大小
|
||||
title: 使用 flex-basis 属性设置元素的初始大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
|
||||
forumTopicId: 301108
|
||||
@ -8,35 +8,35 @@ forumTopicId: 301108
|
||||
|
||||
# --description--
|
||||
|
||||
`flex-basis`属性定义了在使用 CSS 的`flex-shrink`或`flex-grow`属性对项目进行调整前，项目的初始大小。
|
||||
`flex-basis` 属性定义了在使用 CSS 的 `flex-shrink` 或 `flex-grow` 属性对元素进行调整前，元素的初始大小。
|
||||
|
||||
`flex-basis`属性的单位与其他表示尺寸的属性的单位一致（`px`、`em`、`%`等）。如果值为`auto`，则项目的尺寸随内容调整。
|
||||
`flex-basis` 属性的单位与其他表示尺寸的属性的单位一致（`px`、`em`、`%` 等）。如果值为 `auto`，则项目的尺寸随内容调整。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用`flex-basis`为盒子设置初始值。给`#box-1`和`#box-2`添加 CSS 属性`flex-basis`。设置`#box-1`的尺寸初始值为`10em`，`#box-2`的尺寸初始值为`20em`。
|
||||
使用 `flex-basis` 为盒子设置初始值。请给 `#box-1` 和 `#box-2` 添加 CSS 属性 `flex-basis`。设置 `#box-1` 的尺寸初始值为 `10em`，`#box-2` 的尺寸初始值为 `20em`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`flex-basis`属性。
|
||||
`#box-1` 元素应具有 `flex-basis` 属性。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
`#box-1`的`flex-basis`应为`10em`。
|
||||
`#box-1` 的 `flex-basis` 属性值应为 `10em`。
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
```
|
||||
|
||||
`#box-2`元素应有`flex-basis`属性。
|
||||
`#box-2` 元素应具有 `flex-basis` 属性。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
`#box-2`的`flex-basis`应为`20em`。
|
||||
`#box-2` 的 `flex-basis` 属性值应为 `20em`。
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301109
|
||||
|
||||
# --description--
|
||||
|
||||
之前两个挑战使用`flex-direction`属性创建行（row）。这个属性还能创建一个列，让子元素垂直排列在 flex 容器中。
|
||||
在之前两个挑战中，我们使用了 `flex-direction` 属性创建行（row）。这个属性还能创建一个列，让子元素竖直排列在 flex 容器中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给`#box-container`元素添加 CSS 属性`flex-direction`，赋值为 `column`。
|
||||
请给 `#box-container` 元素添加 CSS 属性 `flex-direction`，并将其属性值设置为 `column`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`应有`flex-direction`属性，其值应为 column。
|
||||
`#box-container` 应有 `flex-direction` 属性，其属性值应为 `column`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'column');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: 使用 flex-direction 属性创建一行
|
||||
title: 使用 flex-direction 属性创建一个行
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
forumTopicId: 301110
|
||||
@ -8,20 +8,19 @@ forumTopicId: 301110
|
||||
|
||||
# --description--
|
||||
|
||||
给元素添加`display: flex`属性使其变成 flex 容器。只要给父元素添加`flex-direction`属性，并把属性值设置为 row 或 column，即可横排或竖排它的子元素。设为 row 可以让子元素水平排列，设为 column 可以让子元素垂直排列。
|
||||
给元素添加 `display: flex` 属性可以让它变成 flex 容器。只要给父元素添加 `flex-direction` 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。设为 row 可以让子元素横向排列，设为 column 可以让子元素纵向排列。
|
||||
|
||||
`flex-direction`的其他可选值还有 row-reverse 和 column-reverse。
|
||||
`flex-direction` 的其他可选值还有 `row-reverse` 和 `column-reverse`。
|
||||
|
||||
**注意**
|
||||
`flex-direction`的默认值为 row。
|
||||
**注意：**`flex-direction` 的默认值为 row。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为`#box-container`添加 CSS 属性`flex-direction`，其值设为 row-reverse。
|
||||
请为 `#box-container` 添加 CSS 属性 `flex-direction`，将其值设为 `row-reverse`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`应有`flex-direction`属性，其值应为 row-reverse。
|
||||
`#box-container` 应有 `flex-direction` 属性，其属性值应为 row-reverse。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: 使用 flex-grow 属性扩展项目
|
||||
title: 使用 flex-grow 属性定义 flex 子元素的增长系数
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
|
||||
forumTopicId: 1301111
|
||||
@ -8,23 +8,23 @@ forumTopicId: 1301111
|
||||
|
||||
# --description--
|
||||
|
||||
与`flex-shrink`相对的是`flex-grow`。你应该还记得，`flex-shrink`会在容器太小时对元素作出调整。相应地，`flex-grow`会在容器太大时对元素作出调整。
|
||||
与 `flex-shrink` 相对的是 `flex-grow`。你应该还记得，`flex-shrink` 会在容器太小时对子元素作出调整。相应地，`flex-grow` 会在容器太大时对子元素作出调整。
|
||||
|
||||
例子与上一个挑战相似，如果一个项目的`flex-grow`属性值为 `1`，另一个项目的`flex-grow`属性值为 `3`，那么后者会较前者扩大 3 倍。
|
||||
例子与上一个挑战相似，如果一个项目的 `flex-grow` 属性值为 `1`，另一个项目的 `flex-grow` 属性值为 `3`，那么后者会较前者扩大 3 倍。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为`#box-1`和`#box-2`添加 CSS 属性`flex-grow`，`#box-1`的值设为 `1`，`#box-2`的值设为 `2`。
|
||||
请为 `#box-1` 和 `#box-2` 添加 CSS 属性 `flex-grow`；将 `#box-1` 的 `flex-grow` 属性值设为 `1`，`#box-2` 的属性值设为 `2`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`flex-grow`属性，其值应为 `1`。
|
||||
`#box-1` 元素应具有 `flex-grow` 属性，其属性值应为 `1`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-grow') == '1');
|
||||
```
|
||||
|
||||
`#box-2`元素应有`flex-grow`属性，其值应为 `2`。
|
||||
`#box-2` 元素应具有 `flex-grow` 属性，其属性值应为 `2`。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-grow') == '2');
|
||||
|
||||
@ -8,21 +8,21 @@ forumTopicId: 301112
|
||||
|
||||
# --description--
|
||||
|
||||
上面几个 flex 属性有一个简写方式。`flex-grow`、`flex-shrink`和`flex-basis`属性可以在`flex`中一同设置。
|
||||
上面几个 flex 属性有一个简写方式。`flex-grow`、`flex-shrink` 和 `flex-basis` 属性可以在 `flex` 中一并设置。
|
||||
|
||||
例如，`flex: 1 0 10px;`会把项目属性设为`flex-grow: 1;`、`flex-shrink: 0;`以及`flex-basis: 10px;`。
|
||||
例如，`flex: 1 0 10px;` 会把项目属性设为 `flex-grow: 1;`、`flex-shrink: 0;` 以及 `flex-basis: 10px;`。
|
||||
|
||||
属性的默认设置是`flex: 0 1 auto;`。
|
||||
属性的默认设置是 `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`。
|
||||
请给 `#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`的值之和。
|
||||
通过上面的设置，在容器大于 300px 时，`#box-1` 扩大的空间会是 `#box-2` 扩大空间的两倍；在容器小于 300px 时，`#box-1` 缩小的空间会是 `#box-2` 缩小空间的两倍。300px 是两个盒子的 `flex-basis` 属性值之和。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`flex`属性，其值应为 `2 2 150px`。
|
||||
`#box-1` 元素应具有 `flex` 属性，其属性值应为 `2 2 150px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -32,7 +32,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`#box-2`元素应有`flex`属性，其值应为 `1 1 150px`。
|
||||
`#box-2` 元素应具有 `flex` 属性，其属性值应为 `1 1 150px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`#box-1`和`#box-2`应具有`flex`属性。
|
||||
应使用 `flex` 的简写属性为 `#box-1` 和 `#box-2` 添加规则。
|
||||
|
||||
```js
|
||||
assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: 使用 flex-shrink 属性收缩项目
|
||||
title: 使用 flex-shrink 属性定义 flex 子元素的收缩规则
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
|
||||
forumTopicId: 301113
|
||||
@ -8,25 +8,25 @@ forumTopicId: 301113
|
||||
|
||||
# --description--
|
||||
|
||||
目前为止，挑战里的提到的属性都应用于 flex 容器（flex 子元素的父元素）。除此之外，flex 子元素也有很多实用属性。
|
||||
目前为止，挑战里提到的属性都是应用于 flex 容器（flex 子元素的父元素）的。除此之外，flex 子元素也有很多实用属性。
|
||||
|
||||
首先介绍的是`flex-shrink`属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。
|
||||
首先介绍的是 `flex-shrink` 属性。使用之后，如果 flex 容器太小，则子元素会自动缩小。当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。
|
||||
|
||||
项目的`flex-shrink`属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的`flex-shrink`属性值为 `1`，另一个项目的`flex-shrink`属性值为 `3`，那么后者相比前者会受到 `3` 倍压缩。
|
||||
子元素的 `flex-shrink` 接受数值作为属性值。数值越大，则该元素与其他元素相比会被压缩得更厉害。比如，一个项目的 `flex-shrink` 属性值为 `1`，另一个项目的 `flex-shrink` 属性值为 `3`，那么后者相比前者会受到 `3` 倍压缩。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为`#box-1`和`#box-2`添加 CSS 属性`flex-shrink`，`#box-1`的值设为 `1`，`#box-2`的值设为 `2`。
|
||||
请为 `#box-1` 和 `#box-2` 添加 CSS 属性 `flex-shrink`，将 `#box-1` 的 `flex-shrink` 属性值设为 `1`，将 `#box-2` 的属性值设为 `2`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`flex-shrink`属性，其值应为 `1`.
|
||||
`#box-1` 元素应具有 `flex-shrink` 属性，其属性值应为 `1`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-shrink') == '1');
|
||||
```
|
||||
|
||||
`#box-2`元素应有`flex-shrink`属性，其值应为 `2`.
|
||||
`#box-2` 元素应具有 `flex-shrink` 属性，其属性值应为 `2`。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-shrink') == '2');
|
||||
|
||||
@ -8,21 +8,21 @@ forumTopicId: 301114
|
||||
|
||||
# --description--
|
||||
|
||||
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。
|
||||
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。对于行来说，所有项目都会在一条直线上。
|
||||
|
||||
不过，使用`flex-wrap`属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。
|
||||
不过，使用 `flex-wrap` 属性可以使项目换行展示。这意味着多出来的子元素会被移到新的行或列。换行发生的断点由子元素和容器的大小决定。
|
||||
|
||||
换行方向的可选值有这些：
|
||||
|
||||
<ul><li><code>nowrap</code>：默认值，不换行。</li><li><code>wrap</code>：行从上到下排，列从左到又排。</li><li><code>wrap-reverse</code>：行从下到上排，列从左到右排。</li></ul>
|
||||
<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`。
|
||||
现在的布局中，一行里面的元素太多了。请为 `#box-container` 元素添加 CSS 属性 `flex-wrap`，把将其属性值设为 `wrap`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container`元素应有`flex-wrap`属性，其值应为 `wrap`。
|
||||
`#box-container` 元素应具有 `flex-wrap` 属性，其属性值应为 `wrap`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301115
|
||||
|
||||
# --description--
|
||||
|
||||
上一项挑战展示了`justify-content`属性的作用。如果我们想对齐推文内的子元素，可以把`justify-content`应用在`.profile-name`上。
|
||||
上一项挑战展示了 `justify-content` 属性的作用。如果我们想对齐推文内的子元素，可以把 `justify-content` 应用在 `.profile-name` 上。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 header 的`.profile-name`元素添加 CSS 属性`justify-content`，把它的值设为上面挑战提到的任意可用值。
|
||||
请在 header 中的 `.profile-name` 元素添加 CSS 属性 `justify-content`，把它的属性值设为上面挑战提到的任意可用值。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.profile-name`元素的`justify-content`属性可选以下值：center、flex-start、flex-end、space-between、space-around。
|
||||
`.profile-name` 元素的 `justify-content` 可选用以下属性值：`center`、`flex-start`、`flex-end`、`space-between`、`space-around`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: 使用 order 属性重新排列项目
|
||||
title: 使用 order 属性重新排列子元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
||||
forumTopicId: 301116
|
||||
@ -8,21 +8,21 @@ forumTopicId: 301116
|
||||
|
||||
# --description--
|
||||
|
||||
`order`属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。
|
||||
`order` 属性告诉 CSS flex 容器里子元素的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。`order` 属性接受数字作为参数，可以使用负数。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给`#box-1`和`#box-2`添加 CSS 属性`order`，`#box-1`的`order`属性值设为 `2`，`#box-2`的`order`属性值设为 `1`。
|
||||
请给 `#box-1` 和 `#box-2` 添加 CSS 属性 `order`，并将 `#box-1` 的`order` 属性值设为 `2`，`#box-2` 的属性值设为 `1`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-1`元素应有`order`属性，其值应为 `2`。
|
||||
`#box-1` 元素应具有 `order` 属性，其属性值应为 `2`。
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('order') == '2');
|
||||
```
|
||||
|
||||
`#box-2`元素应有`order`属性，其值应为 `1`。
|
||||
`#box-2` 元素应具有 `order` 属性，其属性值应为 `1`。
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('order') == '1');
|
||||
|
||||
Reference in New Issue
Block a user