帶有幾個正方形的Flexbox任務和@media更改為600px以下

Question

我有要做的flexbox任務，我完全迷路了。

最終結果應如下所示： https : //imgur.com/a/dVJpu第二張圖片是屏幕等於或低於600px時（兩個藍色方塊落在紅色方塊之下）文本必須相同容器的標准尺寸為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%;
  }
}