css和css3弹性盒模型实现元素宽度（高度）自适应

关于如何使用CSS和CSS3的弹性盒模型实现元素宽度自适应，具体的步骤如下：

关于如何使用CSS和CSS3的弹性盒模型实现元素宽度自适应，具体的步骤如下：

1. 确定容器的样式

首先，我们需要确定容器的样式，将容器设置为 display: flex;，这样子容器就可以成为一个弹性盒。在进行布局排列时，弹性盒有很多可以调整的参数，例如：flex-direction、justify-content、align-items等等。

.container {
  display: flex;
  /* 其他的样式选项可以根据具体的布局需求进行设置 */
}

2. 确定子元素的样式

其次，我们需要确定子元素的样式。子元素的宽度和高度自适应就需要添加一个重要样式：flex：1； 这个样式的作用是使得所有子元素都具有相同的尺寸和自适应性质，根据容器的宽度和高度大小自动调整其宽高。

.item {
  flex: 1;
  /* 其他的样式选项可以根据具体的布局需求进行设置 */
}

3. 示例说明

以下是两个示例，具体演示了如何实现元素宽度（高度）自适应：

示例 1：横向自适应

HTML 代码：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #f2f2f2;
  margin: 0 10px;
}

在这个示例中，容器 .container 采用了 display: flex; 的弹性盒模型，子元素 .item 的宽度和高度均采用了 flex: 1; 的属性， 这样子它们的宽度会自动调整为平均分配整个容器宽度。

示例 2：纵向自适应

HTML 代码：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS 代码：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 400px;
  margin: 50px auto;
}

.item {
  flex: 1;
  width: 100px;
  background-color: #f2f2f2;
  margin: 10px 0;
}

在这个示例中，容器 .container 采用了 display: flex; 的弹性盒模型并且添加了纵向的排布(flex-direction: column;)，子元素 .item 的宽度采用了指定值width:100px，高度采用了 flex: 1; 的属性， 这样子其高度会自动调整为平均分配整个容器高度。

总的来说，这两个示例都通过合理的弹性盒设置，达到了元素宽度（高度）自适应的目的。在实际编写中，需要根据具体的需求，进行更精细的样式调整。