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弹性布局的基本属性，利用这些属性可以让页面布局更加灵活、可控。