2018-10-10 18:03:03 -04:00
|
|
|
---
|
|
|
|
|
id: 5a90375238fddaf9a66b5d3b
|
2020-12-16 00:37:30 -07:00
|
|
|
title: 使用 align-self 垂直对齐项目
|
2018-10-10 18:03:03 -04:00
|
|
|
challengeType: 0
|
2020-02-11 21:39:15 +08:00
|
|
|
videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
|
|
|
|
|
forumTopicId: 301123
|
2018-10-10 18:03:03 -04:00
|
|
|
---
|
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --description--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
正如能设置网格项沿行轴对齐方式一样，也可以设置网格项沿列轴对齐：你可以对网格项使用`align-self`属性。在上一个挑战中适用于`justify-self`属性的每个值也都适用于`align-self`属性。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --instructions--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
用值`end`使类为`item3`的网格项底端对齐。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --hints--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
`item3`类应该有`align-self`属性且值为`end`。
|
2020-02-11 21:39:15 +08:00
|
|
|
|
2018-10-10 18:03:03 -04:00
|
|
|
```js
|
2020-12-16 00:37:30 -07:00
|
|
|
assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
2018-10-10 18:03:03 -04:00
|
|
|
```
|
2020-02-11 21:39:15 +08:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --solutions--
|
|
|
|
|
|
