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

搜索
博主信息
博文 35
粉絲 3
評(píng)論 0
訪問(wèn)量 31191
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
第七章 flex布局
隨風(fēng)
原創(chuàng)
752人瀏覽過(guò)

一、設(shè)置彈性元素的增長(zhǎng)因子

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>設(shè)置彈性元素的增長(zhǎng)因子</title>
    <link rel="stylesheet" href="static/css/1.css">
</head>
<body>
<h3>(1): 所有彈性元素不增長(zhǎng),以原始寬度顯示,增長(zhǎng)因子為: 0(默認(rèn))</h3>
<div class="container flex demo1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

<h3>(2): 將全部剩余空間分配給指定彈性元素,例如: 第三個(gè)</h3>
<div class="container flex demo2">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(3): 全部剩余空間按增長(zhǎng)因子在不同彈性元素間分配</h3>
<div class="container flex demo3">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(4): 增長(zhǎng)因子支持小數(shù), 因?yàn)槭前丛鲩L(zhǎng)比例分配</h3>
<div class="container flex demo4">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(5): 每個(gè)彈性元素寬度不同時(shí), 同樣適用以上分配規(guī)律</h3>
<div class="container flex demo5">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

@import "public.css";
.container{
    width: 550px;
}
.item {
    width: 100px;
}

.demo1 > .item {
  flex-grow: 0;

}
.demo2 > .item:first-of-type {
    flex-grow: 1;
}
.demo2 > .item:nth-of-type(2) {
    flex-grow: 0;

}
.demo2 > .item:last-of-type {
      flex-grow: 0;
}

.demo3 > .item:first-of-type{
    flex-grow: 2;
}
.demo3 > .item:nth-of-type(2) {
    flex-grow: 2;

}
.demo3 > .item:last-of-type {
    flex-grow: 6;
}
.demo4 > .item:first-of-type{
     flex-grow: 0.2;
 }
.demo4 > .item:nth-of-type(2) {
    flex-grow: 0.2;

}
.demo4 > .item:last-of-type {
    flex-grow: 0.6;
}

.demo5 > .item:first-of-type{
    width: 100px;
    flex-grow: 1;
}
.demo5 > .item:nth-of-type(2) {
    width: 150px;
    flex-grow: 2;

}
.demo5 > .item:last-of-type {
    width: 180px;
    flex-grow: 3;
}


/*
100+150+180=430
550-430=120
120/6=20
100+20=120
150+20*2=190
180+20*3=210



*/

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

image.png


二、設(shè)置彈性元素的縮減因子

實(shí)例

<body>
<h1>flex-shrink: 設(shè)置彈性元素的縮減因子</h1>

<h3>(1): 所有彈性元素不縮減,以原始寬度顯示,縮減因子為: 0</h3>
<div class="container flex demo1">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(2): 所有彈性元素自適應(yīng)容器寬度且不換行,縮減因子: 1 (默認(rèn))</h3>
<div class="container flex demo2">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(3): 當(dāng)三個(gè)彈性元素的縮減因?yàn)樽硬幌嗟葧r(shí)</h3>
<div class="container flex demo3">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(4): 縮減因子也可以是小數(shù),只要大于就可以</h3>
<div class="container flex demo4">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(5): 當(dāng)每個(gè)彈性元素寬度不一樣時(shí), 完全是另一道風(fēng)景線</h3>
<div class="container flex demo5">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

@import "public.css";
.container{
    width: 550px;
}

.item{
    width: 250px;
}

.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;
}

/*
1+2+3=6
750-550=200
200/6=33.3.
1*33.33=33.33
2*33.33=66.66
3*33.33=99.99
250-33.33=216.67
250-66.66=183.34
250-99.9=150.01
3




*/

.demo4 > .item:first-of-type{
    flex-shrink: 0.2;
}
.demo4 > .item:nth-of-type(2){
    flex-shrink: 0.2;
}

.demo4 > .item:last-of-type{
    flex-shrink: 0.6;
}
/*
0.2+0.2+0.6=1
200*0.2=40
200*0.6=120
250-40=210
250-120=130
*/

.demo5 > .item:first-of-type{
    width: 100px;
    flex-shrink: 2;
}
.demo5 > .item:nth-of-type(2){
    width: 250px;
    flex-shrink: 3 ;

}
.demo5 > .item:last-of-type{
    width: 300px;
    flex-shrink: 5;
}

/*
2+3+5=10
100+250+300=650-550=100
100/((100*2)+(250*3)+(300*5))=0.0408
0.0816  0.1224 0.204
100*0.0816=8.16
250*0.1224=30.6
100*0.3108=61.2
100-8.16=91.84
250-30.6=219.4
300-61.2=238.8
*/

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

image.png

三、設(shè)置彈性元素的基準(zhǔn)尺寸

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>設(shè)置彈性元素的基準(zhǔn)尺寸</title>
    <link rel="stylesheet" href="static/css/3.css">
</head>
<body>
<h1>flex-basis: 設(shè)置彈性元素的基準(zhǔn)尺寸</h1>

<h3>(1): 在未設(shè)置彈性元素寬度時(shí), 以內(nèi)容寬度顯示</h3>
<div class="container flex demo1">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(2): 存在自定義元素寬度時(shí),則以該寬度顯示</h3>
<div class="container flex demo2">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(3): 自動(dòng)狀態(tài)下, 由瀏覽器根據(jù)預(yù)設(shè)值自行判定</h3>
<div class="container flex demo3">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(4): 當(dāng)元素存在自定義寬度與基準(zhǔn)寬度時(shí), 以基準(zhǔn)寬度為準(zhǔn) </h3>
<div class="container flex demo4">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(5): 元素基準(zhǔn)寬度支持百分比設(shè)置 </h3>
<div class="container flex demo5">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

@import "public.css";

.container{

    width: 550px;
}
.demo1 >.item{
    flex-basis: content;
}
.demo2 >.item{
    width: 100px;
}
.demo3 >.item{
    flex-basis: auto;
}

.demo4 > .item{
    width: 100px;
    flex-basis: 150px;
}

.demo5 > .item:first-of-type{
  flex-basis: 20%;

}
.demo5 > .item:nth-of-type(2){
    flex-basis: 30%;
}
.demo5 > .item:last-of-type{
    flex-basis: 50%;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

image.png

四、簡(jiǎn)化彈性元素的基本設(shè)置

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡(jiǎn)化彈性元素的基本設(shè)置</title>
    <link rel="stylesheet" href="static/css/4.css">
</head>
<body>
<h1>簡(jiǎn)化彈性元素的基本設(shè)置</h1>

<h3>(1): 根據(jù)寬度計(jì)算,允許縮減適應(yīng)容器</h3>
<div class="container flex demo1">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(2): 根據(jù)寬度計(jì)算,元素完全彈性以適應(yīng)容器</h3>
<div class="container flex demo2">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(3): 元素完全失去彈性, 以原始大小呈現(xiàn)</h3>
<div class="container flex demo3">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(4): 一個(gè)數(shù)值表示增長(zhǎng)因子,其它值默認(rèn): flex: 1 1 auto</h3>
<div class="container flex demo4">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(5): 第三個(gè)有具體數(shù)值時(shí), 以它為計(jì)算標(biāo)準(zhǔn)</h3>
<div class="container flex demo5">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<h3>(6): 單獨(dú)設(shè)置某一個(gè)元素彈性大小 </h3>
<div class="container flex demo6">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

@import "public.css";
.container{
    width: 550px;
}

.demo1 > .item{
    width: 100px;
    height: 60px;
    flex: initial;
/*    flex: 0 1 auto*/
}

.demo2 > .item{
    width: 100px;
    height: 60px;
    flex: auto;
/*    flex: 1 1 auto*/
}

.demo3 > .item{
    width: 100px;
    height: 60px;
    flex: none;
/*    flex: 0 0 auto*/
}

.demo4 > .item{
    width: 100px;
    height: 60px;
    flex: 1;
/*    flex: 1  1 atto*/
}

.demo5 > .item{
    width: 100px;
    height: 60px;
    flex: 1 0 200px;
}

.demo6 > .item{
    width: 100px;
    height: 60px;

}
.demo6 > .item:last-of-type{
    flex: 1 0 0;
/*        flex: 1 1 50%;*/
/*        flex: 1 0 50%;*/
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

image.png

五、單獨(dú)設(shè)置元素在交叉軸上排列方式

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單獨(dú)設(shè)置元素在交叉軸上排列方式</title>
    <link rel="stylesheet" href="static/css/5.css">
</head>
<body>
<h1>單獨(dú)設(shè)置元素在交叉軸上排列方式</h1>

<div class="container flex">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>

</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

@import url(public.css);
.container{
    width: 550px;
    height: 300px;
    flex-flow: column nowrap;
    align-items: flex-end;

}
/*.item:first-of-type{*/
/*    align-self: flex-start;*/
/*}*/

/*.item:nth-of-type(2){*/
/*    align-self: flex-end;*/
/*}*/

/*.item:nth-of-type(3){*/
/*    align-self: center;*/
/*}*/

/*.item:nth-of-type(4){*/
/*    align-self:auto;*/
/*}*/

/*.item:nth-of-type(2){*/
/*    background-color: #9ad3d4;*/
/*    width: auto;*/
/*    align-self: stretch;*/
/*}*/
/*.item:last-of-type{*/
/*    align-self: self-start;*/
/*}*/
.item{
    width: 100px;
    height: 60%;
}

.item:first-of-type{
    align-self: flex-start;
}

.item:last-of-type{
    align-self: flex-end;

}
.item:nth-of-type(2){
    background-color: #888888;
    width: auto;
    align-self: stretch;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

image.png


六、order學(xué)習(xí)

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>order</title>
    <link rel="stylesheet" href="static/css/6.css">
</head>
<body>
<h2 >order演示</h2>
<div class="main">
    <div class=" order1">1</div>
    <div class=" order2">2</div>
    <div class=" order3">3</div>
    <div class=" order4">4</div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

.main{
    width: 400px;
    height: 150px;
    border: 1px solid black;
    /*display: -webkit-flex;*/
    display: flex;
}

.main >div{
    width: 50px;
    height: 50px;
    border: 1px solid brown;
}
.order1{
    background-color: yellow;
}
.order2{
    background-color: lime;
}
.order3{
    background-color: blue;
}
.order4{
    background-color: aqua;
}

.order1{
    order:4;
}
.order2{
    order:1;
}
.order3{
    order:3;
}
.order4{
    order:2;
}

/*.order1{*/
/*    order: initial;*/
/*}*/

/*.order2{*/
/*    order: revert;*/
/*}*/
/*.order1{*/
/*     order: inherit;*/
/* }*/
/*.order2{*/
/*    order: unset;*/
/*}*/

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

*{
    margin: 0;
    padding: 0;
}

.body{
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;

}
.header,
.footer{
    min-height: 100px;
    background-color: lightseagreen;
    flex: auto;
    text-align: center;
    font-size: 1.5rem;
}
.main{
    height: 70vh;
    background-color: lime;
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

image.png

七、移動(dòng)端首頁(yè)

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移動(dòng)端首頁(yè)</title>
    <link rel="stylesheet" href="static/css/8.css">
</head>
<body>

<header class="header">頭部</header>
<main class="main">主體</main>
<footer class="footer">底部</footer>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

image.png

八、彈性盒子仿寫圣杯布局

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈性盒子仿寫圣杯布局</title>
    <link rel="stylesheet" href="static/css/9.css">
</head>
<body>
<header>頭部</header>
<main>
    <article>
        內(nèi)容區(qū)
    </article>
    <aside class="left">左側(cè)</aside>
    <aside class="right">右側(cè)</aside>
</main>
<footer>底部</footer>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

*{
    margin: 0;
    padding: 0;
}

html,body{
    height: 900px;
    border: 1px solid black;
}
body{
    display: flex;
    flex-direction: column;
}

header{
    flex: 0 0 50px;
    border: 1px solid black;
    background-color: #9ad3d4;
}

footer{
    flex: 0 0 60px;
    background-color: #444444;
}

main{
    display: flex;
    background-color: blue;
    flex: 1;

    text-align: center;
    font-size: 2rem;


}
article{
    flex-grow: 1;
    order: 2;
    background-color: lime;
    width: 70%;
}

.right{
    order: 3;
    background-color: yellow;
    width: 15%;
}
.left{
    width: 15%;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

image.png


九手寫flex屬性

image.png

十、程序抄寫

image.png


image.png

image.png

image.png

image.png


image.png

image.png

十一、總結(jié)

學(xué)習(xí)了flex的布局，但是有個(gè)問(wèn)題請(qǐng)答復(fù)一下

.demo5 > .item:first-of-type{
   width: 100px;
   flex-shrink: 2;
}
.demo5 > .item:nth-of-type(2){
   width: 250px;
   flex-shrink: 3 ;

}
.demo5 > .item:last-of-type{
   width: 300px;
   flex-shrink: 5;
}

/*
2+3+5=10
100+250+300=650-550=100
100/((100*2)+(250*3)+(300*5))=0.0408
0.0816  0.1224 0.204
100*0.0816=8.16
250*0.1224=30.6
300*0.204=61.2
100-8.16=91.84
250-30.6=219.4
300-61.2=238.8
*/

算法有無(wú)問(wèn)題，我允許后發(fā)現(xiàn)對(duì)不上

允許后的數(shù)字為

94.28

219.27

236.48

請(qǐng)告知我那點(diǎn)計(jì)算有誤



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

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

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

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