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

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

一、盒模型

box-sizing

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

box-sizing

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

border-box

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

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

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

二、彈性盒模型

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

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供大的靈活性。

 1、display:flex/inline-flex

說明：flex： 將對象作為彈性伸縮盒顯示

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

設置為彈性盒（父元素添加）

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

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

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

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

          column：縱向排列。

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

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

說明：

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

          ■ flex-start默認，頂端對齊

          ■ flex-end末端對齊

          ■ center居中對齊

          ■ space-between兩端對齊，中間自動分配

          ■ space-around自動分配距離

4、flex-wrap

說明：

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

nowrap：flex容器為單行。該情況下flex子項可能會溢出容器

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

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

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

說明：

側(cè)軸對齊方式

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

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

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

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

          stretch：默認值。項目被拉伸以適應容器。

 6、align-content（行與行之間對齊方式）

說明：

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

          ■ flex-start沒有行間距

          ■ flex-end底對齊沒有行間距

          ■ center居中沒有行間距

          ■ space-between兩端對齊，中間自動分配

          ■ space-around自動分配距離

          ■  stretch  默認值。項目被拉伸以適應容器。

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

說明：

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

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

 auto 默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則  為 "stretch"。

Stretch 元素被拉伸以適應容器。

Center 元素位于容器的中心。

flex-start   元素位于容器的開頭。

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

8、flex三個屬性值介紹

flex-grow

定義項目的放大比例，默認為，即如果存在剩余空間也不放大

flex-shrink

定義了項目的縮小比例，默認為1，即如果空間不足該項目將縮小。負值對該屬性無效。

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

flex-basis

項目的長度

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

說明：

復合屬性。設置或檢索彈性盒模型對象的子元素如何分配空間。

縮寫「flex: 1」, 則其計算值為「1   1   %」

縮寫「flex: auto」, 則其計算值為「1   1   auto」

flex: none」, 則其計算值為「0   0  auto」

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

 10、order

說明：

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

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

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

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

廣告

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