#Css篇：flex布局的总结容器和项目

作者：System 时间：2024年08月10日分类：所有,css 字数：562

这篇文章距离上次修改已过451天，其中的内容可能已经有所变动。




/* 设置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布局创建一个灵活的布局，其中的项目可以根据容器的大小自动换行并有间隔。

#Css篇：flex布局的总结容器和项目

评论已关闭

推荐阅读