碼上快樂

相關內容    簡體    繁體

css3 flex流動自適應響應式布局實例 轉

本文轉載自   查看原文   2017-03-13 10:53   4255    H5+CSS3

轉自：http://www.tuicool.com/articles/auEbMzU   感謝他的分享，

一、圖片自適應居中

實例圖：

實例HTML：

<div class="demo">
	<img src="http://dummyimage.com/100x100" alt="">
</div>

<div class="demo">
	<img class="" src="http://dummyimage.com/200x100" alt="">
</div>

<div class="demo">
	<img src="http://dummyimage.com/100x200" alt="">
</div>

<div class="demo">
	<img src="http://dummyimage.com/200x200" alt="">
</div>

<div class="demo">
	<img src="http://dummyimage.com/50x50" alt="">
</div>

實例CSS：

.demo{
	width: 100px;
	height: 100px;
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
	float: left;
	margin-left: 20px;

	/*flex布局（作用於容器）*/
	display: flex;

	/*水平居中（作用於容器）*/
	justify-content: center;

	/*垂直居中（作用於容器）*/
	align-items: center;
}

.demo img{
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
}

 

二、水平響應式列表

實例圖：

實例HTML：

<div class="demo-wrap">
	<div class="demo">
		<div class="item item1">高120px</div>
		<div class="item item2">高50px</div>
		<div class="item item3">高140px</div>
		<div class="item item4">高100px</div>
	</div>
</div>

實例CSS：

.demo-wrap{
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
}

.demo{
	width: 100%;

	/*flex布局（作用於容器）*/
	display: flex;

	/*兩端對齊（作用於容器）*/
	justify-content: space-between;
}

.demo .item{
	width: 100px;
	background: #ffd;
	color: #C90000;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
}

.demo .item1{
	height: 120px;
}

.demo .item2{
	height: 50px;
}

.demo .item3{
	height: 140px;
}

.demo .item4{
	height: 100px;
}

 

三、水平響應式列表底端對齊

和上個例子差不多，只是增加了底端對齊的的特性。

只是修改了容器的樣式：

.demo{
	width: 100%;

	/*flex布局（作用於容器）*/
	display: flex;

	/*兩端對齊（作用於容器）*/
	justify-content: space-around;

	/*側軸方向對齊方式（作用於容器）*/
	align-items: flex-end;
}

demo： http://demo.qianduanblog.com/2799/3.html

四、多行響應式布局

寬屏：

中屏：

窄屏：

HTML代碼：

<div class="demo-wrap">
	<div class="demo">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>

CSS代碼：

.demo-wrap{
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
}

.demo{
	width: 100%;

	/*flex布局（作用於容器）*/
	display: flex;

	/*兩端對齊（作用於容器）*/
	justify-content: space-around;

	/*側軸方向對齊方式（作用於容器）*/
	align-items: flex-end;

	/*換行（作用於容器）*/
	flex-wrap: wrap;
}

.demo .item{
	width: 300px;
	height: 50px;
	background: #444;
	margin-bottom: 20px;
}

 

五、左固定右自適應等高布局

演示截圖：

HTML：

<div class="demo">
	<div class="left">左邊固定寬度為100px，這里設置了高度為auto</div>
	<div class="right">右邊寬度自適應，並且左右兩個區域是等高的，這里設置了高度為200px</div>
</div>

CSS：

.demo{
	/*flex布局（作用於容器）*/
	display: flex;

	/*項目拉伸對齊，也就是所左邊的高度為拉伸到和右邊等高，默認是拉伸的*/
	/*align-items: stretch;*/
}

.demo .left{
	/*左邊固定寬度，必須設置其最小寬度和最大寬度*/
	width: 100px;
	min-width: 100px;
	max-width: 100px;

	/*高度自由分配*/
	height: auto;
	background: #B4D3F7;

	/*空白區域分配比例為0（作用於項目）*/
	flex-grow: 0;
}

.demo .right{
	margin-left: 10px;
	width: auto;
	height: 200px;
	background: #F7E8B4;

	/*空白區域分配比例為1（作用於項目）
	左右得到的空白比例為0:1，所以右邊會分配到剩余的所有空白區域，
	左邊成固定的寬度，右邊為自適應寬度*/
	flex-grow: 1;
}

 

