html - Flexbox 上的菱形网格

Question

我需要帮助 我有一个菱形网格，但它没有响应。 我的任务是让它在 flexbox 上变成网格! 在移动分辨率(340px)上，它将是两个在行上。 我已经尝试了一切，但不知道如何做:( 我编辑了这段代码 - box-sizing: border-box

我发送带有示例的屏幕截图应该如何enter image description here

* {
  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

为了将您的钻石转换为完美的响应式钻石，我删除了您的边距，并且我只使用变换属性:translateX-Y 和旋转(我认为它更可控)。

我添加了一个媒体查询以将其转换为任意行有 2 个 block 的网格。 (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>