欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

弹性盒子进阶-对齐方式

程序员文章站 2022-03-12 21:26:21
弹性盒子进阶2-对齐方式书接上回,本次说的是弹性盒子的对齐方式子项在主轴上的对齐方式
崽1
崽2
崽3
.dad { width: 40...

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