<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Reklino/pen/ogmMwp?limit=all&page=10&q=flex+box" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">html {
height: 100%;
}
body {
height: 100%;
background: #eee;
}
main {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-content: space-around;
}
.resizable {
width: 400px;
padding: 2em;
text-align: center;
position: relative;
display: block;
background: #fff;
}
.all {
margin: auto;
}
.rg-right, .rg-left, .rg-top, .rg-bottom {
color: red;
text-align: center;
display: block;
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
}
.rg-top {
cursor: row-resize;
top: 0;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
.rg-right {
cursor: col-resize;
right: 0;
top: 50%;
margin-right: -25px;
margin-top: -25px;
}
.rg-bottom {
cursor: row-resize;
bottom: 0;
left: 50%;
margin-left: -25px;
margin-bottom: -25px;
}
.rg-left {
cursor: col-resize;
left: 0;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style></head><body>
<main ng-app="app" ng-controller="MainController">
<resizable r-directions="['bottom', 'right']">
<h1>Resize Me</h1>
<p>Look at me, I'm a resizable directive.</p>
</resizable>
<resizable class="all"
r-directions="['top', 'bottom', 'left', 'right']"
r-centered-x="true" r-centered-y="true">
<h1>I resize in all directions</h1>
<p>By specifying 'r-centered-x' and 'r-centered-y' as true, I tell the velocity of the resizing to double so that it counteracts the offset from centering.</p>
</resizable>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script >angular.module('resizable', [])
.directive('resizable', function() {
return {
restrict: 'AE',
scope: {
rDirections: "=",
rCenteredX: "=",
rCenteredY: "="
},
link: function(scope, element, attr) {
// add class for styling purposes
element.addClass('resizable');
var style = window.getComputedStyle(element[0], null),
w = parseInt(style.getPropertyValue("width")),
h = parseInt(style.getPropertyValue("height")),
dir = scope.rDirections,
vx = scope.rCenteredX ? 2 : 1, // if centered double velocity
vy = scope.rCenteredY ? 2 : 1, // if centered double velocity
start,
dragDir,
axis,
drag = function(e) {
console.log(dragDir);
var offset = axis == 'x' ? start - e.clientX : start - e.clientY;
switch(dragDir) {
case 'top':
element[0].style.height = h + (offset * vy) + 'px';
break;
case 'right':
element[0].style.width = w - (offset * vx) + 'px';
break;
case 'bottom':
element[0].style.height = h - (offset * vy) + 'px';
break;
case 'left':
element[0].style.width = w + (offset * vx) + 'px';
break;
}
},
dragStart = function(e, direction) {
dragDir = direction;
axis = dragDir == 'left' || dragDir == 'right' ? 'x' : 'y';
start = axis == 'x' ? e.clientX : e.clientY;
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', drag, false);
w = parseInt(style.getPropertyValue("width"));
h = parseInt(style.getPropertyValue("height"));
});
document.addEventListener('mousemove', drag, false);
};
for(i=0;i<dir.length;i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}
(function () {
var grabber = document.createElement('div'),
direction = dir[i];
// add class for styling purposes
grabber.setAttribute('class', 'rg-' + dir[i]);
grabber.innerHTML = '|||';
element[0].appendChild(grabber);
grabber.ondragstart = function() { return false }
grabber.addEventListener('mousedown', function(e) {
dragStart(e, direction);
}, false);
}())
}
window.CP.exitedLoop(1);
window.CP.exitedLoop(1);
}
}
});
angular.module('app', ['resizable'])
.controller('MainController', function($scope) {
});
//# sourceURL=pen.js
</script>
</body></html>
