本篇內(nèi)容主要講解“CSS3中彈性盒的詳細(xì)介紹”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS3中彈性盒的詳細(xì)介紹”吧!

公司主營(yíng)業(yè)務(wù)：做網(wǎng)站、成都做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)推出日喀則免費(fèi)做網(wǎng)站回饋大家。

一、盒模型

box-sizing

box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

box-sizing

box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

border-box

為元素設(shè)定的寬度和高度決定了元素的邊框盒。

就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。

通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

二、彈性盒模型

布局的傳統(tǒng)解決方案，基于盒模型，依賴(lài) display 屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。

Flex 是 Flexible Box 的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供大的靈活性。

 1、display:flex/inline-flex

說(shuō)明：flex： 將對(duì)象作為彈性伸縮盒顯示

          inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示

設(shè)置為彈性盒（父元素添加）

2、flex-direction (主軸排列方向)

說(shuō)明： 順序指定了彈性子元素在父容器中的位置

　　　　  row  默認(rèn)橫向一行內(nèi)排列

          row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。

          column：縱向排列。

          column-reverse：反轉(zhuǎn)縱向排列，從下往上排，最后一項(xiàng)排在最上面

 3、justify-content(主軸對(duì)齊方式)

說(shuō)明：

內(nèi)容對(duì)齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線(xiàn)（main axis）對(duì)齊

          ■ flex-start默認(rèn)，頂端對(duì)齊

          ■ flex-end末端對(duì)齊

          ■ center居中對(duì)齊

          ■ space-between兩端對(duì)齊，中間自動(dòng)分配

          ■ space-around自動(dòng)分配距離

4、flex-wrap

說(shuō)明：

該屬性控制flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向。

nowrap：flex容器為單行。該情況下flex子項(xiàng)可能會(huì)溢出容器

wrap：flex容器為多行。該情況下flex子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行

wrap-reverse：反轉(zhuǎn) wrap 排列。

 5、align-items（側(cè)軸對(duì)齊方式）

說(shuō)明：

側(cè)軸對(duì)齊方式

flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。

flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。

center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。

baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線(xiàn)對(duì)齊。

          stretch：默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。

 6、align-content（行與行之間對(duì)齊方式）

說(shuō)明：

當(dāng)伸縮容器的側(cè)軸還有多余空間時(shí)，本屬性可以用來(lái)調(diào)整「伸縮行」在伸縮容器里的對(duì)齊方式，這與調(diào)整伸縮項(xiàng)目在主軸上對(duì)齊方式的 <' justify-content'> 屬性類(lèi)似。請(qǐng)注意本屬性在只有一行的伸縮容器上沒(méi)有效果。

          ■ flex-start沒(méi)有行間距

          ■ flex-end底對(duì)齊沒(méi)有行間距

          ■ center居中沒(méi)有行間距

          ■ space-between兩端對(duì)齊，中間自動(dòng)分配

          ■ space-around自動(dòng)分配距離

          ■  stretch  默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。

 7、align-self（加給子元素）

說(shuō)明：

align-self 屬性規(guī)定靈活容器內(nèi)被選中項(xiàng)目的對(duì)齊方式。

注意：align-self 屬性可重寫(xiě)靈活容器的 align-items 屬性。

 auto 默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。如果沒(méi)有父容器則  為 "stretch"。

Stretch 元素被拉伸以適應(yīng)容器。

Center 元素位于容器的中心。

flex-start   元素位于容器的開(kāi)頭。

flex-end     元素位于容器的結(jié)尾。

8、flex三個(gè)屬性值介紹

flex-grow

定義項(xiàng)目的放大比例，默認(rèn)為，即如果存在剩余空間也不放大

flex-shrink

定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足該項(xiàng)目將縮小。負(fù)值對(duì)該屬性無(wú)效。

收縮量的計(jì)算方式：（元素寬度*收縮比例/元素*收比例    相加）*溢出寬度

flex-basis

項(xiàng)目的長(zhǎng)度

 9、flex（flex-grow，flex-shrink、flex-basis）

說(shuō)明：

復(fù)合屬性。設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。

縮寫(xiě)「flex: 1」, 則其計(jì)算值為「1   1   %」

縮寫(xiě)「flex: auto」, 則其計(jì)算值為「1   1   auto」

flex: none」, 則其計(jì)算值為「0   0  auto」

flex: 0 auto」或者「flex: initial」, 則其計(jì)算值為「0 1 auto」，即「flex」初始值

 10、order

說(shuō)明：

number排序優(yōu)先級(jí)，數(shù)字越大越往后排，默認(rèn)為，支持負(fù)數(shù)。

到此，相信大家對(duì)“CSS3中彈性盒的詳細(xì)介紹”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享名稱(chēng)：CSS3中彈性盒的詳細(xì)介紹-創(chuàng)新互聯(lián)
URL地址：http://www.chinadenli.net/article6/dijoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、外貿(mào)建站、網(wǎng)站收錄、電子商務(wù)、企業(yè)網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(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)