Question

我需要帮助我有一个菱形网格，但它没有响应。我的任务是在flexbox上使其网格化！在移动分辨率（340px）上，该行将是两个。我已经尝试了所有方法，但不知道该怎么做：( 我编辑了此代码-框大小：border-box

* {
  box-sizing: border-box
}
.container {
  width: 940px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.container .item {
  margin-top: 110px;
  -webkit-flex-basis: 240px;
      -ms-flex-preferred-size: 240px;
          flex-basis: 240px;
  height: 240px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  background-color: #e2e4e7;
  border: 15px solid #f6f8fb;
  outline: 1px solid #e2e4e7;
  overflow: hidden;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-flex: 50vh;
  -webkit-flex-grow: 50vh;
      -ms-flex-positive: 50vh;
          flex-grow: 50vh;
}

.container .item:hover {
  background-color: #3e9eff;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.container .item:nth-child(n+4) {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  margin-top: -65px;
}

.container .item:nth-child(4) {
  margin-left: 175px;
}

.container .item:nth-child(5) {
  margin-right: 175px;
}

.sectionTwo .container .item:last-child {
  margin: 0 auto;
  margin-top: -65px;
}

<div class="container">
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
            </div>

Answer 1

为了将钻石转换成完美的响应式钻石，我删除了边距，仅使用了transform属性：translateX-Y和rotation（我认为它更可控）。

我添加了一个媒体查询，以将其转换为任意行中有2个块的网格。（340很小，看不到它可以在这里工作，所以我将其更改为640px，但是您可以写出所需的每个宽度，也就是340px：结果是相同的。）

为了创建可缩放的正方形，我使用了一种有趣的技术，在这里您可以找到很好的解释（感谢@ G-Cyr +1）：css grid of squares with flexbox。

我试图复制帖子中包含的图片中的“钻石”。

HTML是相同的，我只使用CSS。

希望有帮助。

这是代码：

body{
	background-color:#131313;
}

* {
  box-sizing: border-box
}

.container {
  display: flex;
  max-width:940px;
  width:60vw;
  flex-wrap: wrap;
  margin:0 auto;
}

.container .item {
   flex: 1 0 auto;
   height:auto;
   width: 50%;
   background-color: #424242;
}

.container .item:nth-child(1) {
  transform: translateY(25%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(2) {
  transform: translateY(25%) translateX(25%) rotate(45deg);
}

.container .item:nth-child(3) {
  transform: translateY(75%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(4) {
  transform: translateY(75%) translateX(25%) rotate(45deg);
}

.container .item:nth-child(5) {
  transform: translateY(125%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(6) {
  transform: translateY(125%) translateX(25%)  rotate(45deg);
}

.container .item:before {
    content:'';
    float:left;
    padding-top:100%;
}

.container .item:hover {
  background-color: #3e9eff;
  transition: all .3s ease;
}

@media (min-width: 640px){
	.container .item {
		width: 33.3333%;
	}

	.container .item:nth-child(1) {
	  transform: translateY(25%) translateX(-50%) rotate(45deg);
	}

	.container .item:nth-child(2) {
	  transform: translateY(25%) rotate(45deg);
	}

	.container .item:nth-child(3) {
	  transform: translateY(25%) translateX(50%) rotate(45deg);
	}

	.container .item:nth-child(4) {
	  transform: translateY(0%) translateX(25%) rotate(45deg);
	}

	.container .item:nth-child(5) {
	  transform:  translateY(0%) translateX(75%) rotate(45deg);
	}

	.container .item:nth-child(6) {
	  transform:  translateY(75%) translateX(-100%)  rotate(45deg);
	}
}

<div class="container">
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
</div>

Flexbox上的菱形网格

1 个答案: