弹性盒子布局flex属性

弹性盒子布局是一种用于页面布局的CSS3新特性，它可以将容器内的元素按照一定的规则进行排列，并且能够自适应不同的屏幕大小和设备类型。其中，flex属性是控制弹性盒子布局中子元素的伸缩性。

flex属性有三个值，分别是：

- flex-grow：控制子元素的放大比例，默认值为0，即不放大。
- flex-shrink：控制子元素的缩小比例，默认值为1，即可以缩小。
- flex-basis：控制子元素的基准大小，默认值为auto，即根据内容自适应大小。

可以使用flex属性的缩写形式flex: flex-grow flex-shrink flex-basis;，其中flex-basis可以省略，默认值为0。

例如，设置一个容器内的子元素按照比例1:2:1排列并且可以自适应屏幕大小的CSS样式代码如下：

.container {
  display: flex;
}

.item {
  flex: 1 2 25%;
}

其中，容器使用display:flex属性设置为弹性盒子布局，子元素使用flex:1 2 25%属性设置为放大比例为1，缩小比例为2，基准大小为25%。这样，子元素会按照1:2:1的比例排列，并且可以根据屏幕大小自适应大小。