2 changed files with 72 additions and 0 deletions
+ 49
- 0
05-flex/flex.css
View File
| @@ -0,0 +1,49 @@ | |||
| .container{ | |||
| background-color: bisque; | |||
| padding: 10px; | |||
| display: flex; | |||
| /* flex-direction: row; | |||
| flex-wrap: nowrap; */ | |||
| height: 500px; | |||
| flex-flow: row nowrap; | |||
| justify-content: flex-start; | |||
| align-items: stretch; | |||
| /* align-content: stretch; only works on multiple lines */ | |||
| } | |||
| .container div { | |||
| line-height: 40px; | |||
| font-size: 20px; | |||
| color: white; | |||
| text-align: center; | |||
| } | |||
| .div-1{ | |||
| background-color: chocolate; | |||
| /* flex-grow: 1; */ | |||
| /* flex-shrink: 0; */ | |||
| flex: 2 0 200px; | |||
| order: 2; | |||
| } | |||
| .div-2{ | |||
| background-color: darksalmon; | |||
| flex: 1 1 100px; | |||
| order: 1; | |||
| } | |||
| .div-3{ | |||
| background-color: lime; | |||
| flex: 1 1 100px; | |||
| order: 5; | |||
| } | |||
| .div-4 | |||
| { | |||
| background-color: thistle; | |||
| flex: 1 1 100px; | |||
| order: 3; | |||
| } | |||
| .div-5 | |||
| { | |||
| background-color: rebeccapurple; | |||
| flex: 1 1 100px; | |||
| order: 10; | |||
| } | |||
+ 23
- 0
05-flex/flex.html
View File
| @@ -0,0 +1,23 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>Flex</title> | |||
| <link rel="stylesheet" href="flex.css"> | |||
| </head> | |||
| <body> | |||
| <div class="container"> | |||
| <div class="div-1">1</div> | |||
| <div class="div-2">2</div> | |||
| <div class="div-3">3</div> | |||
| <div class="div-4">4</div> | |||
| <div class="div-5">5</div> | |||
| </div> | |||
| </body> | |||
| </html> | |||
Loading…