css justify-content

作者admin

10月 25, 2024

justify-content 是 CSS3 中用于设置弹性容器（flex container）内各个项目（flex item）在主轴上的对齐方式的属性。

主轴是指 flex 容器的主要方向，通常是水平方向（即 flex-direction: row）或垂直方向（即 flex-direction: column）。

参数

flex-start: 默认值。项目向主轴起始方向对齐。
flex-end: 项目向主轴结束方向对齐。
center: 项目居中对齐。
space-between: 项目平均分布在主轴上，首尾项目分别靠近容器的起始和结束边缘，项目之间的间隔相等。
space-around: 项目平均分布在主轴上，项目之间的间隔相等，同时首尾项目与容器边缘之间的间隔是中间项目之间间隔的一半。
space-evenly: 项目平均分布在主轴上，项目之间的间隔相等，包括首尾项目与容器边缘之间的间隔。

示例

      div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 布局宽度充满整个 浏览器 / 设备 */
            width: 100%;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 5px;
        }

/* 子元素从头部开始排列默认值 */
justify-content: flex-start;