flex布局container:align-items属性

align-itens

align-items是决定items在交叉轴上的对齐方式

    <style>
        .test{
            height: 400px;
            width: 400px;
            background-color: #f00;
            /* 开启flex布局 */
            display: inline-flex;
            /* align-items: flex-start;默认值flex-start;以交叉轴上的start(开始位置)对齐 */
            /* align-items: flex-end;以交叉轴上的end(结束位置)对齐 */
            /* align-items: baseline;以items的内容的基线对齐 */
            align-items: center;/*居中对齐*/
        }
        .box{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: #ff0;
        }
        .box2{
            background-color: #0f0;
        }
        .box3{
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="box1 box">idems1</div>
        <div class="box2 box">idems2</div>
        <div class="box3 box">idens3</div>
    </div>
</body>

代码效果:
在这里插入图片描述

来源：CSDN

作者：leigangg

链接：https://blog.csdn.net/leigangg/article/details/104377449

标签

flex布局

background

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!