基本布局:网格布局和百分比布局

div+css joai 浏览 评论
最简单的网格布局,就是平均分布。在容器里面平均分配空间,但是需要设置项目的自动缩放。以下是实现及效果。

HTML代码:

<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

CSS代码:

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}


 

百分比布局

将某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

HTML代码如下

<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

CSS代码如下:

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

 

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)
    • 验证码 点击我更换图片

    网友最新评论