CSS彈性布局通過彈性盒子（Flex Box）的屬性設置來控制元素的布局方式，主要由容器（Flex Container）和項目（Flex Item）兩部分組成。

容器的設置：

.container {
display: flex;
flex-direction: row|column|row-reverse|column-reverse;
justify-content: flex-start|flex-end|center|space-between|space-around;
align-items: flex-start|flex-end|center|baseline|stretch;
flex-wrap: nowrap|wrap|wrap-reverse;
align-content: flex-start|flex-end|center|space-between|space-around|stretch;
}

其中，display:flex; 將容器設置為彈性盒子，flex-direction設置主軸的方向，justify-content設置項目在主軸上的對齊方式，align-items設置項目在交叉軸上的對齊方式，flex-wrap設置項目換行方式，align-content設置多行項目在交叉軸上的對齊方式。

項目的設置：

.item {
flex-grow: 0n;
flex-shrink: 1n;
flex-basis: autolengthpercentage;
align-self: auto|flex-start|flex-end|center|baseline|stretch;
}

其中，flex-grow設置項目的放大比例，默認為0，即不放大，flex-shrink設置項目的縮小比例，默認為1，即可縮小，flex-basis設置項目在主軸上的大小，默認為auto，即由內容撐開，align-self設置單個項目在交叉軸上的對齊方式。

以上就是CSS彈性布局的基本屬性，利用這些屬性可以讓頁面布局更加靈活、可控。