前面的话

前面已经详细介绍过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