2 changed files with 73 additions and 0 deletions
+ 52
- 0
05-flex/flex.css
View File
| @@ -0,0 +1,52 @@ | |||
| .container{ | |||
| background-color: bisque; | |||
| padding: 10px; | |||
| display: flex; | |||
| /* flex-direction: column; | |||
| flex-wrap: wrap; */ | |||
| height: 500px; | |||
| flex-flow: row nowrap; | |||
| justify-content: flex-start; | |||
| align-items: stretch; | |||
| width: 450px; | |||
| /* align-content: stretch;*/ | |||
| } | |||
| .container div { | |||
| line-height: 40px; | |||
| font-size: 20px; | |||
| color: white; | |||
| text-align: center; | |||
| /*flex-grow: 1;*/ | |||
| /* width: 50%;*/ | |||
| } | |||
| .div-1{ | |||
| background-color: chocolate; | |||
| /*align-self: flex-start;*/ | |||
| flex: 2 0 200px; | |||
| order: 1; | |||
| } | |||
| .div-2{ | |||
| background-color: rgb(236, 67, 11); | |||
| flex: 1 1 100px; | |||
| order: 2; | |||
| } | |||
| .div-3{ | |||
| background-color: lime; | |||
| flex: 1 1 100px; | |||
| order: 1; | |||
| } | |||
| .div-4{ | |||
| background-color:black; | |||
| flex: 1 1 100px; | |||
| order: 4; | |||
| } | |||
| .div-5{ | |||
| background-color:blue; | |||
| flex: 1 1 100px; | |||
| order: 3; | |||
| } | |||
+ 21
- 0
05-flex/flex.html
View File
| @@ -0,0 +1,21 @@ | |||
| <!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…