CSS Flex align-content 多元素的分布

align-content 分布方式

属性定义了多根轴线的对齐方式

1.0 align-content: space-between 多轴的平均分布

多轴的平均分布

align-content: space-between;

article {
    display: flex;
    border: solid 5px silver;
    border-color: #8A2BE2;
    width: 200px;
    height: 580px;
    background: red; /*  */
    flex-wrap: wrap;
    flex-direction: row;
        align-content: space-between;
}

屏幕快照 2020-01-01 下午12.49.36.png

---

2.0 多轴的平均分布周围有距离

多轴的平均分布

 align-content: space-around;

article {
    display: flex;
    border: solid 5px silver;
    border-color: #8A2BE2;
    width: 200px;
    height: 580px;
    background: red; /*  */
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-around;
}

Jietu20200101-125400.jpg