---
title: CSS Flexbox
---
## CSS Flexbox

These set of challenges will teach you the basics of using flex containers. The challenges are:
1. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md' target='_blank' rel='nofollow'>Use display: flex to Position Two Boxes</a>.
2. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md' target='_blank' rel='nofollow'>Add Flex Superpowers to the Tweet Embed</a>.
3. <a href='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' target='_blank' rel='nofollow'>Use the flex-direction Property to Make a Row</a>.
4. <a href='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' target='_blank' rel='nofollow'>Apply the flex-direction Property to Create Rows in the Tweet Embed</a>.
5. <a href='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' target='_blank' rel='nofollow'>Use the flex-direction Property to Make a Column</a>.
6. <a href='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' target='_blank' rel='nofollow'>Apply the flex-direction Property to Create a Column in the Tweet Embed</a>.
7. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property/index.md' target='_blank' rel='nofollow'>Align Elements Using the justify-content Property</a>.
8. <a href='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' target='_blank' rel='nofollow'>Use the justify-content Property in the Tweet Embed</a>.
9. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md' target='_blank' rel='nofollow'>Align Elements Using the align-items Property</a>.
10. <a href='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' target='_blank' rel='nofollow'>Use the align-items Property in the Tweet Embed</a>.
11. <a href='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' target='_blank' rel='nofollow'>Use the flex-wrap Property to Wrap a Row or Column</a>.
12. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items/index.md' target='_blank' rel='nofollow'>Use the flex-shrink Property to Shrink Items</a>.
13. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items/index.md' target='_blank' rel='nofollow'>Use the flex-grow Property to Expand Items</a>.
14. <a href='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' target='_blank' rel='nofollow'>Use the flex-basis Property to Set the Initial Size of an Item</a>.
15. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shorthand-property/index.md' target='_blank' rel='nofollow'>Use the flex Shorthand Property</a>.
16. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items/index.md' target='_blank' rel='nofollow'>Use the order Property to Rearrange Items</a>.
17. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-self-property/index.md' target='_blank' rel='nofollow'>Use the align-self Property</a>.