今天小编跟大家讲解下有关CSS弹性盒模型flex在布局中的应用详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS弹性盒模型flex在布局中的应用详解 的相关资料，希望小伙伴们看了有所帮助。
前面的话
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
Javascript Code复制内容到剪贴板 <style> .parent{ display:flex; justify-content:center; align-items:center; } </style>XML/HTML Code复制内容到剪贴板 <divclass="parent"style="background-color:lightgrey;height:100px;width:200px;"> <divclass="in"style="background-color:lightblue;">DEMO</div> </div>【2】在伸缩项目上使用margin:auto
CSS Code复制内容到剪贴板 <style> .parent{ display:flex; } .in{ margin:auto; } </style>XML/HTML Code复制内容到剪贴板 <divclass="parent"style="background-color:lightgrey;height:100px;width:200px;"> <divclass="in"style="background-color:lightblue;">DEMO</div> </div>两端对齐
CSS Code复制内容到剪贴板 <style> .parent{ display:flex; justify-content:space-between } </style>XML/HTML Code复制内容到剪贴板 <divclass="parent"style="background-color:lightgrey;height:100px;width:200px;"> <divclass="in"style="background-color:lightblue;">DEMO</div> <divclass="in"style="background-color:lightgreen;">DEMO</div> <divclass="in"style="background-color:lightcyan;">DEMO</div> <divclass="in"style="background-color:lightseagreen;">DEMO</div> </div>底端对齐
CSS Code复制内容到剪贴板 <style> .parent{ display:flex; align-items:flex-end; } </style>XML/HTML Code复制内容到剪贴板 <divclass="parent"style="background-color:lightgrey;height:100px;width:200px;"> <divclass="in"style="background-color:lightblue;height:20px;">DEMO</div> <divclass="in"style="background-color:lightgreen;height:30px;">DEMO</div> <divclass="in"style="background-color:lightcyan;height:40px;">DEMO</div> <divclass="in"style="background-color:lightseagreen;height:50px;">DEMO</div> </div>输入框按钮
CSS Code复制内容到剪贴板 <style> .inputBox{ display:flex; width:250px; } .inputBox-ipt{ flex:1; } </style>XML/HTML Code复制内容到剪贴板 <divclass="inputBox"> <inputclass="inputBox-ipt"> <buttonclass="inputBox-btn">按钮</button> </div>等分布局
CSS Code复制内容到剪贴板 <style> body,p{margin:0;} .parent{ display:flex; } .child{ flex:1; height:100px; } .child+.child{ margin-left:20px; } </style>XML/HTML Code复制内容到剪贴板 <divclass="parent"style="background-color:lightgrey;"> <divclass="child"style="background-color:lightblue;">1</div> <divclass="child"style="background-color:lightgreen;">2</div> <divclass="child"style="background-color:lightsalmon;">3</div> <divclass="child"style="background-color:pink;">4</div> </div>多列自适应布局
CSS Code复制内容到剪贴板 <style> p{margin:0;} .parent{display:flex;} .left,.center{margin-right:20px;} .rightright{flex:1;} </style>XML/HTML Code复制内容到剪贴板 <divclass="parent"style="background-color:lightgrey;"> <divclass="left"style="background-color:lightblue;"> <p>left</p> <p>left</p> </div> <divclass="center"style="background-color:pink;"> <p>center</p> <p>center</p> </div> <divclass="right"style="background-color:lightgreen;"> <p>right</p> <p>right</p> </div> </div>悬挂布局
CSS Code复制内容到剪贴板 <style> .box{ display:flex; background-color:lightgrey; width:300px; } .left{ margin-right:20px; background-color:lightblue; height:30px; } .main{ flex:1; } </style>XML/HTML Code复制内容到剪贴板 <divclass="box"> <divclass="left">左侧悬挂</div> <divclass="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div> </div>全屏布局
CSS Code复制内容到剪贴板 <style> body,p{margin:0;} body,html,.parent{height:100%;} .parent{ display:flex; flex-direction:column; } .top,.bottombottom{ height:50px; } .middle{ display:flex; flex:1; } .left{ width:100px; margin-right:20px; } .rightright{ flex:1; overflow:auto; } .rightright-in{ height:1000px; } </style>XML/HTML Code复制内容到剪贴板 <divclass="parent"id="parent"style="background-color:lightgrey;"> <divclass="top"style="background-color:lightblue;"> <p>top</p> </div> <divclass="middle"style="background-color:pink;"> <divclass="left"style="background-color:orange;"> <p>left</p> </div> <divclass="right"style="background-color:lightsalmon;"> <divclass="right-in"> <p>right</p> </div> </div> </div> <divclass="bottom"style="background-color:lightgreen;"> <p>bottom</p> </div> </div>以上这篇CSS弹性盒模型flex在布局中的应用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持爱蒂网。
原文地址：http://www.cnblogs.com/xiaohuochai/archive/2016/05/24/5460201.html
来源：爱蒂网
