display的flex属性使用详解

时间 2019-11-19

标签 display flex 属性使用详解栏目 CSS 繁體版

原文原文链接

flex的兼容性在pc端还算阔以，可是在移动端，那就呵呵了。今天咱们只是学习学习，忽略一些不重要的东西。html

首先flex的使用须要有一个父容器，父容器中有几个items.浏览器

父容器：containersass

属性：学习

　　 display:flex;/*flex块级，inline-flex:行内快*/flex

　　 justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/spa

　　 align-items:stretch;/*center:垂直居中、flex-start：至顶、flex-end:至底、space-between、space-around*/　　htm

　　 flex-direction: row;/*column从上向下的排列，column-reverse、row:从左到右，row-reverse:从右向左*/blog

　　 flex-wrap:wrap;/*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/it

/*flex-flow是flex-direction、flex-wrap的缩写*/io

这里给出一个简单的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>

flex:指定可伸缩长度的部件，是flex-shrink,flex-grow,flex-basis这三个属性的缩写。

他能够指定一个子元素的占据父元素的宽度或者高度的比例。（前提是在子元素尚未占满父级元素的状况下）

demo:

 <style>
	.container{
		width:800px;
		height:600px;
		border:1px solid red;
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:row;
		flex-wrap:wrap;
	}
	.box{
	    width:200px;
		height:200px;
		border:1px solid blue;
	}
　　　　.box1{
	　　flex:2
	} 
  </style>
 </head>
 <body>
    <div class="container">
		<div class= " box box1">1</div>
		<div class="box box2">2</div>
		<div class="box box3">3</div>
		<div class="box box4">4</div>
	</div>
 </body>

最终效果以下：由于子元素占满父级元素。

进一步验证：

<style>
	.container{
		width:800px;
		height:600px;
		border:1px solid red;
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:row;
		flex-wrap:wrap;
	}
	.box{
	    width:200px;
		height:200px;
		border:1px solid blue;
	}
　　　　.box1{
	　　flex:2
	} 
  </style>
 </head>
 <body>
    <div class="container">
		<div class= " box box1">1</div>
		<div class="box box2">2</div>
	</div>
 </body>

　很明显的阔以看到，box1占据了600px宽度

align-self:用来单独设置子元素的对齐方式（可将默认的对齐方式进行覆盖）

例如:咱们已经在父元素中设置了align-items:center.(将子元素设置为垂直居中显示)

这个时候咱们想单独更改某个子元素的对齐方式，就能够使用align-self

 <style>
	.container{
		width:800px;
		height:600px;
		border:1px solid red;
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:row;
		flex-wrap:wrap;
	}
	.box{
	    width:100px;
		height:100px;
		border:1px solid blue;
	}
　　　　.box1{
	　　flex:2
	}
/* .box4{
		align-self:flex-end;
	} */
  </style>
 </head>
 <body>
    <div class="container">
		<div class= " box box1">1</div>
		<div class="box box2">2</div>
        <div class="box box3">3</div>
		<div class="box box4">4</div>
	</div>
 </body>

假如咱们设置 box4：align-self:flex-end;呢？？？？？

 .box4{
　　align-self:flex-end;
  }

好了，已经改变了box4的对齐方式。

若是想兼容更多的浏览器，能够采用优雅降级的方式，例如sass-flex-mixin

参考：https://juejin.im/entry/5804638e67f3560058c6f914