Created
July 9, 2018 17:06
-
-
Save plugn/21ce653b02d00c4a4a72b73015a0bd1e to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/lepisel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| html, body { | |
| height: 100%; | |
| } | |
| .flex-row { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| min-height: 0; | |
| } | |
| .flex-col { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| height: 100%; | |
| } | |
| .flex-row > .flex-row, | |
| .flex-row > .flex-col, | |
| .flex-col > .flex-row, | |
| .flex-col > .flex-col { | |
| flex: 1; | |
| } | |
| .stretch { | |
| flex: 1; | |
| } | |
| .nostretch { | |
| flex: 0 1 auto !important; | |
| xdisplay: block; | |
| } | |
| .scroll { | |
| overflow: auto; | |
| } | |
| /* example style */ | |
| header, | |
| footer { | |
| height: 50px; | |
| } | |
| /* example debug */ | |
| .debug div, | |
| .debug li { | |
| outline: 1px orange dashed; | |
| } | |
| </style> | |
| </head> | |
| <body class="debug"> | |
| <div class="flex-col" style="height:100%; outline:1px;"> | |
| <div><div class="flex-row"> | |
| <div> * </div> | |
| <div class="flex-col"> col1</div> | |
| <div class="flex-col"> col1</div> | |
| <div class="flex-col"> col1</div> | |
| </div></div> | |
| <div>ROW</div> | |
| <div class="flex-row" style="background-color: #efe;">ROW | |
| </div> | |
| <div class="flex-row no-stretch" style=""> | |
| <div class="flex-col" > col1</div> | |
| <div class="flex-col" > col1</div> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">html, body { | |
| height: 100%; | |
| } | |
| .flex-row { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| min-height: 0; | |
| } | |
| .flex-col { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| height: 100%; | |
| } | |
| .flex-row > .flex-row, | |
| .flex-row > .flex-col, | |
| .flex-col > .flex-row, | |
| .flex-col > .flex-col { | |
| flex: 1; | |
| } | |
| .stretch { | |
| flex: 1; | |
| } | |
| .nostretch { | |
| flex: 0 1 auto !important; | |
| xdisplay: block; | |
| } | |
| .scroll { | |
| overflow: auto; | |
| } | |
| /* example style */ | |
| header, | |
| footer { | |
| height: 50px; | |
| } | |
| /* example debug */ | |
| .debug div, | |
| .debug li { | |
| outline: 1px orange dashed; | |
| } | |
| </script> | |
| </body> | |
| </html |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| height: 100%; | |
| } | |
| .flex-row { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| min-height: 0; | |
| } | |
| .flex-col { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| height: 100%; | |
| } | |
| .flex-row > .flex-row, | |
| .flex-row > .flex-col, | |
| .flex-col > .flex-row, | |
| .flex-col > .flex-col { | |
| flex: 1; | |
| } | |
| .stretch { | |
| flex: 1; | |
| } | |
| .nostretch { | |
| flex: 0 1 auto !important; | |
| xdisplay: block; | |
| } | |
| .scroll { | |
| overflow: auto; | |
| } | |
| /* example style */ | |
| header, | |
| footer { | |
| height: 50px; | |
| } | |
| /* example debug */ | |
| .debug div, | |
| .debug li { | |
| outline: 1px orange dashed; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment