25 lines
3.5 KiB
Markdown
25 lines
3.5 KiB
Markdown
---
|
||
title: CSS Flexbox
|
||
localeTitle: CSS Flexbox
|
||
---
|
||
## CSS Flexbox
|
||
|
||
这些挑战将教您使用Flex容器的基础知识。挑战是：
|
||
|
||
1. [使用display：flex定位两个Box](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md) 。
|
||
2. [添加Flex Superpowers到Tweet Embed](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md) 。
|
||
3. [使用flex-direction属性创建一行](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row/index.md) 。
|
||
4. [应用flex-direction属性在Tweet Embed中创建行](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed/index.md) 。
|
||
5. [使用flex-direction属性创建列](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column/index.md) 。
|
||
6. [应用flex-direction属性在Tweet Embed中创建一个列](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed/index.md) 。
|
||
7. [使用justify-content属性对齐元素](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property/index.md) 。
|
||
8. [在Tweet Embed中使用justify-content属性](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed/index.md) 。
|
||
9. [使用align-items属性对齐元素](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md) 。
|
||
10. [使用Tweet Embed中的align-items属性](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed/index.md) 。
|
||
11. [使用flex-wrap属性包装行或列](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column/index.md) 。
|
||
12. [使用flex-shrink属性收缩项目](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items/index.md) 。
|
||
13. [使用flex-grow属性扩展项目](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items/index.md) 。
|
||
14. [使用flex-basis属性设置项的初始大小](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item/index.md) 。
|
||
15. [使用flex速记属性](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shorthand-property/index.md) 。
|
||
16. [使用order属性重新排列项目](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items/index.md) 。
|
||
17. [使用align-self属性](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-self-property/index.md) 。 |