弹性盒子html纯css

### 如何仅用HTML和CSS实现弹性盒子布局

#### 定义基本结构
为了创建一个简单的弹性盒子布局，首先定义HTML文档中的基本结构。这里展示了一个包含三个项目的容器。

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

#### 设置样式规则
接着，在`<style>`标签内部编写相应的CSS代码来应用弹性盒模型给`.container`类以及其下的每一个`.item`元素[^1]。

对于容器而言：

- `display: flex;`声明该元素采用的是flexible box（灵活的框）模式；
- 可选地调整主轴方向(`flex-direction`)、控制子项沿主轴排列方式(`justify-content`)及垂直居中对齐方式(`align-items`);

针对各个项目来说，

- 使用`flex-grow`, `flex-shrink`, 和/或 `flex-basis`属性来自定义它们各自的行为；其中，
- `flex-basis`指定了当剩余空间被分配之前每个项目的初始大小。

以下是具体的CSS样式的例子:

.container {
    display: flex;
    justify-content: space-around; /* 控制水平间距 */
    align-items: stretch;          /* 默认情况下使所有子元素的高度相同 */
}

.item {
    flex: 1;                       /* 让所有的items平均占据可用的空间 */
    min-width: 100px;              /* 防止过窄 */
    margin: 5px;
    text-align: center;
    line-height: 75px;             /* 中心化文字 */
    font-size: 20px;
    color: white;
    background-color: darkblue;
}

通过上述配置，可以构建出响应式良好的网页组件，这些组件能够根据视窗尺寸动态调整自身的宽度与高度[^3]。