1.彈性盒子/伸縮盒子

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的齊齊哈爾網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

如果要使用彈性盒子屬性，首先要將父級元素變成彈性盒子

Flex-direction 設(shè)置伸縮盒子的內(nèi)部元素的排列方式

Row    從左到右安行排列

Column  從上到下按照列排列

Row-reverse   從右到左按照行排列

Column-reverse  從下到上按照列排列

Flex-shrink  設(shè)置彈性盒子的內(nèi)部元素的收縮方式

注意：所有盒子的默認(rèn)收縮方式都是1

Flex-grow   設(shè)置彈性盒子的擴(kuò)展比例

注意：所有盒子的默認(rèn)擴(kuò)展比率為0

Flex-basis   設(shè)置伸縮盒子內(nèi)部元素的基準(zhǔn)值

注意：所有元素默認(rèn)伸縮基準(zhǔn)值為元素的寬度

Flex-wrap 設(shè)置伸縮盒子的子元素超出的處理方式

Nowrap   自動收縮子元素以適應(yīng)盒子

Wrap     超出盒子換到下一行

Wrap-reverse   超出盒子換到上一行

Justify-content  設(shè)置伸縮盒子的子元素在水平方向的對齊方式

Flex-start   靠左對齊

Flex-end    靠右對齊

Center      居中對齊

Flex-between   兩端對齊

Flex-around    平均分布

如果flex-between和flex-around這兩個(gè)屬性不起作用的話可以換成

Space-between和space-around

Align-items  設(shè)置伸縮盒子的子元素的排列方式

Flex-start  在伸縮盒子的左上角排列

Flex-end   在伸縮盒子的左下角排列

Center     在伸縮盒子的中間排列

Baseline   在伸縮盒子的左上角基線排列

Strecth     拉伸所有的子元素同父元素等高

Align-self  針對伸縮盒子中的某個(gè)元素單獨(dú)設(shè)置排列方式

Auto   使用默認(rèn)方式

Flex-start   在伸縮盒子左上角排列

Flex-end   在伸縮盒子的左下角排列

Center     在伸縮盒子的中間排列

Baseline   在伸縮盒子的左上角基線排列

Strecth     拉伸所有的子元素同父元素等高

注意：該屬性是在align-items的基礎(chǔ)上對某個(gè)子元素進(jìn)行單獨(dú)設(shè)定

該屬性的默認(rèn)方式并不是左上角，而是父級添加的屬性

Align-content   設(shè)置伸縮盒子的子元素?fù)Q行后的對齊方式

注意：如果伸縮盒子的子元素沒有換行，那么該屬性無效

Flex-start  換行內(nèi)容靠左上角

Flex-end   換行內(nèi)容靠左下角

Center     換行內(nèi)容居中顯示

Space-between   換行內(nèi)容在垂直方向的頂部和底部分開

Space-around   各行在彈性盒子容器中平均分布，兩端保留子元素和子元素之間間距大小的一半

Strecth    拉伸子元素

Order  設(shè)置彈性盒子內(nèi)的子元素的排列順序

值為整數(shù)

數(shù)越小，排列越靠前

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：彈性盒子-創(chuàng)新互聯(lián)
新聞來源：http://jinyejixie.com/article26/cshjjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、全網(wǎng)營銷推廣、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)