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;

/* 子元素 从尾部开始 排列 */
justify-content: flex-end;

/* 子元素 在主轴方向上 居中对齐 */
justify-content: center;

/* 子元素 子元素平均分配 剩余空间 */
justify-content: space-around;

/* 子元素 两侧的子元素贴两边 , 其它元素平分 剩余空间 */
justify-content: space-between;

作者 admin

百度广告效果展示