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

01/07 12:25
阅读数 88

弹性盒子进阶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;
        }

在这里插入图片描述

写在最后的话

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部