亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 34
粉絲 0
評論 0
訪問量 28358
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS彈性布局：彈性元素的常用屬性-九期線上班
只貓
原創(chuàng)
1428人瀏覽過

一、彈性元素的增長因子屬性 flex-grow

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>彈性元素的增長因子</title>
	<link rel="stylesheet" type="text/css" href="static/css/style1.css">
</head>
<body>
	<h2>1.默認(rèn)flex-grow:0 不增長</h2>
	<div class="container flex demo1">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>2.flex-grow:1 增長</h2>
	<div class="container flex demo2">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>3.按增長因子比例分配給元素</h2>
	<div class="container flex demo3">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>4.小數(shù)增長因子，計(jì)算方法與整數(shù)相同</h2>
	<!-- 增長因子只要大于一就是增長 -->
	<div class="container flex demo4">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>5.彈性元素不同寬度,計(jì)算方法相同</h2>
	<!-- 增長因子只要大于一就是增長 -->
	<div class="container flex demo5">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
</body>
</html>
@import "public.css";
.container{
	width: 400px;
}

.item{
	width:100px;
}

.demo1>.item{
	/*默認(rèn)值，不要增長*/
	flex-grow: 0;
}
/*-------------------------------*/
.demo2 > .item:first-of-type {
    flex-grow: 0;
}
.demo2 > .item:nth-of-type(2) {
    flex-grow: 0;
}
.demo2 > .item:last-of-type {
    flex-grow: 1;
}
/*-------------------------------*/
.demo3 > .item:first-of-type {
    flex-grow: 1;
}
.demo3 > .item:nth-of-type(2) {
    flex-grow: 1;
}
.demo3 > .item:last-of-type {
    flex-grow: 3;
}
/*-------------------------------*/
.demo4 > .item:first-of-type {
    flex-grow: 0.6;
}
.demo4 > .item:nth-of-type(2) {
    flex-grow: 0.7;
}
.demo4 > .item:last-of-type {
    flex-grow: 0.9;
}
/*-------------------------------*/
.demo5 > .item:first-of-type {
	width: 80px;
    flex-grow: 0.6;
}
.demo5 > .item:nth-of-type(2) {
	width: 80px;
    flex-grow: 0.7;
}
.demo5 > .item:last-of-type {
	width: 160px;
    flex-grow: 0.9;
}

1573025193958940.png

二、彈性元素的縮減因子屬性 flex-shrink

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>彈性元素的縮減因子</title>
	<link rel="stylesheet" type="text/css" href="static/css/style2.css">
</head>
<body>
	<h2>1.默認(rèn)狀態(tài)允許縮減，flex-shrink:0設(shè)置不縮減</h2>
	<div class="container flex demo1">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>2.縮減因子flex-shrink: 1 默認(rèn)</h2>
	<div class="container flex demo2">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>3.縮減因子不相等</h2>
	<div class="container flex demo3">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>4.縮減因子為小數(shù)</h2>
	<div class="container flex demo4">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>5.彈性元素寬度不同</h2>
	<div class="container flex demo5">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
</body>
</html>
@import "public.css";
.container{
	width: 400px;
}
.item{
	width: 150px;
}
.demo1>.item{
	flex-shrink: 0;
}
/*--------------------------*/
.demo2>.item{
	flex-shrink: 1;
}
/*--------------------------*/
.demo3>.item:first-of-type{
	flex-shrink: 1;
}
.demo3>.item:nth-of-type(2){
	flex-shrink: 2;
}
.demo3>.item:last-of-type{
	flex-shrink: 3;
}
/*--------------------------*/
.demo4>.item:first-of-type{
	flex-shrink: 0.5;
}
.demo4>.item:nth-of-type(2){
	flex-shrink: 0.8;
}
.demo4>.item:last-of-type{
	flex-shrink: 0.1;
}
/*--------------------------*/
.demo5>.item:first-of-type{
	width: 300px;
	flex-shrink: 1;
}
.demo5>.item:nth-of-type(2){
	width: 100px;
	flex-shrink: 1;
}
.demo5>.item:last-of-type{
	width: 200px;
	flex-shrink: 1;
}

1573029753249630.png

三、彈性元素的基準(zhǔn)尺寸 flex-basis

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>彈性元素的基準(zhǔn)尺寸</title>
	<link rel="stylesheet" type="text/css" href="static/css/style3.css">
</head>
<body>
	<h2>1.默認(rèn)：未設(shè)置元素寬度時(shí)是內(nèi)容寬度content</h2>
	<div class="container flex demo1">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>2.設(shè)置元素寬度顯示為設(shè)置寬度</h2>
	<div class="container flex demo2">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>3.flex-basis: auto =content默認(rèn)寬度</h2>
	<div class="container flex demo3">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>4.元素既有自定義寬度又有基準(zhǔn)寬度,以基準(zhǔn)寬度為準(zhǔn)</h2>
	<div class="container flex demo4">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>5.元素基準(zhǔn)尺寸支持百分比</h2>
	<div class="container flex demo5">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
