Recently I am writing a simple layout framework, but the functions are actually similar. But the goal is to use as simple as possible code to implement some essential functions. It is used in some occasions where loading speed is required.
CSS part
.flex-row,.flex{display: -webkit-flex;display: flex;flex-direction: row;}.flex-col{display: -webkit-flex;display: flex;flex-direction: column;}Javascript part
.directive('flex',[function(){return {restrict:'A',scope:{'flex':'='},link:function(s,e,a){e.css('flexGrow',s.flex);}};}]);usage:
<div><div flex="1"> one </div><div flex="6"> two </div></div>
The above is the AngularJS implementation of elastic box layout introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!