用Flex實現常見的幾種佈局

閆亞龍發表於2018-12-28
Flex

用Flex實現常見的幾種佈局

1.水平，垂直居中。

用Flex實現常見的幾種佈局

<style type="text/css">
  	.container{
  		display: flex;
  		width: 300px;
  		height: 300px;
  		border: 1px solid red;
  		align-items: center;     /* 垂直居中*/
  		justify-content: center; /* 水平居中*/
  	}
  	.item{
  		width: 60px;
  		height: 60px;
                border: 1px solid black;
                text-align: center;
                background: blue;
  	}
</style>

<div class="container">
	<div class="item item1"></div>
</div>複製程式碼

2. 左邊固定寬度，右邊佔滿寬度

用Flex實現常見的幾種佈局

<style type="text/css">
  	.container{
  		display: flex;
  		width: 100%;
  		height: 300px;
  		border: 1px solid red;
  	}
  	.item1{
  		width: 100px;
  		background: blue;
  	}
  	.item2{
  		flex: 1;
  	}
</style>

<div class="container">
	<div class="item item1"></div>
	<div class="item item2"></div>
</div>
複製程式碼

3.頂部固定高度，下部佔滿剩餘高度

用Flex實現常見的幾種佈局

<style type="text/css">
  	.container{
  		display: flex;
  		width: 100%;
  		height: 300px;
  		border: 1px solid red;
  		flex-direction: column;
  	}
  	.item1{
  		width: 100%;
  		height: 20px;
  		background: blue;
  	}
  	.item2{
  		width: 100%;
  		flex: 1;
  		background: #F44336;
  	}
</style>

<div class="container">
	<div class="item item1"></div>
	<div class="item item2"></div>
</div>
複製程式碼

4.頂部，底部固定高度，中間佔滿剩餘高度

用Flex實現常見的幾種佈局

<style type="text/css">
  	.container{
  		display: flex;
  		width: 100%;
  		height: 300px;
  		border: 1px solid red;
  		flex-direction: column;
  	}
  	.item1{
  		width: 100%;
  		height: 20px;
  		background: blue;
  	}
  	.item2{
  		width: 100%;
  		flex: 1;
  		background: #F44336;
  	}
  	.item3{
  		width: 100%;
  		height: 20px;
  		background: blue;
  	}
</style>

<div class="container">
	<div class="item item1"></div>
	<div class="item item2"></div>
	<div class="item item3"></div>
</div>
複製程式碼

5.中部佔滿剩餘高度，此元素內部採用"左邊固定寬度，右邊佔滿剩餘寬度"

用Flex實現常見的幾種佈局

<style type="text/css">
  	.container{
  		display: flex;
  		width: 100%;
  		height: 600px;
  		border: 1px solid red;
  		flex-direction: column;
  	}
  	.header{
  		height: 100px;
  		width: 100%;
  		background: #3be662;
  	}
  	.body{
  		flex: 1;
  		width: 100%;
  		background: red;
  		display: flex;
  		flex-direction: row;
  	}
  	.footer{
  		width: 100%;
  		height: 100px;
  		background: blue;
  	}
  	.left{
  		width: 100px;
	    background: #d7b052;
  	}
  	.right{
  		flex: 1;
	    background: #b1c2bd;
  	}

</style>

<div class="container">
	<div class="header"></div>
	<div class="body">
	  <div class="left"></div>	
	  <div class="right"></div>	
	</div>
	<div class="footer"></div>
</div>
複製程式碼


Flex相容性寫法

1.盒子的相容性寫法：

.box{
    display: -webkit-flex;  /* 新版本語法: Chrome 21+ */
    display: flex;          /* 新版本語法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本語法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本語法: IE 10 */   
}
 
複製程式碼

2.子元素的相容性寫法：

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* 老版本語法 - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* 老版本語法 - Firefox 19- */      
} 

複製程式碼


最後附上各個瀏覽器對Flex的支援程度:

用Flex實現常見的幾種佈局


相關文章