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-flow	flex-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屬性
flex	flex-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: <length> | <percentage> | 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彈性盒子的基本知識就是這些了，如果有錯的話，我會及時更改的！這篇文章就到此結束了，👋👋👋