HTML5，CSS3，开启浮动布局后，主轴和侧轴的概念

摇滚侠2025-11-21 9:46

参考资料中未提及在 HTML5 中开启浮动布局后主轴和侧轴的概念。不过，对于 CSS3 的 Flexbox 布局，存在主轴和侧轴的概念。

在 Flexbox 布局里，主轴是由 flex-direction 属性决定的，该属性设置了主轴的方向，它有四个可能的值：row（默认值，主轴为水平方向，从左到右）、row-reverse（主轴为水平方向，从右到左）、column（主轴为垂直方向，从上到下）和 column-reverse（主轴为垂直方向，从下到上）。而侧轴则是垂直于主轴的方向，例如当主轴是水平方向时，侧轴就是垂直方向；当主轴是垂直方向时，侧轴就是水平方向。

以下是一个简单的 Flexbox 布局示例，展示了主轴和侧轴的应用：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            flex-direction: row; /* 设置主轴方向为水平从左到右 */
            justify-content: center; /* 设置主轴上子元素居中排列 */
            align-items: center; /* 设置侧轴上子元素居中排列（单行） */
            height: 200px;
            border: 1px solid black;
        }
        .item {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>