Skip to content

turingschool-examples/css-flexbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

CSS Flexbox lesson repo

This is a repo version of the CodePen used in the CSS flexbox lesson.

Set Up Instructions

  • Do NOT fork!
  • Clone this repo
  • cd into the repo
  • open in your text editor
  • use open index.html to open in your browser

Use the browser's dev tools to apply flexbox

Apply display: flex to the parent container. .wrapper

Then, use the browser's dev tools to apply different versions of the following styles to the parent to see how the children get aligned:

Tips for using the Dev Tools:

  • Find or type the style declaration in the 'styles' section of the dev tools. Ex. justify-content: center
  • Double click the value of the style. Then hit delete. Ex. Double click center then hit the delete key.
  • Your cursor will remain there, ready to type in whatever value. A popup box will show with all the value options for that style. You can use the up and down arrow keys to scroll and see each option being applied.
* flex-direction: (choose one below)   
                 row;   
                 column;   

* justify-content: (choose one below)  
                    center;  
                    space-around;  
                    space-between;  
                    space-evenly;  
                    flex-end;   

* align-items: (choose one below)  
                stretch;  
                flex-start;  
                flex-end;  
                center;  
                baseline;   

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published