CSS彈性盒模型，又稱為Flexbox，在CSS3中引入。它是用于web開發中的一種響應式的頁面設計布局方式。

.flex-container {
display: flex;
flex-direction: row; /*默認值，水平方向排列*/
justify-content: flex-start;/*排列方式*/
align-items: center; /*align-self的父容器版*/
flex-wrap: nowrap; /*默認值，不換行*/
align-content: flex-start; /*換行時的對齊方式*/
}
.flex-item {
flex-basis: auto;/*強制伸縮元素的初始大小*/
flex-grow: 0; /*允許容器內的彈性項目擴展*/
flex-shrink: 0; /*允許容器內的彈性項目收縮*/
align-self: auto; /*單個彈性項目的對齊方式*/
}

Flex容器（Flex Container）是一個包含Flex項目的父元素，它的屬性決定了Flex項目的排列方式。

Flex項目（Flex Item）是嵌套在Flex容器中的元素，具有可伸縮的能力。

在Flex容器中，有多種屬性可用于進行排列方式和對齊方式的控制，包括：

display 屬性：用于定義Flex容器

flex-direction 屬性：用于指定Flex項目的排列方式

justify-content 屬性：用于彈性元素在主軸上排列的方式

align-items 屬性：用于彈性元素在交叉軸上對齊的方式

flex-wrap 屬性：用于控制Flex項目是否換行

align-content 屬性：用于多行Flex容器內對齊方式的控制

主要涉及到的Flex項目的屬性包括：

flex-basis 屬性：指定Flex項目的初始大小

flex-grow 屬性：指定Flex項目可以擴展的大小

flex-shrink 屬性：指定Flex項目可以收縮的大小

align-self 屬性：在交叉軸上指定單個Flex項目的對齊方式

總而言之，通過彈性盒可靈活地進行頁面布局和元素排列，讓Web開發者不再受限于傳統的盒模型。