弹性盒子进阶-对齐方式

弹性盒子进阶2-对齐方式

书接上回，本次说的是弹性盒子的对齐方式

子项在主轴上的对齐方式

<div class="dad">
        <div class="son1">崽1</div>
        <div class="son2">崽2</div>
        <div class="son3">崽3</div>
    </div>

.dad {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            justify-content: start;
            /* justify-content: end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
        }
        
        .dad>div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

justify-content: start; 左对齐，右边空着。

justify-content: end; 右对齐，左边空着。

justify-content: center; 居中对齐，两端空着

justify-content: space-between; 剩余空间平分到子项中间。

justify-content: space-around; 剩余空间平分到子项两侧。

小结

1.主轴方向：横向（默认）。
2.子项弹性：不启动。
3.剩余宽度：根据样式分配。

子项在交叉轴上的对齐方式

先说下什么叫交叉轴：简单来说，就是和主轴垂直的那条轴，恩，很简单。

<div class="dad">
        <div class="son1">崽1</div>
        <div class="son2">崽2</div>
        <div class="son3">崽3</div>
    </div>

.dad {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            /* justify-content: start; */
            /* justify-content: end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            align-items: baseline;
            align-items: stretch;
        }
        
        .dad>div {
            width: 100px;
            /* height: 100px; */
            border: 1px solid red;
        }
        
        .son2 {
            line-height: 100px;
        }

align-items: flex-start;顶部对齐

align-items: flex-end; 底部对齐

align-items: center; 垂直居中

align-items: baseline;基线对齐（基线就是文字四线三格的那个基线）
ps：我将子项注释掉的那个高度又加上了 ，这样看的清楚一点。

align-items: stretch; 高度填满。
ps：这里将子项的高度注释掉，然后会发现子项的高度会充满父框，而不注释高度时，将按找height的属性定高。

小结

1.主轴方向：横向
交叉轴：纵向
2.各个子项有自己的高度（不设置的话会由内容决定，ps：在不启动弹性项的情况下）
3.不启动弹性项。
4.根据样式决定垂直方向的对齐方式。
ps：在主轴和交叉轴方向上的对齐方式可以一起用，*组合（大概吧，要试的哦）。

多行（或多列）时，行交叉轴上的对齐方式。

<div class="dad">
        <div class="son1">崽1</div>
        <div class="son2">崽2</div>
        <div class="son3">崽3</div>
        <div class="son4">崽4</div>
        <div class="son5">崽5</div>
        <div class="son6">崽6</div>
        <div class="son7">崽7</div>
    </div>

.dad {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: stretch;
        }
        
        .dad>div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        
        .son2 {
            line-height: 100px;
        }

align-content: flex-start; 与交叉轴起点对齐

align-content: flex-start; 与交叉轴终点对齐

align-content: center; 与交叉轴中点对齐

align-content: space-between; 与交叉轴两端对齐，轴线之间的间隔平均分布。

align-content: space-around; 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

align-content: stretch; 轴线占满整个交叉轴。（设置宽度时的表现形式）

align-content: stretch;轴线占满整个交叉轴。（不设置宽度时的表现形式）

还有一件事

弹性项在不启动时，是可以设置上下左右auto的，就是说，可以实现上下左右剧中的效果

<div class="dad">
        <div class="son1">崽1</div>
    </div>

 .dad {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
        }
        
        .dad>div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: auto;
        }
        
        .son2 {
            line-height: 100px;
        }

写在最后的话

虽然很可能这篇博客的访问量都是我一个人创造的，但是姑且还是说一下，如果你看到了了这篇博客，并且看到了这里，并且和我一样也是一个正在学习前端的萌新的话，在实际应用这些东西之前，请按照自己的理解实验一下效果，实际看看这些东西到底是什么，如果我有什么写的不对的，也欢迎回来喷我，放开喷，没事，但是要带着干货。结束。

本文地址：https://blog.csdn.net/m0_54067601/article/details/112194126