Make sure to check out the main reading in compass, it will clarify a lot of what's happening in the code: https://rbc-corp.lighthouselabs.ca/days/w2d2/activities/44
Save both the flex.css and flex.html to the same folder in your computer and experiment!
| /* | |
| The properties discussed here are also described in compass: | |
| https://rbc-corp.lighthouselabs.ca/days/w2d2/activities/44 | |
| */ | |
| /* Basic body style */ | |
| body { | |
| margin: 5% 10% 20% 10%; | |
| font-family: "Helvetica", sans-serif; | |
| } | |
| /* | |
| <article> contains two block-level elements. | |
| Normally they're displayed on their own rows. | |
| Change display to 'flex' to make them display side by side. | |
| That's the only thing you must do to create a flexbox container! | |
| The rest is all about customization. | |
| */ | |
| article { | |
| display: block; | |
| /*display: flex;*/ | |
| } | |
| /* Add a black border to all <section> elements */ | |
| section { | |
| border: 2px solid #000; | |
| padding: 5px; | |
| } | |
| /* | |
| This is the PARENT flexbox component. The properties here will control how all | |
| contained components (CHILDREN) will behave. | |
| Each property below should show up only once, but all options are included. | |
| Un-comment specific lines to see how they change how elements are displayed! | |
| The initially un-commented lines correspond to the standard options used when | |
| the properties are not defined. | |
| */ | |
| .parent { | |
| display: flex; /* Makes element flexbox-capable */ | |
| flex-direction: row; | |
| /*flex-direction: row-reverse;*/ | |
| /*flex-direction: column;*/ | |
| /*flex-direction: column-reverse;*/ | |
| justify-content: flex-start; | |
| /*justify-content: flex-end;*/ | |
| /*justify-content: center;*/ | |
| /*justify-content: space-between;*/ | |
| /*justify-content: space-around;*/ | |
| /*justify-content: space-evenly;*/ | |
| align-items: stretch; | |
| /*align-items: flex-start;*/ | |
| /*align-items: flex-end;*/ | |
| /*align-items: center;*/ | |
| /*align-items: baseline;*/ | |
| flex-wrap: no-wrap; | |
| /*flex-wrap: wrap;*/ | |
| /*flex-wrap: reverse;*/ | |
| align-content: stretch; | |
| /*align-content: flex-start;*/ | |
| /*align-content: flex-end;*/ | |
| /*align-content: center;*/ | |
| /*align-content: space-between;*/ | |
| } | |
| /* | |
| Basic definition of our child components - they all show up as boxes. | |
| */ | |
| .box { | |
| width: 50px; | |
| padding: 10px; | |
| text-align: center; | |
| border: 1px solid #000; | |
| } | |
| /* | |
| Now we specify properties for each individual children. | |
| Here you can play with the following flexbox properties: | |
| order | |
| align-self | |
| flex-shrink | |
| flex-grow | |
| Feel free to change other properties as well: width, height, margins etc. | |
| Note that "stretch" properties on the parent will make *all* elements the same | |
| height when you define the height on any of the children. | |
| The same is true for widths if you choose a vertical grid. | |
| You can also set the widths to higher pixel values; this will allow you to play with | |
| flex-shrink/flex-grow to test element squishiness. | |
| */ | |
| .child-a { | |
| background-color: red; | |
| /*width: 300px;*/ | |
| } | |
| .child-b { | |
| background-color: green; | |
| /*height: 150px;*/ | |
| } | |
| .child-c { | |
| background-color: blue; | |
| } | |
| .child-d { | |
| background-color: purple; | |
| } | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Flexbox!</title> | |
| <link rel="stylesheet" href="flex.css" /> | |
| </head> | |
| <body> | |
| <article> | |
| <h2>I'm a title</h2> | |
| <p>I'm a paragraph tag</p> | |
| </article> | |
| <!-- Our main flexbox container --> | |
| <h3>A few elements</h3> | |
| <section class="parent"> | |
| <div class="box child-a">A</div> | |
| <div class="box child-b">B</div> | |
| <div class="box child-c">C</div> | |
| <div class="box child-d">D</div> | |
| </section> | |
| <!-- A busier flexbox container --> | |
| <!-- Try playing with the flex-wrap property to see how this changes! --> | |
| <h3>A lot of elements!</h3> | |
| <section class="parent"> | |
| <div class="box child-a">A</div> | |
| <div class="box child-b">B</div> | |
| <div class="box child-c">C</div> | |
| <div class="box child-d">D</div> | |
| <div class="box child-b">E</div> | |
| <div class="box child-d">F</div> | |
| <div class="box child-b">G</div> | |
| <div class="box child-a">H</div> | |
| <div class="box child-c">I</div> | |
| <div class="box child-b">J</div> | |
| <div class="box child-a">K</div> | |
| <div class="box child-d">L</div> | |
| <div class="box child-c">M</div> | |
| </section> | |
| </body> | |
| </html> |