css弹性布局介绍 |css 提示样式

FlexBox布局提供了一组灵活的CSS属性，让大家能够更加便捷地控制元素在容器中的位置、尺寸、空间分配以及对齐方式。

使用FlexBox布局需要在容器上应用display:flex;属性，将容器转换为弹性容器，然后在弹性容器的子元素上应用flex属性，以控制它们的尺寸和对齐方式。

.box {
display: flex; /* 将box转换为弹性容器 */
flex-direction: row; /* 设置子元素排列方向，水平方向 */
justify-content: center; /* 沿主轴居中对齐 */
align-items: center; /* 沿侧轴居中对齐 */
}
.box-item {
flex: 1; /* 将子元素的宽度根据空间平分 */
}

以上代码演示了如何将一个带有多个子元素的容器实现水平居中、垂直居中，并且让子元素的宽度根据剩余空间平分的效果。

FlexBox布局可用于响应式布局、导航栏、列表、排版、网格等布局场景，它的重点在于弹性元素的尺寸和对齐，非常适合实现对齐和分布的功能。