CSS3知道汇总27：justify-content

先来一杯热乎乎的咖啡吧。

   

       

       

       

       

       

   

   

   

body{

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: brown;

}

.coffee{

    display: flex;

    flex-direction: column;

    align-items: center;

    height: calc(9em + 1em + 2em);

    position: relative;

}

.coffee .cup{

    width: 10em;

    height: 9em;

    background-color: white;

    border-radius: 0 0 1.5em 1.5em;

    position: relative;

}

.coffee .cup::before{

    content:'';

    position: absolute;

    width: 100%;

    height: 2em;

    background-color: chocolate;

    border:0.5em solid white;

    box-sizing: border-box;

    border-radius: 50%;

    top:-1em;

    box-shadow: inset 0 0 1em rgba(0,0,0,.5);

}

.coffee .cup::after{

    content:'';

    position: absolute;

    width: 3em;

    height: 3.5em;

    border:0.8em solid white;

    border-radius: 50%;

    top:20%;left:80%;

}

.coffee .plate{

    width: 16em;

    height: 1em;

    background-color: white;

    border-radius: 0 0 50% 50%;

    position: absolute;

    bottom: -1px;

}

.coffee .vapor{

    width: 7em;

    height: 2em;

    display: flex;

    justify-content: space-between;

}

.coffee .vapor span{

    width: 0.1em;

    min-width: 1px;

    background-color: white;

    animation: evaporation 2s linear infinite;

    filter: opacity(0);

}

@keyframes evaporation{

    from{

        transform: translateY(0);

        filter: opacity(1) blur(0.2em);

    }

    to{

        transform: translateY(-4em);

        filter: opacity(0) blur(0.4em);

    }

}

.coffee .vapor span:nth-child(1){

    animation-delay: 0.5s;

}

.coffee .vapor span:nth-child(2){

    animation-delay: 0.1s;

}

.coffee .vapor span:nth-child(3){

    animation-delay: 0.3s;

}

.coffee .vapor span:nth-child(4){

    animation-delay: 0.4s;

}

.coffee .vapor span:nth-child(5){

    animation-delay: 0.2ss;

}

justify-content   用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

space-between  项目位于各行之间留有空白的容器内

flex-start   默认值。项目位于容器的开头

flex-end  项目位于容器的结尾

center 项目位于容器的中心

space-around 项目位于各行之前、之间、之后都留有空白的容器内

initial 设置该属性为它的默认值。请参阅 initial。

inherit 从父元素继承该属性。请参阅 inherit。

可以参考 css语法结构

案例里：

如果设置成center，热气就变成中间一小束了

如果设置成flex-end，热气就变成只有右边一小束了

可以自己试验着，变成各种属性，看看变化，还是挺有意思的