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

原创已于 2025-11-24 09:34:52 修改 · 297 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #前端

于 2025-11-20 11:59:29 首次发布

Vue 项目实战《尚医通》专栏收录该内容

59 篇文章

订阅专栏

对于 CSS3 的 Flexbox 布局，存在主轴和侧轴的概念。

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

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

<!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>