flexbox
第一个视频来自Jaych Su,提到了当要学习一个新东西的时候,从三个方面来思考:功能,兼容,原理; 一. flex能做什么?
#main{width:100%; float:left}
#left,#right{float:left;}
#left{margin-left: -100%;}
#right{margin-left: -200px;}
<div id="main">
</div>
<div id="left">
</div>
<div id="right">
</div>
flex示例: http://codepen.io/GitKou/pen/QEjppZ?editors=1100 <div class="InputAddOn">
<input class="InputAddOn-field">
<button class="InputAddOn-item">…</button>
</div>
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
/* field styles */
}
.InputAddOn-item {
/* item styles */
}
4.Media Object https://philipwalton.github.io/solved-by-flexbox/demos/media-object/ 5.Sticky Footer http://codepen.io/Rocketpilot/pen/f813cf7854371e211758f98de04a5e00 6.Vertical Centering .Aligner { display: flex; align-items: center; justify-content: center; }
上面这些难题,用flex简直不能更简单。但是兼容如何? 二. 兼容(http://www.w3cplus.com/css3/normalizing-cross-browser-flexbox-bugs.html)
/** * 1. Avoid the IE 10-11 `min-height` bug. * 2. Set `flex-shrink` to `0` to prevent Chrome,Opera,and Safari from * letting these items shrink to smaller than their content's default * minimum size. */
.Site { display: flex; flex-direction: column; height: 100vh; /* 1 */ }
.Site-header,.Site-footer { flex-shrink: 0; /* 2 */ }
.Site-content { flex: 1 0 auto; /* 2 */ }
三. 原理
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |