css中flex彈性布局的示例分析-創(chuàng)新互聯(lián)
這篇文章將為大家詳細(xì)講解有關(guān)css中flex彈性布局的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)、網(wǎng)站重做改版、堯都網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為堯都等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。案例基礎(chǔ)布局
html
<ul class="box"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
css
.box{
display: -webkit-flex;
display: flex;
}
.item{
width: 200px;
height: 300px;
background: red;
border: 1px solid #ccc;
font-size: 50px;
text-align: center;
line-height: 300px;
color:#fff;
}因?yàn)閒lex主要方便與移動(dòng)端布局，所以測(cè)試以谷歌模擬移動(dòng)端看效果：
因?yàn)槭褂?flex 布局，子元素默認(rèn)是橫向排列，所以不需要float，也不起作用；
父盒子屬性探究
flex-direction
flex-direction 表示子元素的排列方向和順序；默認(rèn) row （橫排，左到右）； row-reverse 表示 橫排右到左
.box{
display: -webkit-flex;
display: flex;
flex-direction:row-reverse;
}
如果每個(gè)把每個(gè) li 設(shè)置為 width：3000px;(當(dāng)前屏幕寬度980px),效果：
子元素寬度超出，不但沒(méi)有換行，會(huì)自動(dòng)適應(yīng)大小，平分為 25%；
上面的平分 只是在 row 的時(shí)候 會(huì)平分，如果是換成豎向排列：
flex-direction: column;
元素不會(huì)被擠壓了，擁有3000px寬；但是要注意，它不是因?yàn)椴粔蚩臻g而換行了，只是column 值規(guī)定了它 豎向排列
下面的值可以調(diào)整為 倒序豎向排列
flex-direction: column-reverse; //表示元素豎直 反向排
flex-wrap
flex-wrap 默認(rèn) nowrap：不換行。上面的3000px 子元素正是因?yàn)?這個(gè)豎向默認(rèn)是不會(huì)換行的，所以 上面設(shè)置3000px寬，不會(huì)換行；
同樣的代碼，如果加多一句
.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap; //換行，第一行在上方。
}
可以發(fā)現(xiàn)，設(shè)置為可以換行以后，子元素寬度變?yōu)?00%屏幕寬了；這就像一個(gè)彈性盒子塞到了比自己小的盒子中，彈性盒子自動(dòng)收縮了自己的寬度。
如果這樣寫(xiě)：
.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap-reverse; //換行，第一行在下方。
}
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap。
flex-flow：row wrap === flex-direction:row; flex-wrap: wrap
代碼又改一下：
.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
}
可以寫(xiě)成
.box{
display: -webkit-flex;
display: flex;
flex-flow:row-veverse wrap-reverse
}justify-content
它有五個(gè)值，其中如果把 item 比做word文檔的文字的話(huà), flex-star 可以看做是左對(duì)齊， flex-end： 右對(duì)齊； flex-center： 居中；
重點(diǎn)介紹值 space-around:平分內(nèi)容空余空間，每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等;
設(shè)空余空間為 area，有子元素 k個(gè)，每個(gè)子元素等于增加了多少margin？==> area/2k
本例子：
.item{
width:200px;
}
.box{
display: -webkit-flex;
display: flex;
justify-content: space-around;
}
值得注意的是，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。不給
align-items
align 字樣基本就知道它是針對(duì) 垂直方向的了；
.box{
display: -webkit-flex;
display: flex;
justify-content: space-between;
height: 1760px;
align-items: center;
}記得給父加一個(gè)高度；這樣子可以看出元素垂直居中了
其他的相似的屬性就不再一一寫(xiě)了
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。
看 baseline屬性: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊。
這個(gè)屬性 比較新穎，可以試試：
.box{
align-items: baseline;
}
<ul class="box">
<li class="item" style="height: 150px;line-height: 150px">1</li>
<li class="item" style="height: 500px;line-height: 500px">2</li>
<li class="item" style="height: 250px;line-height: 250px">3</li>
<li class="item" style="height: 170px;line-height: 170px">4</li>
</ul>上面我給每個(gè)item 都設(shè)置了 不同的高度 和 line-height;
可以看到 容器為了讓文字對(duì)齊 而調(diào)整自己的位置；
align-content
定義了多根軸線(xiàn)的對(duì)齊方式。如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用。
.box{
height: 1760px; //高度要撐開(kāi)
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-flow: row wrap; //橫排 換行；產(chǎn)生多軸
}
<ul class="box">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
嘗試添加 代碼
align-content: flex-end;
align-content:space-around;
align-content:space-between;
align-content : center;
可以說(shuō)，flex布局在父元素上對(duì)子元素垂直方向的控制還是非常到位和明確的；
子元素屬性探究
order
大概可以理解為子元素的排隊(duì)號(hào)碼，默認(rèn)都是0，越大排隊(duì)越后；
<ul class="box"> <li class="item" style="order:10">1</li> <li class="item" style="order:11">2</li> <li class="item">3</li> <li class="item">4</li> <li class="item">5</li> <li class="item">6</li> <li class="item">7</li> <li class="item">8</li> <li class="item">9</li> </ul>
可以看到，1 號(hào)因?yàn)?order 設(shè)置為10排到了后面； 而2號(hào)因?yàn)楦哟蟮膐rder 而排到最后。
flex-grow 多余空間分配比例
它的值是一個(gè)number，默認(rèn)為0；只要有一個(gè)同軸元素被設(shè)定了flex-grow ，所有多余空間都會(huì)按照這個(gè)比例分配，并讓元素占滿(mǎn)整行。這個(gè)被分配的空間，是算在自身里面的；
<ul class="box"> <li class="item" style="flex-grow:1;">1</li> <li class="item" style="flex-grow:2;">2</li> <li class="item">3</li> <li class="item">4</li> <li class="item">5</li> <li class="item">6</li> <li class="item">7</li> <li class="item">8</li> <li class="item">9</li> </ul>
盒子寬度變大了，（就是grow啦）
如果子元素有margin，那么會(huì)先計(jì)算橫排多少個(gè)，再?zèng)Q定 flex-grow 分配的空間是多少
例如如下代碼，
//沒(méi)有設(shè)定 flex-grow 時(shí) <li class="item" style="flex-grow:0;margin: 0 100px;">1</li> <li class="item" style="flex-grow:0;">2</li>
//設(shè)定了 flex-grow 時(shí) <li class="item" style="flex-grow:2;margin: 0 100px;">1</li> <li class="item" style="flex-grow:1;">2</li>
所以，margin 并不算 多余空間 ，不會(huì)被重新分配；
flex-shrink
此屬性與 flex-grow 有點(diǎn)相反的意思，用于處理 不換行時(shí)，內(nèi)容超出屏幕了，應(yīng)該決定誰(shuí)來(lái)縮??；
值越大 縮小比例越大；默認(rèn)是 1
改一下代碼；
.box{
flex-flow:row nowrap;
}
<ul class="box">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
此時(shí) 父盒子規(guī)定不能換行；但是5個(gè)item 寬度已經(jīng)超過(guò)屏幕寬了；此時(shí)大家是等比縮小
下面設(shè)置1號(hào) flex-shrink：600
<ul class="box"> <li class="item" style="flex-shrink:600;">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item">4</li> <li class="item">5</li> </ul>
可以看到，盡管我把1號(hào)設(shè)置到縮放非常大了，但是實(shí)際寬度并沒(méi)有很??；說(shuō)明瀏覽器會(huì)自己決定內(nèi)容是否已經(jīng)足夠放下，夠了就停止縮放；
<ul class="box"> <li class="item" style="flex-shrink:600;">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item" style="flex-shrink:200;">4</li> <li class="item">5</li> <li class="item">6</li> <li class="item">7</li> <li class="item">8</li> <li class="item">9</li> </ul>
當(dāng)內(nèi)容非常多時(shí)，1號(hào)就明顯被縮放得非常厲害，同時(shí)我發(fā)現(xiàn)，4號(hào)盡管設(shè)置200，但是它的大小跟被設(shè)為600的 1號(hào)是一樣的。
這是因?yàn)樗麄円呀?jīng)縮放到最后只能容納文字的空間了；所以就不會(huì)再縮放下去；這跟文字占位一個(gè)道理
flex-basis
屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。
簡(jiǎn)單來(lái)說(shuō)，就是這個(gè)值會(huì)影響瀏覽器計(jì)算的輸入值，有四種情況
1，本來(lái)就會(huì)超出，然后你設(shè)定的值比原值低（原值200px每個(gè)item），你的元素會(huì)被壓縮。
<ul class="box"> <li class="item" style="flex-basis:100px;">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item" style="">4</li> <li class="item">5</li> <li class="item">6</li> <li class="item">7</li> <li class="item">8</li> <li class="item">9</li> </ul>
1，本來(lái)就會(huì)超出，然后你設(shè)定的值比原值大，你的元素會(huì)被相對(duì)放大些。
<ul class="box"> <li class="item" style="flex-basis:600px;">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item" style="">4</li> <li class="item">5</li> <li class="item">6</li> <li class="item">7</li> <li class="item">8</li> <li class="item">9</li> </ul>
3 本來(lái)不會(huì)超出，你設(shè)定的值比原來(lái)小，你還是會(huì)小一點(diǎn)
<ul class="box"> <li class="item" style="flex-basis:100px;">1</li> <li class="item">2</li> <li class="item">3</li> </ul>
4 本來(lái)不會(huì)超出，你設(shè)定的值比原來(lái)大，你就會(huì)更大
<ul class="box"> <li class="item" style="flex-basis:600px;">1</li> <li class="item">2</li> <li class="item">3</li> </ul>
這個(gè)值你可以當(dāng)做寬度來(lái)看，當(dāng)設(shè)定為 跟原來(lái)一樣的值得時(shí)候，基本沒(méi)有變化
<ul class="box"> <li class="item" style="flex-basis:200px;">1</li> <li class="item">2</li> <li class="item">3</li> </ul>
align-self
此子元素單獨(dú)設(shè)置垂直方向?qū)R方式；默認(rèn)auto 表示父親怎么定義就怎么來(lái)；其他值跟align-items是一樣的
<ul class="box"> <li class="item" style="align-self: center">1</li> <li class="item" style="align-self: flex-end">2</li> <li class="item">3</li> <li class="item">4</li> <li class="item" style="align-self: center">5</li> </ul>
此屬性主要是方便特殊定位 某個(gè)字元素
flex屬性
是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。
關(guān)于“css中flex彈性布局的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
本文名稱(chēng)：css中flex彈性布局的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://jinyejixie.com/article42/ccsehc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站收錄、定制網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- MFS分布式存儲(chǔ)搭建詳解-創(chuàng)新互聯(lián)
- php安裝配置redis的方法-創(chuàng)新互聯(lián)
- django框架合適用來(lái)開(kāi)發(fā)大型網(wǎng)站嗎-創(chuàng)新互聯(lián)
- C語(yǔ)言實(shí)現(xiàn)棧結(jié)構(gòu)-創(chuàng)新互聯(lián)
- 安卓手機(jī)如何掃描證件安卓手機(jī)如何掃描文件？-創(chuàng)新互聯(lián)
- python控制windows剪貼板,向剪貼板中寫(xiě)入圖片的實(shí)例-創(chuàng)新互聯(lián)
- ThinkPHP5怎么動(dòng)態(tài)生成圖片縮略圖-創(chuàng)新互聯(lián)
移動(dòng)網(wǎng)站建設(shè)知識(shí)
- 移動(dòng)網(wǎng)站建設(shè)體驗(yàn)決定成敗 2021-12-12
- 移動(dòng)網(wǎng)站建設(shè):如何從用戶(hù)的角度來(lái)設(shè)計(jì) 2021-07-17
- 成都移動(dòng)網(wǎng)站建設(shè)中長(zhǎng)滾動(dòng)頁(yè)面的優(yōu)勢(shì) 2020-08-22
- 移動(dòng)網(wǎng)站建設(shè)其實(shí)也有硬傷 怎樣做才能有效預(yù)防呢 2016-05-09
- 如何做好移動(dòng)網(wǎng)站建設(shè)極簡(jiǎn)設(shè)計(jì) 2016-09-30
- 移動(dòng)網(wǎng)站建設(shè)有哪些參照標(biāo)準(zhǔn) 2021-09-03
- 移動(dòng)網(wǎng)站建設(shè)和優(yōu)化需要注意的幾點(diǎn) 2021-09-16
- 移動(dòng)網(wǎng)站建設(shè)需要注意的地方 2014-09-09
- 成都網(wǎng)站建設(shè)與移動(dòng)網(wǎng)站建設(shè)的關(guān)系 2016-10-29
- 移動(dòng)網(wǎng)站建設(shè)成本的數(shù)據(jù)分析 2016-08-21
- 成都網(wǎng)站建設(shè)：移動(dòng)網(wǎng)站建設(shè)要點(diǎn)分享！ 2016-11-08
- 分析企業(yè)移動(dòng)網(wǎng)站建設(shè)的必要性！ 2016-12-13