Angular实现九宫格布局

勘察加熊人

于 2022-03-28 11:23:07 发布

阅读量807

点赞数

分类专栏： typescript 文章标签： typescript

本文链接：https://blog.csdn.net/cf8833/article/details/123790962

版权

本文介绍了如何在Angular中实现九宫格布局，包括在app.component.css中设置布局，使用app.component.html进行循环显示，以及在app.component.ts中处理数据源和点击事件交互响应。

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

Angular实现九宫格布局

step1: D:\vue\untitled2905\src\app\app.component.css 九宫格布局

.sudoku_row{
   
  display: flex;
  align-items: center;
  width:100%;
  flex-wrap: wrap;
}
.sudoku_item{
   
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:32%;
  padding-top: 10px;
  padding-bottom: 10px;
}
.opacity{
   
  opacity: 0.4;
  background: #e5e5e5;
}
.sudoku_item img{
   
  margin-bottom: 3px;
  display: block;
  width: 400px;
  height: 400px;
}