六、左右固定中間自適應寬度底部對齊布局

上面的例子是左右布局的，相比較而言，雙欄布局會做了，那么三欄布局也就不是問題了。先看實例圖：

HTML：

<div class="demo">
	<div class="left">左邊固定寬度為100px，這里設置了高度為auto</div>
	<div class="center">中間寬度自適應，並且左中右兩個區域是等高的，這里設置了高度為200px</div>
	<div class="right">右邊固定寬度為150px，這里設置了高度為auto</div>
</div>

CSS：

.demo{
	/*flex布局（作用於容器）*/
	display: flex;

	/*項目拉伸對齊，也就是所左邊的高度為拉伸到和右邊底部對齊*/
	align-items: flex-end;
}

.demo .left{
	/*左邊固定寬度，必須設置其最小寬度和最大寬度*/
	width: 100px;
	min-width: 100px;
	max-width: 100px;

	/*高度自由分配*/
	height: auto;
	background: #B4D3F7;

	/*空白區域分配比例為0（作用於項目）*/
	flex-grow: 0;
}

.demo .center{
	margin: 0 10px;
	width: auto;
	height: 200px;
	background: #F7E8B4;

	/*空白區域分配比例為1（作用於項目）
	左右得到的空白比例為0:1，所以右邊會分配到剩余的所有空白區域，
	左邊成固定的寬度，右邊為自適應寬度*/
	flex-grow: 1;
}

.demo .right{
	/*右邊固定寬度，必須設置其最小寬度和最大寬度*/
	width: 150px;
	min-width: 150px;
	max-width: 150px;

	/*高度自由分配*/
	height: auto;
	background: #CBFFD2;

	/*空白區域分配比例為0（作用於項目）*/
	flex-grow: 0;
}

 

上次簡要的說了一些css3中flex的相關概念（詳細： css學習16：css3 flex流動自適應響應式布局設計 ），這次繼續說下css3的flex，簡單的舉幾個實例。

一、圖片自適應居中

實例圖：

實例HTML：

<div class="demo">
	<img src="http://dummyimage.com/100x100" alt="">
</div>

<div class="demo">
	<img class="" src="http://dummyimage.com/200x100" alt="">
</div>

<div class="demo">
	<img src="http://dummyimage.com/100x200" alt="">
</div>

<div class="demo">
	<img src="http://dummyimage.com/200x200" alt="">
</div>

<div class="demo">
	<img src="http://dummyimage.com/50x50" alt="">
</div>

實例CSS：

.demo{
	width: 100px;
	height: 100px;
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
	float: left;
	margin-left: 20px;

	/*flex布局（作用於容器）*/
	display: flex;

	/*水平居中（作用於容器）*/
	justify-content: center;

	/*垂直居中（作用於容器）*/
	align-items: center;
}

.demo img{
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
}

demo： http://demo.qianduanblog.com/2799/1.html

二、水平響應式列表

實例圖：

實例HTML：

<div class="demo-wrap">
	<div class="demo">
		<div class="item item1">高120px</div>
		<div class="item item2">高50px</div>
		<div class="item item3">高140px</div>
		<div class="item item4">高100px</div>
	</div>
</div>

實例CSS：

.demo-wrap{
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
}

.demo{
	width: 100%;

	/*flex布局（作用於容器）*/
	display: flex;

	/*兩端對齊（作用於容器）*/
	justify-content: space-between;
}

.demo .item{
	width: 100px;
	background: #ffd;
	color: #C90000;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
}

.demo .item1{
	height: 120px;
}

.demo .item2{
	height: 50px;
}

.demo .item3{
	height: 140px;
}

.demo .item4{
	height: 100px;
}

demo： http://demo.qianduanblog.com/2799/2.html

三、水平響應式列表底端對齊

和上個例子差不多，只是增加了底端對齊的的特性。

只是修改了容器的樣式：

.demo{
	width: 100%;

	/*flex布局（作用於容器）*/
	display: flex;

	/*兩端對齊（作用於容器）*/
	justify-content: space-around;

	/*側軸方向對齊方式（作用於容器）*/
	align-items: flex-end;
}

demo： http://demo.qianduanblog.com/2799/3.html

四、多行響應式布局

寬屏：

中屏：

窄屏：

