Skip to content

Instantly share code, notes, and snippets.

@paulrouget

paulrouget/flexbox.html

Created August 21, 2015 09:02
Show Gist options
  • Save paulrouget/14c8f3b9072d43cdff2d to your computer and use it in GitHub Desktop.
Save paulrouget/14c8f3b9072d43cdff2d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flexbox.html
<!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;">&lt;</div>
<div style="width:14px;font-size:12px;line-height:14px;display:none;">&gt;</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