(Replaced content with " {{UPMC-Paris/Header}} <html> <!-- HTML--> </html> {{UPMC-Paris/Footer}}") |
|||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | .wrapper { | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | width: 100%; | ||
+ | height:2500px; | ||
+ | background-color: orange; | ||
+ | margin : none; | ||
+ | |||
+ | } | ||
+ | .header { | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | width: 95%; | ||
+ | height:100px; | ||
+ | background-color: yellow; | ||
+ | margin : auto; | ||
+ | margin-bottom: 1%; | ||
+ | } | ||
− | + | .header-item { | |
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | background-color: pink; | ||
+ | width: 30%; | ||
+ | height: 30%; | ||
+ | margin: 1%; | ||
+ | } | ||
+ | .flex-container { | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | width: 95%; | ||
+ | min-height: 500px; | ||
+ | max-height: 2500px; | ||
+ | background-color: lightgreen; | ||
+ | margin : auto; | ||
+ | margin-bottom: 1%; | ||
+ | } | ||
+ | .flex-item { | ||
+ | background-color: cornflowerblue; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | margin: 10px; | ||
+ | |||
+ | } | ||
+ | .footer { | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | width: 95%; | ||
+ | height:100px; | ||
+ | background-color: yellow; | ||
+ | margin-bottom: 1%; | ||
+ | margin : auto; | ||
+ | } | ||
+ | .footer-item { | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | background-color: cornflowerblue; | ||
+ | width: 80px; | ||
+ | height: 20px; | ||
+ | margin: 10px; | ||
+ | margin-bottom: 1%; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <div class="wrapper"> | ||
+ | <div class="header"> | ||
+ | <div class="header-item">flex item 1</div> | ||
+ | <div class="header-item">flex item 2</div> | ||
+ | <div class="header-item">flex item 3</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="flex-container"> | ||
+ | <div class="flex-item">flex item 1</div> | ||
+ | <div class="flex-item">flex item 2</div> | ||
+ | <div class="flex-item">flex item 3</div> | ||
+ | </div> | ||
+ | <div class="footer"> | ||
+ | <div class="footer-item">flex item 1</div> | ||
+ | <div class="footer-item">flex item 2</div> | ||
+ | <div class="footer-item">flex item 3</div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
</html> | </html> | ||
− |
Revision as of 13:29, 17 August 2016
flex item 1
flex item 2
flex item 3
flex item 1
flex item 2
flex item 3