#Css篇：flex布局的总结容器和项目
/* 设置flex布局 */
.container {
display: flex; /* 使用flex布局 */
flex-direction: row; /* 主轴方向为水平方向 */
flex-wrap: wrap; /* 如果项目太多无法一行显示时，自动换行 */
justify-content: flex-start; /* 项目在主轴上对齐方式为从头开始 */
align-items: flex-start; /* 项目在交叉轴上的对齐方式为从头开始 */
align-content: flex-start; /* 当有多根主轴线时，交叉轴上的对齐方式为从头开始 */
}
/* 设置flex项目 */
.item {
flex: 1; /* 项目会占据等分的空间 */
margin: 5px; /* 项目之间的间距 */
min-width: 100px; /* 最小宽度为100px */
}这段代码为一个flex容器（.container）和其中的项目（.item）设置了基本的样式。它展示了如何使用flexbox布局创建一个灵活的布局，其中的项目可以根据容器的大小自动换行并有间隔。
评论已关闭