display的flex属性使用详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了display的flex属性使用详解相关的知识，希望对你有一定的参考价值。
flex的兼容性在pc端还算阔以，但是在移动端，那就呵呵了。今天我们只是学习学习，忽略一些不重要的东西。
首先flex的使用需要有一个父容器，父容器中有几个items.
父容器：container
属性：
display:flex;/*flex块级，inline-flex:行内快*/
justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/
align-items:stretch;/*center:垂直居中、flex-start：至顶、flex-end:至底、space-between、space-around*/
flex-direction: row;/*column从上向下的排列，column-reverse、row:从左到右，row-reverse:从右向左*/
flex-wrap:wrap;/*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/
/*flex-flow是flex-direction、flex-wrap的缩写*/
这里给出一个简单的demo:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <style> .container{ width:600px; height:400px; border:1px solid #000; display:flex;/*flex块级，inline-flex:行内快*/ justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/ align-items:stretch;/*center:垂直居中、flex-start,至顶，flex-end:至底*,space-between、space-around*/ flex-direction: row;/*column从上向下的排列，column-reverse,,,,row:从左到右，row-reverse:从右向左*/ flex-wrap:wrap;/*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/ /*flex-flow是flex-direction、flex-wrap的缩写*/ } .box{ width:200px; height:100px; border:1px solid #000; } </style> </head> <body> <div class="container"> <div class="box">这是中间的box1</div> <div class="box">这是中间的box2</div> </div> </body> </html>
子元素的属性：
order：设置元素的顺序
例如：我么想要将本来第二个元素排在第一，将排在第一的元素设置为第二。
我们可以设置他们的order值。
.box1{order:1;}
.box2{order:0;}
<div class="container">
<div class="box box1">这是中间的box1</div>
<div class="box box2">这是中间的box2</div>
</div>
以上是关于display的flex属性使用详解的主要内容，如果未能解决你的问题，请参考以下文章