CSS Flex布局 Grid 简单方阵布局

最新推荐文章于 2024-06-21 16:09:32 发布

newTeethCanRepaired

最新推荐文章于 2024-06-21 16:09:32 发布

阅读量268

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_40144303/article/details/122317371

版权

这篇博客介绍了如何利用CSS Flex和Grid布局技术来创建简单的方阵排列。作者更倾向于使用Grid，尽管其浏览器兼容性相对稍弱，但功能更强大，基本布局无需频繁操作子元素。欢迎读者分享其他有效的布局方案。

摘要由CSDN通过智能技术生成

记录利用 flex 和 grid 实现方阵排列的简单布局

 <div>flex布局间距</div>
  <div class="flex-box-all">
    <div class="flex-box-item"><span>1</span></div>
    <div class="flex-box-item"><span>2</span></div>
    <div class="flex-box-item"><span>3</span></div>
    <div class="flex-box-item"><span>4</span></div>
    <div class="flex-box-item"><span>5</span></div>
  </div>
  <div>grid布局间距</div>
  <div class="grid-box-all">
    <div class="grid-box-item"><span>1</span></div>
    <div class="grid-box-item special"><span>2</span></div>
    <div class="grid-box-item"><span>3</span></div>
    <div class="grid-box-