align-content容器属性

align-content容器属性

align-content当横轴上有额外的空间时，属性会在flex容器内对齐flex容器的线，类似于justify-content在主轴内对齐各个项的方式。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

注意：当只有一行弹性项目时，此属性不起作用。

案例

<div class="align-content">
        <div class="space-around-1">
            我是space-around-1
        </div>
        <div class="space-around-1">
            我是space-around-2
        </div>
        <div class="space-around-1">
            我是space-around-3
        </div>
        <div class="space-around-1">
            我是space-around-4
        </div>
        <div class="space-around-1">
            我是space-around-5
        </div>
        <div class="space-around-1">
            我是space-around-6
        </div>
        <div class="space-around-1">
            我是space-around-7
        </div>
        <div class="space-around-1">
            我是space-around-8
        </div>
        <div class="space-around-1">
            我是space-around-9
        </div>
          <div class="space-around-1">
            我是space-around-10
        </div>
        <div class="space-around-1">
            我是space-around-11
        </div>
        <div class="space-around-1">
            我是space-around-12
        </div>
    </div>

 .align-content{
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-content: space-around;
            width: 500px;
            height:500px;
            margin: auto;
            background-color: red;
        }
        .space-around-1{
            width: 100px;
            height: 80px;
            border: 1px white solid;
            background-color: blue;
        }
        .space-around-1,.space-around-2,.space-around-3{
            color: white;
            text-align: center;
        }