chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -9,16 +9,22 @@ dashedName: add-flex-superpowers-to-the-tweet-embed
|
||||
|
||||
# --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`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.follow-btn` 应在页面上呈现。 请关闭广告拦截器等任何扩展。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
`header` 的 `display` 属性值应为 `flex`。
|
||||
|
||||
```js
|
||||
|
||||
@ -9,22 +9,21 @@ dashedName: align-elements-using-the-align-items-property
|
||||
|
||||
# --description--
|
||||
|
||||
`align-items` 属性与 `justify-content` 类似。回忆一下，`justify-content` 属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。
|
||||
`align-items` 属性与 `justify-content` 类似。 回忆一下，`justify-content` 属性使 flex 子元素沿主轴排列。 行的主轴是水平线，列的主轴是垂直线。
|
||||
|
||||
Flex 容器中，与主轴垂直的叫做 **cross axis（交叉轴）**。行的交叉轴是垂直的，列的交叉轴是水平的。
|
||||
Flex 容器中，与主轴垂直的叫做 **cross axis（交叉轴）**。 行的交叉轴是垂直的，列的交叉轴是水平的。
|
||||
|
||||
CSS 中的 `align-items` 属性用来定义 flex 子元素沿交叉轴的对齐方式。对行来说，定义的是元素的上下对齐方式；对列来说，是定义元素的左右对齐方式。
|
||||
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>
|
||||
<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`。
|
||||
这个例子可以帮助你理解这个属性。 请在 `#box-container` 里添加 CSS 属性 `align-items` 并将值设为 `center`。
|
||||
|
||||
**提示：**
|
||||
请在编辑器里试试 `align-items` 的其他值，看看它们之间的区别。但要通过挑战，你必须把属性值设为 `center`。
|
||||
**提示：** 请在编辑器里试试 `align-items` 的其他值，看看它们之间的区别。 但要通过挑战，你必须把属性值设为 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,22 +9,22 @@ dashedName: align-elements-using-the-justify-content-property
|
||||
|
||||
# --description--
|
||||
|
||||
flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。幸运的是，我们可以通过 `justify-content` 属性的不同值来实现。在介绍 `justify-content` 的可选值之前，我们要先理解一些重要术语。
|
||||
flex 子元素有时不能充满整个 flex 容器， 所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。 幸运的是，我们可以通过 `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 项目，有几种选择。 关于 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>
|
||||
<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`。
|
||||
这个例子可以帮助你理解这个属性。 请为 `#box-container` 元素添加 CSS 属性 `justify-content`，并将其属性值设置为 `center`。
|
||||
|
||||
**提示：**
|
||||
在编辑器里试试 `justify-content` 的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 `center`。
|
||||
在编辑器里试试 `justify-content` 的其他可用值，看看它们之间的区别。 但要通过挑战，你必须把值设为 `center`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,15 +9,21 @@ dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-em
|
||||
|
||||
# --description--
|
||||
|
||||
在之前的挑战中，我们把嵌入推文的 `header` 和 `footer` 的 `flex-direction` 属性值设为 row（行）。相似地，把 `.profile-name` 选择器中的元素竖着排列会好看一点。
|
||||
在之前的挑战中，我们把嵌入推文的 `header` 和 `footer` 的 `flex-direction` 属性值设为 row（行）。 相似地，把 `.profile-name` 选择器中的元素竖着排列会好看一点。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请给 header 的 `.profile-name` 元素添加 CSS 属性 `flex-direction`，并将其值设为 column。
|
||||
请给标题的 `.profile-name` 元素添加 CSS 属性 `flex-direction`，并将其值设为 `column`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.profile-name` 所选择的元素应有 `flex-direction` 属性，且其属性值应为 column。
|
||||
`.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');
|
||||
|
||||
@ -9,21 +9,27 @@ dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
|
||||
|
||||
# --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。
|
||||
`.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。
|
||||
`footer` 应有 `flex-direction` 属性，其值应为 `row`。
|
||||
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-display-flex-to-position-two-boxes
|
||||
|
||||
# --description--
|
||||
|
||||
这节我们会使用不同的挑战方式来学习如何使用 CSS 更灵活地布局元素。首先我们会通过一个挑战来解释原理，然后通过操作一个简单的推文组件来应用弹性盒子（flexbox）。
|
||||
这节我们会使用不同的挑战方式来学习如何使用 CSS 更灵活地布局元素。 首先我们会通过一个挑战来解释原理，然后通过操作一个简单的推文组件来应用弹性盒子（flexbox）。
|
||||
|
||||
只要在一个元素的 CSS 中添加 `display: flex;`，就可以使用其它 flex 属性来构建响应式页面了。
|
||||
|
||||
|
||||
@ -9,15 +9,21 @@ dashedName: use-the-align-items-property-in-the-tweet-embed
|
||||
|
||||
# --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` 应在页面上呈现。 请关闭广告拦截器等任何扩展。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
`.follow-btn` 元素应有值为 `center` 的 `align-items` 属性。
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('align-items') == 'center');
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: use-the-align-self-property
|
||||
|
||||
# --description--
|
||||
|
||||
flex 子项目的最后一个属性是 `align-self`。这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。因为 `float`、`clear` 和 `vertical-align` 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。
|
||||
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`。
|
||||
请为 `#box-1` 和 `#box-2` 添加 CSS 属性 `align-self`。 将 `#box-1` 的 `align-self` 属性值设为 center，将 `#box-2` 的设为 `flex-end`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,11 +11,11 @@ dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item
|
||||
|
||||
`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--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-the-flex-direction-property-to-make-a-column
|
||||
|
||||
# --description--
|
||||
|
||||
在之前两个挑战中，我们使用了 `flex-direction` 属性创建行（row）。这个属性还能创建一个列，让子元素竖直排列在 flex 容器中。
|
||||
在之前两个挑战中，我们使用了 `flex-direction` 属性，值为 `row`。 这个属性还能创建一个列，让子元素竖直排列在 flex 容器中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
|
||||
# --description--
|
||||
|
||||
给元素添加 `display: flex` 属性可以让它变成 flex 容器。只要给父元素添加 `flex-direction` 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。设为 row 可以让子元素横向排列，设为 column 可以让子元素纵向排列。
|
||||
给元素添加 `display: flex` 属性可以让它变成 flex 容器， 然后可以让元素的项目排列成行或列。 只要给父元素添加 `flex-direction` 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。 创建一行将使子项水平对齐，创建一列将使子项垂直对齐。
|
||||
|
||||
`flex-direction` 的其他可选值还有 `row-reverse` 和 `column-reverse`。
|
||||
|
||||
**注意：**`flex-direction` 的默认值为 row。
|
||||
**注意：**`flex-direction` 的默认值为 `row`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -21,7 +21,7 @@ dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` 应有 `flex-direction` 属性，其属性值应为 row-reverse。
|
||||
`#box-container` 元素应有 `flex-direction` 属性，其属性值应为 `row-reverse`。
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
|
||||
@ -3,19 +3,19 @@ id: 587d78ae367417b2b2512afc
|
||||
title: 使用 flex-grow 属性定义 flex 子元素的增长系数
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
|
||||
forumTopicId: 1301111
|
||||
forumTopicId: 301111
|
||||
dashedName: use-the-flex-grow-property-to-expand-items
|
||||
---
|
||||
|
||||
# --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` 的一个会较另一个扩大 3 倍。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请为 `#box-1` 和 `#box-2` 添加 CSS 属性 `flex-grow`；将 `#box-1` 的 `flex-grow` 属性值设为 `1`，`#box-2` 的属性值设为 `2`。
|
||||
请为 `#box-1` 和 `#box-2` 添加 CSS 属性 `flex-grow`。 将 `#box-1` 的属性值设为 `1`，`#box-2` 的属性值设为 `2`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-the-flex-shorthand-property
|
||||
|
||||
# --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;`。
|
||||
|
||||
@ -17,9 +17,9 @@ dashedName: use-the-flex-shorthand-property
|
||||
|
||||
# --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-2` 缩小空间的两倍。 300px 是两个盒子的 `flex-basis` 属性值之和。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: use-the-flex-shrink-property-to-shrink-items
|
||||
|
||||
# --description--
|
||||
|
||||
目前为止，挑战里提到的属性都是应用于 flex 容器（flex 子元素的父元素）的。除此之外，flex 子元素也有很多实用属性。
|
||||
目前为止，挑战里提到的属性都是应用于 flex 容器（flex 子元素的父元素）的。 除此之外，flex 子元素也有很多实用属性。
|
||||
|
||||
首先介绍的是 `flex-shrink` 属性。使用之后，如果 flex 容器太小，则子元素会自动缩小。当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。
|
||||
首先介绍的是 `flex-shrink` 属性。 使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。
|
||||
|
||||
子元素的 `flex-shrink` 接受数值作为属性值。数值越大，则该元素与其他元素相比会被压缩得更厉害。比如，一个项目的 `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` 的 `flex-shrink` 属性值设为 `1`，将 `#box-2` 的属性值设为 `2`。
|
||||
请为 `#box-1` 和 `#box-2` 添加 CSS 属性 `flex-shrink`。 将 `#box-1` 的属性值设为 `1`，将 `#box-2` 的属性值设为 `2`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
|
||||
# --description--
|
||||
|
||||
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。对于行来说，所有项目都会在一条直线上。
|
||||
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。 默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。
|
||||
|
||||
不过，使用 `flex-wrap` 属性可以使项目换行展示。这意味着多出来的子元素会被移到新的行或列。换行发生的断点由子元素和容器的大小决定。
|
||||
不过，使用 `flex-wrap` 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。
|
||||
|
||||
换行方向的可选值有这些：
|
||||
|
||||
@ -19,7 +19,7 @@ CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性
|
||||
|
||||
# --instructions--
|
||||
|
||||
现在的布局中，一行里面的元素太多了。请为 `#box-container` 元素添加 CSS 属性 `flex-wrap`，把将其属性值设为 `wrap`。
|
||||
现在的布局中，一行里面的元素太多了。 请为 `#box-container` 元素添加 CSS 属性 `flex-wrap`，把将其属性值设为 `wrap`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-the-justify-content-property-in-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
上一项挑战展示了 `justify-content` 属性的作用。如果我们想对齐推文内的子元素，可以把 `justify-content` 应用在 `.profile-name` 上。
|
||||
上一项挑战展示了 `justify-content` 属性的作用。 如果我们想对齐推文内的子元素，可以把给 `.profile-name` 元素应用这个属性。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -17,7 +17,13 @@ dashedName: use-the-justify-content-property-in-the-tweet-embed
|
||||
|
||||
# --hints--
|
||||
|
||||
`.profile-name` 元素的 `justify-content` 可选用以下属性值：`center`、`flex-start`、`flex-end`、`space-between`、`space-around`。
|
||||
`.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(
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-the-order-property-to-rearrange-items
|
||||
|
||||
# --description--
|
||||
|
||||
`order` 属性告诉 CSS flex 容器里子元素的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。`order` 属性接受数字作为参数，可以使用负数。
|
||||
`order` 属性告诉 CSS flex 容器里子元素的顺序。 默认情况下，项目排列顺序与源 HTML 文件中顺序相同。 这个属性接受数字作为参数，可以使用负数。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请给 `#box-1` 和 `#box-2` 添加 CSS 属性 `order`，并将 `#box-1` 的`order` 属性值设为 `2`，`#box-2` 的属性值设为 `1`。
|
||||
请给 `#box-1` 和 `#box-2` 添加 CSS 属性 `order`， 并将 `#box-1` 的属性值设为 `2`，`#box-2` 的属性值设为 `1`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user