css3 让元素分行排列 |css设置表格对齐

.container {
display: flex;
flex-wrap: wrap;
}

以上代码设置了.container元素的display属性为flex，并且设置了flex-wrap属性为wrap，这样容器中的元素会自动根据容器的大小进行分行排列。

同时，大家还可以通过设置其他属性来调整元素在容器中的排列方式，如：

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

以上代码还设置了justify-content属性和align-items属性，其中justify-content用于设置元素在水平方向上的排列方式，可选值包括：

• flex-start：元素靠左对齐
• flex-end：元素靠右对齐
• center：元素居中对齐
• space-between：元素平均分配到行中，首尾不留空
• space-around：元素平均分配到行中，首尾留空

而align-items属性用于设置元素在垂直方向上的排列方式，可选值包括：

• flex-start：元素靠上对齐
• flex-end：元素靠下对齐
• center：元素垂直居中对齐
• baseline：元素按照基线对齐
• stretch：元素拉伸到与容器等高

通过以上属性的灵活设置，大家可以轻松实现各种元素的分行排列。