html - 带有几个方 block 的 Flexbox 任务和 @media 变化低于 600px

Question

我有这个 flexbox 任务要做，但我完全迷路了。

最终结果应如下所示:https://imgur.com/a/dVJpu第二张图片是当屏幕等于或低于 600px 时(两个蓝色方 block 落在红色方 block 下方)文本必须相同容器的标准尺寸为 600px*500px 并且应该居中。这是一个codepen链接: https://codepen.io/anon/pen/RQrmvE

* { 
  box-sizing: border-box 
} 
.flexbox {
  margin:auto;

}
.flexbox {
  width: 600px;
  max-width: 100%;
  height: 500px;
  background-color: black;
  display: flex;
  justify-content: space-around;
 align-items: flex-start;
   flex-wrap: wrap; 
font-size:3em;

}

.flex-item {
  width: 100px;   
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;

}

#flex-item-1 {
  background-color: yellow;
  height: 100px;
margin-top:20px;;
width:260px;
}

#flex-item-2 {
  background-color: green;
   height: 100px;
margin-top:20px;
width:260px;
}

#flex-item-3 {
  background-color: red;
  height: 350px;
width:350px;
margin-left:14px;
word-wrap:break-word;
}

#flex-item-4 {
  background-color: skyblue;
  height: 80px;
width:150px


}

#flex-item-5 {
  background-color: skyblue;
  height: 80px;
align-self:flex-start;
margin-bottom:20px;

}

Answer 1

希望这就是您要找的 - Pen

* {
  box-sizing: border-box;
}

.flexbox {
  width: 600px;
  max-width: 100%;
  height: 500px;
  background-color: black;
  display: flex;
  margin: 0 auto;
  padding: 25px;
  flex-wrap: wrap;
  font-size: 3em;
}

#flex-item-1 {
  background-color: yellow;
  height: 100px;
  width: 48%;
}

#flex-item-2 {
  background-color: green;
  height: 100px;
  width: 48%;
  margin-right: 0;
  margin-left: auto;
}

#flex-item-3 {
  background-color: red;
  height: 320px;
  width: 350px;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#flex-item-4 {
  background-color: skyblue;
  height: 150px;
  width: 175px;
  margin: 25px 0 0 auto;
}

#flex-item-5 {
  background-color: skyblue;
  margin: -150px 0 0 auto;
  display: flex;
  height: 150px;
  width: 175px;
}

@media (max-width: 600px) {
  #flex-item-1,
  #flex-item-2 {
    height: 80px;
  }

  #flex-item-3 {
    height: 160px;
  }

  #flex-item-4,
  #flex-item-5 {
    height: 70px;
  }

  #flex-item-5 {
    margin-top: 25px;
  }

  #flex-item-3,
  #flex-item-4,
  #flex-item-5 {
    width: 100%;
  }
}