/flexbox.html
Created Aug 21, 2015
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| div { | |
| display: flex; | |
| border: 1px solid rgba(255,0,0,0.2); | |
| margin: 2px; | |
| padding: 2px; | |
| background: rgba(255,50,50,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="height:600px;width:600px;flex-direction:column;"> | |
| <div style="flex-direction:column;flex-grow:1;"> | |
| <div style="flex-shrink:0;align-items:center;justify-content:space-between;"> | |
| <div style="flex-shrink:0"> | |
| <div style="width: 12px; height: 12px; border-radius: 50%; background-color: red;"></div> | |
| <div style="width: 12px; height: 12px; border-radius: 50%; background-color: red;"></div> | |
| <div style="width: 12px; height: 12px; border-radius: 50%; background-color: red;"></div> | |
| </div> | |
| <div style="width:50%;padding:3px 0;border-radius:100px;flex-basis:300px;-moz-window-dragging:no-drag;background-color:rgba(0,0,0,0.07);color:rgba(0,0,0,0.65);"> | |
| <div style="flex-shrink:0;"> | |
| <div style="width:14px;font-size:12px;line-height:14px;"><</div> | |
| <div style="width:14px;font-size:12px;line-height:14px;display:none;">></div> | |
| </div> | |
| <div style="flex-shrink:0;"> | |
| <div style="width:14px;font-size:12px;line-height:14px;vertical-align:middle;text-align:center;display:none;">G</div> | |
| <div style="width:14px;font-size:10px;line-height:14px;vertical-align:middle;text-align:center;">L</div> | |
| </div> | |
| <input style="flex-grow:1;" placeholder="Search or enter address" value="" type="text"> | |
| <div style="flex-shrink:0;"> | |
| <div style="width: 14px; display:none;">S</div> | |
| <div style="width: 14px;">R</div> | |
| </div> | |
| </div> | |
| <div style="width:60px;text-align:right;display:block"> | |
| <span style="font-size:10px">A</span> | |
| <span style="font-size: 6px">B</span> | |
| </div> | |
| </div> | |
| <div style="height:4px;min-height:4px;margin-bottom:-4px;position:relative;overflow-x:hidden;"> | |
| <div style="width: 100%; position:absolute;top:0;height:4px;background-color:#4A90E2;"></div> | |
| </div> | |
| <div style="flex-grow:1;justify-content:stretch"> | |
| <div style="flex-grow:1;background: rgba(50,250,50,0.2)"></div> | |
| </div> | |
| </div> | |
| <div style="background:rgba(50,50,250,0.2);flex-direction:row;flex-shrink:0;"> | |
| <div style="width:200px;align-items:center"> | |
| <img src="data:image/gif;base64,R0lGODlhAQABAPAAAP8REf///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="16" height="16"> | |
| <div style="display: inline; flex-grow:1; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;"> | |
| <span>abc abc abc</span> | |
| </div> | |
| <div style="font-family:FontIon;text-align:center;vertical-align:middle;flex-shrink:0;width:16px;line-height:16px;">x</div> | |
| </div> | |
| <div style="width:200px;align-items:center"> | |
| <img src="data:image/gif;base64,R0lGODlhAQABAPAAAP8REf///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="16" height="16"> | |
| <div style="display: inline; flex-grow:1; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;"> | |
| <span>abc abc abc abc abc abc abc abc abc abc</span> | |
| </div> | |
| <div style="font-family:FontIon;text-align:center;vertical-align:middle;flex-shrink:0;width:16px;line-height:16px;">x</div> | |
| </div> | |
| <div style="width: 16px;">+</div> | |
| <div style="flex-grow:1">spacer</div> | |
| <div>op</div> | |
| <div>sw</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment