如何使用内联样式显示Flex？_使用flex内联div_如何使用css在html中设置flex内联？ - 腾讯云开发者社区

如何使用内联样式显示Flex？

基础概念

Flex布局（Flexible Box）是一种用于网页布局的CSS技术，它使得容器可以更好地控制其子元素的排列方式。Flex布局提供了一种更加灵活的方式来对齐和分布容器内的项，即使它们的大小是动态的或者未知的。

类型

Flex布局主要分为两种类型：

Flex容器：设置为Flex布局的元素，称为Flex容器。通过设置display: flex;或display: inline-flex;，可以将一个元素转换为Flex容器。
Flex项：Flex容器内的子元素称为Flex项。这些项会受到Flex容器的布局规则影响。

应用场景

Flex布局广泛应用于各种网页布局场景，包括但不限于：

导航栏
列表
表单
卡片布局
响应式网格系统

示例代码

以下是一个使用内联样式显示Flex的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局示例</title>
    <style>
        .flex-container {
            display: inline-flex; /* 使用内联样式显示Flex */
            justify-content: center; /* 水平居中对齐 */
            align-items: center; /* 垂直居中对齐 */
            background-color: #f0f0f0;
            padding: 20px;
            border: 1px solid #ccc;
        }
        .flex-item {
            padding: 10px;
            margin: 5px;
            background-color: #007bff;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Flex项1</div>
        <div class="flex-item">Flex项2</div>
        <div class="flex-item">Flex项3</div>
    </div>
</body>
</html>