当前位置 博文首页 > RunningOnMyWay的博客：flex布局一 使实现grid网格布局更简单

最大化 缩小

    RunningOnMyWay的博客：flex布局一 使实现grid网格布局更简单

    作者：[db:作者] 时间：2021-06-10 09:13

    效果如下：
    实现效果

    容器div的css样式
    .grid-box{
  display:flex;
  flex-flow: row wrap;
  width:100%;
}
    容器内item的css样式
    .grid-box-item{
  width:calc(calc(100% / 3) - 12px); //使用calc实时计算width
  height: 60px;
  margin: 6px;
  box-sizing: border-box;//为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
  border-radius:15px;
}

    为了使item内部的内容水平垂直居中，同样也使用flex布局方式，具体如下：

      display: flex;
  /*在交叉轴上如何对齐*/
  align-items: center;
  /*在主轴上的对齐方式*/
  justify-content: center;
    上一篇：RunningOnMyWay的博客：flex布局二 更简单实现移动端topbar
    下一篇：没有了