css中flexbox布局效果

Flexbox（弹性盒子布局）是CSS中一种用于创建灵活的、自适应的布局的模块。它提供了一组属性，可以使元素在容器中自动调整和分布空间，以实现各种布局效果。以下是一些常见的Flexbox布局效果：

1. 水平居中：使用`justify-content: center;`将子元素在父容器中水平居中对齐。

2. 垂直居中：使用`align-items: center;`将子元素在父容器中垂直居中对齐。

3. 两端对齐：使用`justify-content: space-between;`将子元素在父容器中两端对齐，剩余空间平均分配。

4. 等分布局：使用`justify-content: space-around;`将子元素在父容器中等间距分布，包括两端留有一半的间距。

5. 换行布局：使用`flex-wrap: wrap;`和`align-content: flex-start;`使子元素在多行显示，并在父容器中垂直对齐。

6. 等高布局：使用`align-items: stretch;`使子元素在父容器中等高显示，无论内容的高度不同。

这只是Flexbox布局的一部分，还有很多其他属性和组合可以实现各种复杂的布局效果。要实现特定的布局效果，可以根据具体需求选择适当的Flexbox属性来调整样式。