浅浅的记录一下使用felx布局遇到的justify-content 和 align-items这两个属性，使用时老是搞混乱

最新推荐文章于 2024-04-07 14:11:15 发布

java程序员CC

最新推荐文章于 2024-04-07 14:11:15 发布

阅读量366

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_46300114/article/details/136502295

版权

1：首先弄清楚这两个的区别以及作用

justify-content：用于控制 flex 容器内项目在主轴上的对齐方式。
- flex-start：项目在主轴起始位置对齐。
- flex-end：项目在主轴末尾位置对齐。
- center：项目在主轴中间位置对齐。
- space-between：项目在主轴上均匀分布，首尾两个项目分别靠近容器的起始和末尾位置。
- space-around：项目在主轴上均匀分布，项目周围空间相等。
- space-evenly：项目在主轴上均匀分布，项目之间和周围空间相等。
align-items：用于控制 flex 容器内项目在交叉轴上的对齐方式。
- flex-start：项目在交叉轴起始位置对齐。
- flex-end：项目在交叉轴末尾位置对齐。
- center：项目在交叉轴中间位置对齐。
- baseline：项目以基线对齐。
- stretch：项目在交叉轴上拉伸以填充容器。

总结来说，justify-content 控制主轴上的对齐方式，而 align-items 控制交叉轴上的对齐方式。

2：上代码看效果

内元素在主轴位置X（默认主轴为X）

<html>
<head>
    <style>
        .right-container{
            width: 200px;
            height: 200px;
			background-color:#1ab394;
            display: flex;
            justify-content: space-between;  /* 主轴对齐方式：平分空间*/
            /*align-items: flex-end;*/ /* 侧轴对齐方式：底部对齐 */
        }
        .right-container span:nth-child(1) {
            font-size: 30px;
        }
    </style>
</head>
<body>
         <div class="right-container">
              <span>小明</span>
              <span>100分</span>
         </div>
</body
</html>

主轴space-between效果如下：

s为flex-start c为center e为flex-end

内元素在侧轴位置Y（默认主轴为X）:

<html>
<head>
    <style>
        .right-container{
            width: 200px;
            height: 200px;
			background-color:#1ab394;
            display: flex;
            /*justify-content: space-between;*/ /* 主轴对齐方式：平分空间*/
            align-items: flex-end; /* 侧轴对齐方式：底部对齐 */
        }
        .right-container span:nth-child(1) {
            font-size: 30px;
        }
    </style>
</head>
<body>
         <div class="right-container">
              <span>小明</span>
              <span>100分</span>
         </div>
</body
</html>

侧轴flex-end效果如下：

s为flex-start c为center

java程序员CC

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
浅浅的记录一下使用felx布局遇到的justify-content 和 align-items这两个属性，使用时老是搞混乱

s为flex-start c为center e为flex-end。：用于控制 flex 容器内项目在交叉轴上的对齐方式。：用于控制 flex 容器内项目在主轴上的对齐方式。s为flex-start c为center。1：首先弄清楚这两个的区别以及作用。内元素在主轴位置X（默认主轴为X）控制主轴上的对齐方式，而。控制交叉轴上的对齐方式。
复制链接

扫一扫