前端基础-CSS-弹性盒-项目-对齐方式

最新推荐文章于 2023-05-10 17:15:23 发布

码码大海

最新推荐文章于 2023-05-10 17:15:23 发布

阅读量298

点赞数

分类专栏： CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_43254742/article/details/126130978

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

    <style>
         .box{
                width: 500px;
                height:500px;
                border: 2px solid black;
                margin: 100px auto;
                display: flex;

                /* flex-direction: column; */
            }
            .box div{
                width: 100px;
                /* height: 100px; */
                border: 1px dashed red ;
                box-sizing: border-box;
            }
            /* 
            采用flex布局的元素，称为flex容器，他的所有子元素自动成为容器成员，称为flex项目
            align-self: flex-start; //默认
            flex-end
            center
            baseline	项目的第一行文字的基线对齐
            stretch		在项目不设高度的时候通过stretch可以拉伸充满剩余高度
                        在项目不设宽度的时候通过stretch可以拉伸充满剩余宽度


            order:0; //默认
            order可以取正负两种值，编号小的优先显示，同级别编号按代码顺序显示
            */
            .div1{
                align-self: flex-start;
            }
            .div2{
                align-self: flex-end;
            }
            .div3{
                align-self: center;
            }
            .div4{
                align-self: baseline;
            }
            .div5{
                align-self: stretch;
            }
    </style>
      

    <div class="box">
        <div class="div1">11111</div>
        <div class="div2">22222</div>
        <div class="div3">33333</div>
        <div class="div4">44444</div>
        <div class="div5">55555</div>
    </div>