css弹性盒高度自适应

CSS弹性盒（flexBox）是CSS3的一种新模块，用于布局一组元素，可以在不同大小的屏幕上自适应布局。在弹性盒中，元素在主轴（主要方向）和交叉轴（次要方向）上的位置是可以灵活调整的。

其中，弹性盒子元素（flex container）是设置弹性盒的容器，而弹性盒子子元素（flex item）则是容器内的元素。弹性盒子元素通过设置display为flex或inline-flex来创建弹性盒。弹性盒的主要属性有flex-direction、justify-content、align-items、align-content等。

其中，弹性盒子元素的高度自适应是利用align-items属性来实现的。当align-items为stretch时，弹性盒子子元素会沿着交叉轴方向拉伸，实现自适应高度的效果。如果弹性盒子元素的高度已经设置了具体的像素值或百分比，那么align-items的stretch属性设置就无效了。

.flex-container {
  display: flex;
  align-items: stretch;
}

.flex-item {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
}

通过以上代码可以创建一个弹性盒，使其中的子元素自适应高度。其中，flex-container作为弹性盒的容器，它的align-items属性设置为stretch，即可让子元素自适应高度。而flex-item则作为子元素，它的高度被设置为100px，同时宽度也被设置为200px。

总之，CSS弹性盒具有灵活性、多样性和可控性等特点，可以极大地提高页面的响应性和适应性，为开发者提供了更加便捷的布局方式。