CSS3彈性盒子基礎知識有哪些

本篇內容主要講解“CSS3彈性盒子基礎知識有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS3彈性盒子基礎知識有哪些”吧!

　　一、簡單介紹

　　??彈性盒模型( Flexible Box或FlexBox)是一個CSS3新增布局模塊，官方稱為CSS Flexible Box Layout Module，用于實現容器里項目的對齊、方向、排序(即使在項目大小位置、動態生成的情況), 分配空白空間 。彈性盒模型最大的特性在于，能夠動態修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的恰當布局。

　　二、基本知識

　　??彈性盒子是由彈性容器(flex container)和彈性子元素(flex item)組成，彈性盒子有一個主軸(main axis)和一個縱軸(cross axis)，彈性子元素沿著主軸依次排列 ，側軸垂直于主軸。彈性容器的主軸開始(main start)、主軸結束(main end)和側軸開始(cross start)、側軸結束(cross end)代表了彈性子元素排列的起始和結束位置。具體可以看下面的圖。

　　三、屬性分類

　　1. 彈性容器的相關屬性

　　屬性屬性說明

　　flex-direction設置主軸方向，確定彈性子元素的排列方式

　　flex-wrap當彈性子元素超出彈性容器范圍時是否換行

　　flex-flowflex-direction和flex-wrap的快捷方式，復合屬性

　　justify-content設置彈性子元素主軸上的對齊方式

　　align-items設置彈性子元素側軸上的對齊方式

　　align-content側軸上有空白時且有多行時，設置彈性子元素側軸的對齊方式

　　a. flex-direction屬性

　　使用方法：flex-direction:row |row-reverse |column |column-reverse

　　屬性值含義

　　row(默認值)主軸為水平方向。排序方向與頁面的文檔順序相同。如果文檔順序是ltr，則排列順序是從左到右;如果文檔順序是rtl，則排列順序是從右到左。

　　row-reverse主軸為水平方向。排序方向與頁面的文檔順序相反。

　　column主軸為垂直方向。排列順序為從上到下

　　column-reverse主軸為垂直方向。排列順序為從下到上

　　其屬性的效果圖如下：

　　b. flex-wrap屬性

　　使用方法：flex-wrap: nowrap | wrap | wrap-reverse

　　屬性值含義

　　nowrap(默認值)溢出時不換行

　　wrap溢出時自動換行

　　wrap-reverse溢出時自動換行，翻轉排列

　　其效果圖如下：

　　c. flex-flow屬性

　　使用方法：flex-flow: [flex-direction] || [flex-wrap]

　　含義：復合屬性(flex-direction和flex-wrap)，設置彈性子元素的排列方式

　　d. justify-content屬性

　　使用方法：justify-content: flex-start | flex-end | center | space-between | space-around

　　屬性值含義

　　flex-start(默認值)主軸開始對齊，主軸為橫軸，ltr環境下，左對齊

　　flex-end主軸結束對齊，主軸為橫軸，ltr環境下，右對齊

　　center居中對齊

　　space-between第一個、最后一個對齊彈性容器的邊緣，其余均勻分布

　　space-around全部均勻分布

　　其效果圖如下：

　　e. align-items屬性

　　使用方法：align-items: flex-start | flex-end | center | baseline | stretch

　　屬性值含義

　　flex-start側軸開始對齊，主軸為橫軸，頂對齊

　　flex-end側軸結束對齊

　　center居中對齊

　　baseline基線對齊

　　stretch(默認值)從側軸開始到側軸結束鋪滿整個側軸

　　其效果圖如下：

　　f. align-content屬性

　　使用方法：align-content: flex-start | flex-end | center | space-between | space-around | stretch

　　屬性值含義

　　flex-start主軸開始對齊，主軸為橫軸，ltr環境下，左對齊

　　flex-end主軸結束對齊，主軸為橫軸，ltr環境下，右對齊

　　center居中對齊

　　space-between第一個、最后一個對齊彈性容器的邊緣，其余均勻分布

　　space-around全部均勻分布

　　stretch(默認值)各行伸展以占用剩余空間。如果剩余空間是負數，該值等效于flex-start

　　其效果圖如下：

　　2. 彈性子元素的相關屬性

　　屬性值含義

　　order控制彈性容器里子元素的順序，數值小的排在前面，可以為負值

　　flex-grow設置彈性子元素的擴展比率

　　flex-shrink設置彈性子元素的收縮比率

　　flex-basis指定彈性子元素伸縮前的默認大小值，相當于width和height屬性

　　flexflex-grow，flex-shrink和flex-basis屬性的復合屬性

　　align-self允許獨立的彈性子元素覆蓋彈性容器的默認對齊設置(align-items)

　　a. order屬性

　　使用方法：order: integer number

　　其屬性效果圖如下：

　　b. flex-grow屬性

　　使用方法：flex-grow: number

　　含義：設置彈性子元素的擴展比率，不允許為負值，默認值為0。根據彈性盒子元素所設置的擴展因子作為比率來分配剩余空間。

　　其屬性效果圖如下：

　　c. flex-shrink屬性

　　使用方法：flex-shrink: number

　　含義：設置彈性子元素的收縮比率，不允許為負值，默認值為1。根據彈性盒子元素所設置的擴展因子作為比率來收縮空間。

　　其屬性效果圖如下：

　　d. flex-basis屬性

　　使用方法：flex-basis: | | auto

　　含義：設置彈性子元素的伸縮基準值，不允許為負值。默認值為auto，無特定寬度(高度)。

　　e. flex屬性

　　使用方法：flex: none | [flex-grow] || [flex-shrink] || [flex-basis

　　含義：復合屬性，設置彈性子元素的如何分配空間

　　f. align-self屬性

　　使用方法：auto | flex-start | flex-end | center | baseline | stretch

　　含義：設置彈性子元素的在側軸上的對齊方式，與align-items相同。設置某個彈性子元素的對立對齊方式。

　　其屬性效果圖如下：

　　3. 多列屬性詳解

　　1)基礎知識

　　??多列(Multi-column)是一個CSS3新增布局模塊，官方稱為Multiple column layout，可以比較輕松的實現多列布局，比如圖片瀑布流。

　　2)屬性一覽

　　屬性屬性說明

　　columns復合屬性(column-width和column-count)，設置寬度和列數

　　column-width設置每列的寬度

　　column-count設置列數

　　column-gap設置列之間的間隙

　　column-rule復合屬性(column-rule-width、column-rule-style和column-rule-color)，設置列之間的邊框樣式

　　column-fill設置列的高度是否統一

　　column-span設置是否橫跨所有列

　　a. column-width屬性

　　使用方法：column-width: length | auto

　　屬性值含義

　　auto(默認值)瀏覽器決定列的寬度

　　length用長度值來定義列寬。不允許負值

　　b. column-count屬性

　　使用方法： column-count: integer number | auto

　　屬性值含義

　　auto(默認值)列數將取決于其他屬性，例如："column-width"

　　imteger number用整數值來定義列數，列的最佳數目將其中的元素的內容無法流出。

　　c. columns屬性

　　使用方法：columns: [column-width]|[column-count]

　　含義：復合屬性設置列的寬度和個數

　　d. column-gap屬性

　　使用方法：column-gap: length | normal

　　屬性值含義

　　normal(默認值)與font-size大小相同。假設該對象的font-size為16px，則normal的值為16px，以此類推。

　　length用長度來定義列與列之間的間隙。不允許為負值。

　　e. column-rule屬性

　　使用方法：column-rule: [column-rule-width] || [column-rule-style] || [column-rule-color]

　　含義：設置列與列之間的邊框，和border屬性相似

　　屬性值含義

　　column-rule-width設置列與列之間的邊框的厚度

　　column-rule-style設置列與列之間的邊框的樣式

　　column-rule-color設置列與列之間的邊框的顏色

　　f. column-fill屬性

　　使用方法：column-fill: auto | balance

　　含義：設置所有列的高度是否統一

　　屬性值含義

　　auto(默認值)列高度自適應內容

　　balance所有列的高度以其中最高的一列統一

　　g. column-span屬性

　　使用方法：column-span: none | all

　　含義：對象元素是否橫跨所有列

　　屬性值含義

　　none(默認值)不跨列

　　all橫跨所有列

到此，相信大家對“CSS3彈性盒子基礎知識有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！