https://github.com/andriikot/css__flexbox__freecodecamp

Flexbox
https://github.com/andriikot/css__flexbox__freecodecamp

css css3 flex flexbox flexbox-css freecodecamp-project

Last synced: 3 days ago
JSON representation

Flexbox

• Host: GitHub
• URL: https://github.com/andriikot/css__flexbox__freecodecamp
• Owner: AndriiKot
• Created: 2024-05-26T11:09:09.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-01T12:08:49.000Z (6 months ago)
• Last Synced: 2024-11-07T15:17:50.910Z (about 2 months ago)
• Topics: css, css3, flex, flexbox, flexbox-css, freecodecamp-project
• Language: HTML
• Homepage:
• Size: 1.12 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Flexbox

Flexbox is a powerful, well-supported layout

method that was introduced with the latest

version of CSS, CSS3. With flexbox, it's

easy to center elements on the page and

create dynamic user interfaces that

shrink and expand automatically.

In this course, you'll learn the

fundamentals of flexbox and dynamic

layouts by building a Twitter card

### Technologies



    

       

    


  

    

  



## List of Challenges:

### 1.[Use *display: flex* to Position Two Boxes](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__01__Flex_to_Position_Two_Boxes)

### 2.[Add Flex Superpowers to the Tweet Embed](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__02__Add_Flex_Superpowers_to_the_Tweet_Embed)

### 3.[Use the *flex-direction* Property to Make a Row](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__03__Use_the_flex-direction_Property_to_Make_a_Row)

### 4.[Apply the *flex-direction* Property to Create Rows in the Tweet Embed](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__04__Apply_the_flex-direction_Property_to_Create_Rows_in_the_Tweet_Embed)

### 5.[Use the *flex-direction* Property to Make a Column](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__05__Use_the_flex-direction_Property_to_Make_a_Column)

### 6.[Apply the *flex-direction* Property to Create a Column in the Tweet Embed](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__06__Apply_the_flex-direction_Property_to_Create_a_Column_in_the_Tweet_Embed)

### 7.[Align Elements Using the *justify-content* Property](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__07__Align_Elements_Using_the_justify-content_Property)

### 8.[Use the *justify-content* Property in the Tweet Embed](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__08__Use_the_justify-content_Property_in_the_Tweet_Embed)

### 9.[Align Elements Using the *align-items* Property](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__09__Align_Elements_Using_the_align-items_Property)

### 10.[Use the *align-items* Property in the Tweet Embed](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__10__Use_the_align-items_Property_in_the_Tweet_Embed)

### 11.[Use the *flex-wrap* Property to Wrap a Row or Column](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__11__Use_the_flex-wrap_Property_to_Wrap_a_Row_or_Column)

### 12.[Use the *flex-shrink* Property to Shrink Items](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__12__Use_the_flex-shrink_Property_to_Shrink_Items)

### 13.[Use the flex-grow Property to Expand Items](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__13__Use_the_flex-grow_Property_to_Expand_Items)

### 14.[Use the flex-basis Property to Set the Initial Size of an Item](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__14__Use_the_flex-basis_Property_to_Set_the_Initial_Size_of_anItem)

### 15.[Use the flex Shorthand Property](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__15__Use_the_flex_Shorthand_Property)

### 16.[Use the order Property to Rearrange Items](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__16__Use_the_order_Property_to_Rearrange_Items)

### 17.[Use the align-self Property](https://github.com/AndriiKot/CSS__Flexbox__FreeCodeCamp/tree/main/__17__Use_the_align-self_Property)