css - 伸缩盒子子中align-items与align-content和justify-content的区别

问题描述

问 题

伸缩盒子子中align-items与align-content和justify-content的区别，特别是align-items与align-content

解决方案

首先来个盒子

    <div class="wrap">
        <div class="child child-1">1</div>
        <div class="child child-2">2</div>
    </div>

css通用样式

 * {
        margin: 0px;
        padding: 0px;
    }

    .wrap {
        margin: 200px auto;
        display: flex;
        width: 100px;
        height: 60px;
        background-color: #1abc9c;
        text-align: center;
    }

    .child{
        width: 30px;
        height: 20px;
        line-height: 20px;
        background-color: #f55;
    }
    .child-2{
        background-color: #eee;
    }

一、当盒子为单行显示时(就是上面代码的结果)

加上：

.wrap{align-content: center;}

结果：

结论：在单行显示时align-content: center屁用没有

再加上：

.wrap{align-items: center;}

结果：

结论：单行时候垂直居中使用align-items: center;

二、当盒子为多行显示时

加上：

.child{width:80px;}

然后就是两种情况：
情况一：.wrap{flex-wrap:wrap;align-content: center;}
结果：

情况二：.wrap{flex-wrap:wrap;align-items: center;}

这篇关于css - 伸缩盒子子中align-items与align-content和justify-content的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！