彈性盒子-創(chuàng)新互聯(lián)

1.彈性盒子/伸縮盒子

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

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

Flex-direction 設置伸縮盒子的內部元素的排列方式

Row    從左到右安行排列

Column  從上到下按照列排列

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

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

Flex-shrink  設置彈性盒子的內部元素的收縮方式

注意:所有盒子的默認收縮方式都是1

Flex-grow   設置彈性盒子的擴展比例

注意:所有盒子的默認擴展比率為0

Flex-basis   設置伸縮盒子內部元素的基準值

注意:所有元素默認伸縮基準值為元素的寬度

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

Nowrap   自動收縮子元素以適應盒子

Wrap     超出盒子換到下一行

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

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

Flex-start   靠左對齊

Flex-end    靠右對齊

Center      居中對齊

Flex-between   兩端對齊

Flex-around    平均分布

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

Space-between和space-around

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

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

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

Center     在伸縮盒子的中間排列

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

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

Align-self  針對伸縮盒子中的某個元素單獨設置排列方式

Auto   使用默認方式

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

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

Center     在伸縮盒子的中間排列

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

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

注意:該屬性是在align-items的基礎上對某個子元素進行單獨設定

該屬性的默認方式并不是左上角,而是父級添加的屬性

Align-content   設置伸縮盒子的子元素換行后的對齊方式

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

Flex-start  換行內容靠左上角

Flex-end   換行內容靠左下角

Center     換行內容居中顯示

Space-between   換行內容在垂直方向的頂部和底部分開

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

Strecth    拉伸子元素

Order  設置彈性盒子內的子元素的排列順序

值為整數(shù)

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

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

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

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

廣告

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

網(wǎng)站優(yōu)化排名