Flexbox -顶部对齐内容

Flexbox 是 CSS3 中引入的一种布局模式，旨在为复杂的网页布局提供更灵活、更强大的方式。Flexbox 允许开发者轻松地创建响应式和动态的布局，特别是在处理不同大小和未知数量的元素时。

基础概念

Flexbox 的核心概念包括：

Flex 容器（Flex Container）：应用了 display: flex 或 display: inline-flex 的元素。
Flex 项目（Flex Items）：Flex 容器内的直接子元素。
主轴（Main Axis） 和 交叉轴（Cross Axis）：Flexbox 布局中用于排列项目的两个方向。

顶部对齐内容

要在 Flexbox 中实现顶部对齐内容，可以使用 align-items 属性，并将其设置为 flex-start。这将使所有 Flex 项目沿着交叉轴的顶部对齐。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Top Alignment</title>
    <style>
        .container {
            display: flex;
            height: 300px; /* 设置一个固定高度以便观察效果 */
            border: 1px solid #ccc;
            align-items: flex-start; /* 关键属性 */
        }
        .item {
            width: 100px;
            height: 50px;
            background-color: lightblue;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item" style="height: 100px;"></div>
        <div class="item"></div>
    </div>
</body>
</html>