css伸缩代码

CSS伸缩（Flexbox）是一种用于创建响应式布局的CSS模块。它提供了一种更加灵活的方式来设计页面布局，特别是在处理不同屏幕尺寸和设备时。Flexbox通过将元素放入一个容器中，并使用一系列属性来控制容器及其子元素的排列方式。

基础概念

Flexbox布局包含两个主要部分：容器（flex container）和项目（flex items）。容器通过设置display: flex;或display: inline-flex;来定义，而项目则是容器内的子元素。

类型

Flexbox主要涉及以下属性：

容器属性：
- flex-direction：定义主轴的方向（行或列）。
- flex-wrap：定义项目是否换行。
- flex-flow：是flex-direction和flex-wrap的简写。
- justify-content：定义项目在主轴上的对齐方式。
- align-items：定义项目在交叉轴上的对齐方式。
- align-content：定义多行项目在交叉轴上的对齐方式。
项目属性：
- order：定义项目的排列顺序。
- flex-grow：定义项目的放大比例。
- flex-shrink：定义项目的缩小比例。
- flex-basis：定义项目在主轴方向上的初始大小。
- flex：是flex-grow、flex-shrink和flex-basis的简写。
- align-self：允许单个项目有与其他项目不同的对齐方式。

应用场景

Flexbox特别适用于以下场景：

中心对齐：可以轻松地将元素居中对齐。
等宽布局：可以创建等宽的列布局。
响应式导航：可以创建适应不同屏幕尺寸的导航菜单。
复杂表单布局：可以灵活地排列表单元素。

示例代码

以下是一个简单的Flexbox布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 200px;
            background-color: #f0f0f0;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>