弯曲元素之间的垂直边距

Question

我很难解决如何将所有元素分开，而不是将元素放在一起但仍然垂直居中。

我想要它，因此该内容的外部只有空白

请访问我的网站了解代码

https://ukhotspot.co.uk/

Answer 1

You need to add align-content: center to your flex container.

.flex {
    display: flex;
    align-items: center;
    align-content: center; /* NEW */
}

When positioning a single line in the cross axis of a flex container, you can use align-items。

但是当容器有多行时 - 就像在图像中一样 - align-items不再有用。 align-content属性变得必要。

  

8.4. Packing Flex Lines: the align-content property

     

align-content属性对齐Flex容器的行   当横轴有额外的空间时，flex容器，   类似于justify-content如何对齐单个项目   主轴。注意，此属性对单线flex没有影响   容器

“所有元素间隔均匀的原因是因为align-content的初始值为stretch，这导致线条均匀分布容器。

有six different values for align-content。使用align-content: center，所有行都打包在容器的中心。