</body>
</html>
@import "public.css";
.container{
	width: 400px;
}

.demo1>.item{
	flex-basis: content;
}

.demo2>.item{
	width: 100px;
}

.demo3>.item{
	flex-basis: auto;
}
.demo4>.item{
	width: 100px;
	flex-basis: 120px;
}
.demo5>.item:first-of-type{
	flex-basis: 30%;
}
.demo5>.item:nth-of-type(2){
	flex-basis: 40%;
}
.demo5>.item:last-of-type{
	flex-basis: 30%;
}

1573032804309672.png


四、彈性元素屬性的縮寫 flex

格式：flex: 增長因子 縮減因子 基準(zhǔn)因子

                  flex-grow flex-shrink flex-basis

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>彈性元素屬性的縮寫</title>
	<link rel="stylesheet" type="text/css" href="static/css/style4.css">
</head>
<body>
	<h2>1.默認(rèn)初始 flex:0 1 auto=flex:inital</h2>
	<div class="container flex demo1">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>2.全適應(yīng) flex: 1 1 auto=flex:auto</h2>
	<div class="container flex demo2">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>3.失去彈性呈現(xiàn)原始大小 flex: 0 0 auto=flex:none</h2>
	<div class="container flex demo3">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>4.只有一個(gè)數(shù)值代表增長因子</h2>
	<div class="container flex demo4">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>5.三個(gè)數(shù)值 分別控制</h2>
	<div class="container flex demo5">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
	<h2>6.誰設(shè)定可增長，剩余空間就會分配給它</h2>
	<div class="container flex demo6">
		<span class="item">item1</span>
		<span class="item">item2</span>
		<span class="item">item3</span>
	</div>
</body>
</html>
@import "public.css";
.container{
	width: 400px;
}

.demo1>.item{
	width: 100px;
	height: 60px;
	flex: 0 1 auto;
	/*不允許增長 允許縮小 基準(zhǔn)尺寸為content*/
	flex: initial;
}

.demo2>.item{
	width: 100px;
	height: 60px;
	flex: 1 1 auto;
	/*允許增長 允許縮小 基準(zhǔn)尺寸為content*/
	flex:auto;
}

.demo3>.item{
	width: 120px;
	height: 60px;
	flex: 0 0 auto;
	/*允許增長 允許縮小 基準(zhǔn)尺寸為content*/
	flex:none;
}
.demo5>.item{
	width: 100px;
	height: 60px;
	flex: 1 1 200px;
}
.demo6>.item{
	width: 100px;
	height: 60px;
}
.demo6>.item:first-of-type{
	flex:1 0 10px;
}
1573035664496143.png

手抄flex的用法

1573040881915567.png

align-self, order的用法

align-self 單獨(dú)定義彈性元素在側(cè)軸上的對齊方式。

默認(rèn)值 auto，繼承父容器的align-item對齊方式，如果沒有則為stretch。

可設(shè)置屬性值 center：在側(cè)軸居中、flex-start：在側(cè)軸起點(diǎn)、flex-end：在側(cè)軸終點(diǎn)。

order屬性可以設(shè)定彈性元素在容器中的排列順序，默認(rèn)是按html文檔書寫的順序進(jìn)行排列。

設(shè)置order:數(shù)字(1,2,3,4....)可以調(diào)換他們的位置。

將圣杯布局改為彈性布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局flex模式</title>
	<link rel="stylesheet" type="text/css" href="static/css/style6.css">
</head>
<body>
	<header>頭部</header>
	<main>
		<!-- 主題內(nèi)容區(qū)優(yōu)先渲染 -->
		<article>主體</article>
		<aside class="left">左</aside>
		<aside class="right">右</aside>
	</main>
	<footer>底部</footer>
</body>
</html>
*{
	margin: 0;
	padding: 0;
}
body{
	width: 1000px;
	display: flex;
	flex-flow: column nowrap;
}
header,footer{
	box-sizing: border-box;
	height: 50px;
	background: lightgrey;
	text-align: center;
}
main{
	box-sizing: border-box;
	flex: 1;
	display: flex;
	min-height: 600px;
}
aside{
	box-sizing: border-box;
	width: 200px;
}
article{
	box-sizing: border-box;
	flex: 1;
	
	background-color: lightpink;
}
.left{
	background-color: lightgreen;
	order: -1;
}
.right{
	background-color: lightblue;
}

手抄代碼

1573052774251595.png

總結(jié)：理解了增長因子縮減因子按比例調(diào)整彈性元素的計(jì)算方法，還有元素不同大小下的計(jì)算方法。一些地方的屬性控制是重疊的，設(shè)置一個(gè)就可以達(dá)到效果，其他屬性會失去意義。簡寫方面還需對這些屬性值更加了解熟悉。


批改狀態(tài)：合格

老師批語：很認(rèn)真, 加油
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)