HTML代碼：

<div class="demo-wrap">
	<div class="demo">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>

CSS代碼：

.demo-wrap{
	border: 2px solid #ddd;
	background: #f5f5f5;
	padding: 6px;
}

.demo{
	width: 100%;

	/*flex布局（作用於容器）*/
	display: flex;

	/*兩端對齊（作用於容器）*/
	justify-content: space-around;

	/*側軸方向對齊方式（作用於容器）*/
	align-items: flex-end;

	/*換行（作用於容器）*/
	flex-wrap: wrap;
}

.demo .item{
	width: 300px;
	height: 50px;
	background: #444;
	margin-bottom: 20px;
}

demo： http://demo.qianduanblog.com/2799/4.html

五、左固定右自適應等高布局

演示截圖：

HTML：

<div class="demo">
	<div class="left">左邊固定寬度為100px，這里設置了高度為auto</div>
	<div class="right">右邊寬度自適應，並且左右兩個區域是等高的，這里設置了高度為200px</div>
</div>

CSS：

.demo{
	/*flex布局（作用於容器）*/
	display: flex;

	/*項目拉伸對齊，也就是所左邊的高度為拉伸到和右邊等高，默認是拉伸的*/
	/*align-items: stretch;*/
}

.demo .left{
	/*左邊固定寬度，必須設置其最小寬度和最大寬度*/
	width: 100px;
	min-width: 100px;
	max-width: 100px;

	/*高度自由分配*/
	height: auto;
	background: #B4D3F7;

	/*空白區域分配比例為0（作用於項目）*/
	flex-grow: 0;
}

.demo .right{
	margin-left: 10px;
	width: auto;
	height: 200px;
	background: #F7E8B4;

	/*空白區域分配比例為1（作用於項目）
	左右得到的空白比例為0:1，所以右邊會分配到剩余的所有空白區域，
	左邊成固定的寬度，右邊為自適應寬度*/
	flex-grow: 1;
}

demo： http://demo.qianduanblog.com/2799/5.html

六、左右固定中間自適應寬度底部對齊布局

上面的例子是左右布局的，相比較而言，雙欄布局會做了，那么三欄布局也就不是問題了。先看實例圖：

HTML：

<div class="demo">
	<div class="left">左邊固定寬度為100px，這里設置了高度為auto</div>
	<div class="center">中間寬度自適應，並且左中右兩個區域是等高的，這里設置了高度為200px</div>
	<div class="right">右邊固定寬度為150px，這里設置了高度為auto</div>
</div>

CSS：

.demo{
	/*flex布局（作用於容器）*/
	display: flex;

	/*項目拉伸對齊，也就是所左邊的高度為拉伸到和右邊底部對齊*/
	align-items: flex-end;
}

.demo .left{
	/*左邊固定寬度，必須設置其最小寬度和最大寬度*/
	width: 100px;
	min-width: 100px;
	max-width: 100px;

	/*高度自由分配*/
	height: auto;
	background: #B4D3F7;

	/*空白區域分配比例為0（作用於項目）*/
	flex-grow: 0;
}

.demo .center{
	margin: 0 10px;
	width: auto;
	height: 200px;
	background: #F7E8B4;

	/*空白區域分配比例為1（作用於項目）
	左右得到的空白比例為0:1，所以右邊會分配到剩余的所有空白區域，
	左邊成固定的寬度，右邊為自適應寬度*/
	flex-grow: 1;
}

.demo .right{
	/*右邊固定寬度，必須設置其最小寬度和最大寬度*/
	width: 150px;
	min-width: 150px;
	max-width: 150px;

	/*高度自由分配*/
	height: auto;
	background: #CBFFD2;

	/*空白區域分配比例為0（作用於項目）*/
	flex-grow: 0;
}

demo： http://demo.qianduanblog.com/2799/6.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 css3 flex流動自適應響應式布局樣式類 響應式布局和自適應布局的不同 響應式布局與自適應布局的區別 響應式布局和自適應布局詳解 響應式布局和自適應布局詳解 響應式布局和自適應布局的不同 CSS3自適應布局之視口高度 如何實現自適應頁面 (響應式布局) css3響應式布局教程—css3響應式 CSS:Hack，響應式布局及自適應布局，px和em及rem的區別
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM