flex布局中 -item -content -self的区别

flex布局中就记住有两个关键属性,justify和align,分别代表着主轴方向属性 和侧轴方向属性,想控制主轴就设置justify相关属性,想控制侧轴就设置align相关属性。

主轴居中分布 ,侧轴居中对齐,是我们常见的居中分布的方法,父级盒子属性设置为:

justify-content: center; align-items: center;

在此基础上,我们自由组合可以生成6个属性值,其中查阅资料得知,self属性是设置在子元素上的,content和items是设置在父级元素的,我们逐一实验,控制变量,设置justify时align属性不变,反之亦然:

justify-content

设为left整体左分布,center居中分布,right右分布,没什么可说的,就是flex子元素整体在主轴上的分布方式

那要是想给元素之间一点距离呢,设置space相关属性就好了

css 复制代码

        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40vh;
            width: 50vh;
            margin:200px auto;
            background-color: #f0f0f0;
            padding: 20px;
            border:5px solid rgb(98, 243, 79);
        }

~~justify-items~~

把justify-content去掉,设置justify-items,发现怎么设置都没有效果

css 复制代码

        .container {
            display: flex;
            justify-items: flex-end;
            height: 40vh;
            width: 50vh;
            margin:200px auto;
            background-color: #f0f0f0;
            padding: 20px;
            border:5px solid rgb(98, 243, 79);
        }

那是因为flex中根本没有该属性,kimi的解答:

justify-items 是一个CSS属性，用于设置容器内子元素的对齐方式，但它主要与Grid布局相关，而不是Flexbox布局。在Grid布局中，justify-items 控制子元素在网格单元格内的水平对齐方式.

~~justify-self~~

css 复制代码

        .box3 {
            width: 100px;
            height: 100px;
            background-color: #ec6543;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            border-radius: 5px;
            justify-self: end;//无效属性
        }

发现怎么设置都没有效果,因为flex中根本没有该属性,kimi再次解答:

在Flexbox布局中，没有 justify-self 属性。Flexbox主要关注于如何在主轴和交叉轴上对齐子元素，而不是单独对某个子元素进行对齐控制。

真的很专业!

接下来看看align属性,align是侧轴方向的属性,为了更直观,我们把元素高度设置为不一样的。

align-content

设置该属性为end时的效果:

css 复制代码

        .container {
            display: flex;
            justify-content: space-between;
            align-content:end;
            flex-wrap: wrap;
            height: 40vh;
            width: 50vh;
            margin:200px auto;
            background-color: #f0f0f0;
            padding: 20px;
            border:5px solid rgb(98, 243, 79);
        }

改成center呢?

子元素整体就跑到中间了

要是换个行呢?

css 复制代码

        .container {
            display: flex;
            justify-content: space-between;
            align-content:end;
            flex-wrap: wrap;
            height: 40vh;
            width: 50vh;
            margin:200px auto;
            background-color: #f0f0f0;
            padding: 20px;
            border:5px solid rgb(98, 243, 79);
        }

还是整体移动

那要是我想把父级盒子撑满呢?那就像jusify那样设置space-between属性

可以看出align-content控制的是全部子元素整体,在侧轴上的分布方式!

align-items

盒子1,2,3高度不一,看着好丑,能不能也居中对齐一下呢?这时候尝试设置一下align-items属性,惊讶地发现真的对齐了,对齐方式是3个盒子的中心线!

css 复制代码

        .container {
            display: flex;
            justify-content: space-between;
            align-content:center;
            align-items: center;
            flex-wrap: wrap;
            height: 40vh;
            width: 50vh;
            margin:200px auto;
            background-color: #f0f0f0;
            padding: 20px;
            border:5px solid rgb(98, 243, 79);
        }

想改成底对齐呢?

css 复制代码

        .container {
            display: flex;
            justify-content: space-between;
            align-content:center;
            align-items: end;
            flex-wrap: wrap;
            height: 40vh;
            width: 50vh;
            margin:200px auto;
            background-color: #f0f0f0;
            padding: 20px;
            border:5px solid rgb(98, 243, 79);
        }

设置align-items: end;属性就可以了。

可以发现，align-items设置的是子元素在侧轴方向的对齐方式。

那其中的一个盒子想鹤立鸡群，怎么办？(~~对不起,脑子里一闪而过:"鸡你太美!",控制不住~~)这时候就要请出我们的align-self属性了

align-self

css 复制代码

        .box1 {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            border-radius: 5px;
            align-self: flex-start;//控制自身侧轴方向的对齐方式
        }
        
         .box3 {
            width: 100px;
            height: 120px;
            background-color: #ec6543;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            border-radius: 5px;
            align-self: flex-end;//控制自身侧轴方向的对齐方式
        }

所以align-self很好理解,就是每个子元素自己想要与众不同时,单独设置一下自己的对齐方式,是设置给子元素的。

总结：

justify-content 控制子元素在主轴方向的分布方式，默认为横轴,可以理解为最小控制单位为每一个子元素
align-content 控制子元素整体侧轴方向的分布方式，默认为纵轴,可以理解为最小控制单位为每一行
align-items 控制子元素在侧轴方向的对齐方式,默认为顶对齐
align-self 与 align-items 属性值相同,不同的是他是设置给单个子元素的,让单个子元素灵活控制自己的对齐方式

唉,自学前端真的麻烦,文档一扒全是高端术语,程序员的世界为什么不能简单一点?看完一脸懵逼,一知半解,还是得自己工作实践后,总结成自己的语言。

所以，从今天起，~~重学前端~~~（开玩笑的，别当真），下一期 ~~响应式布局（不能保证说到做到，太忙了呜呜呜~）~~