Simondb
4 years ago
2 changed files with 69 additions and 0 deletions
+ 49
- 0
05-flex/flex.css
View File
| @@ -0,0 +1,49 @@ | |||
| .container{ | |||
| background-color: bisque; | |||
| padding: 10px; | |||
| display: flex; | |||
| height: 500px; | |||
| flex-flow: row nowrap; | |||
| justify-content: flex-start; | |||
| align-items: stretch; | |||
| } | |||
| .container div{ | |||
| font-size: 20px; | |||
| color: white; | |||
| line-height: 40px; | |||
| text-align: center; | |||
| } | |||
| .div-1{ | |||
| background-color: chocolate; | |||
| flex: 2 0 200px; | |||
| order: 5; | |||
| } | |||
| .div-2{ | |||
| background-color: darksalmon; | |||
| flex: 1 1 100px; | |||
| order: 2; | |||
| justify-content:; | |||
| align-items:; | |||
| } | |||
| .div-3{ | |||
| background-color: darkviolet; | |||
| flex: 1 1 100px; | |||
| order: 3; | |||
| } | |||
| .div-4{ | |||
| background-color:yellowgreen; | |||
| flex: 1 1 100px; | |||
| order: 4; | |||
| align-content: | |||
| } | |||
| .div-5{ | |||
| background-color: darkorange; | |||
| flex: 1 1 100px; | |||
| order: 1; | |||
| } | |||
+ 20
- 0
05-flex/flex.html
View File
| @@ -0,0 +1,20 @@ | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title> | |||
| hi | |||
| </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…