如何在css3使用flexx垂直对齐内容?



我已经通过很多不同的方式对内容进行了垂直对齐但是我想知道如何在Css3中使用flexbox对内容进行垂直对齐

您可以通过将内容放置在div中轻松地垂直对齐内容。并且"display:flex">对于水平对齐,可以使用"justify-content">属性。对于垂直对齐,可以使用"align-item ">另外还有一个属性align-content对齐伸缩线

注意:

1。只有当显示为flex时,Justify-content和align-items属性才有效。

2。请记住,如果没有足够的高度,您将看不到垂直对齐的任何变化。所以,首先给div设置一些高度。宽度也是一样,如果你的div周围没有空白,你不会感觉到水平对齐有任何变化。虽然,对齐是设置的。但是,由于内容覆盖了div内的整个空间,因此,您不会感觉到任何对齐。

3。这是一个方向弯曲的例子。如果flex-direction更改为column,则会看到align-items属性用于设置水平对齐方式。类似地,在本例中,使用Justify-content属性来设置垂直对齐。

还有align-self属性,用于子元素。如果你想给div的任何子元素一些不同的垂直对齐方式,你可以使用align-self属性。

最新更新