CSS 网格和弹性框不起作用 - 无法移动项目？

【问题标题】：CSS grid and flex box not working - cannot move items?CSS 网格和弹性框不起作用 - 无法移动项目？
【发布时间】：2021-06-30 23:35:06
【问题描述】：

我希望我的颜色从颜色选择（绿色框）的左上角开始，并且由于某种原因最后一个项目不在屏幕上。如何让它从左上角开始，所有颜色都包含在颜色选择（绿色框）部分？

另外，当网站在移动视图中时，如何使每个项目（颜色）变小并排成六排？ （我有 12 种颜色，但在这里无法全部显示）。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 90px 1fr 1fr 80px 1fr 1fr 1fr 100px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header header header"
    "main main main main main"
    "main main main main main"
    "carousel carousel carousel carousel carousel"
    "color-select color-select color-select color-select color-select"
    "about about about about about"
    "social social social social social"
    "footer footer footer footer footer";
}

@media only screen and (max-width: 600px) {
  main.main {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.header {
  grid-area: header;
  /* background-color: red; */
  margin: 10px;
}

.logo {
  position: fixed;
  display: inline-block;
  left: 5px;
  top: 15px;
}

.navbar {
  position: fixed;
  display: inline-block;
  top: 47px;
  right: 1px;
  font-family: "Khula", sans-serif;
  line-height: 38px;
  font-weight: 400;
  font-size: 16px;
}

.nav-link {
  margin: 18px;
  color: #222222;
  text-decoration: none;
}

.main {
  grid-area: main;
  background-color: #f8f8f8;
  margin: 10px;
  margin-top: 20px;
  padding-top: 20px;
  margin-left: 100px;
  margin-right: 100px;

  display: flex;
  text-align: center;
}

.color-select {
  grid-area: color-select;
  background-color: green;
  margin: 10px;
}

.about {
  grid-area: about;
  background-color: pink;
  margin: 10px;
}

.social {
  grid-area: social;
  background-color: magenta;
  margin: 10px;
}

.footer {
  grid-area: footer;
  background-color: teal;
  margin: 10px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  width: 100%;
  height: auto;
}

#product-svg {
  position: absolute; /*change from relative*/
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
  width: 65%;
  height: auto;
}

path {
  fill: #cccccc;
}

#background-image {
  position: relative;
  z-index: 1;
  width: 65%;
  height: auto;
}

.colors {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}

.color {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  order: 0;
  margin: 10px;
}

.red1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ff0000;
  margin: 5.77px 0;
  top: 101px;
  left: 100.2px;
}

.red1:before,
.red1:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.red1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ff2600;
}

.red1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ff2600;
}

.red2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #660000;
  margin: 5.77px 0;
  top: 100px;
  left: 110px;
}

.red2:before,
.red2:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.red2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #660000;
}

.red2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #660000;
}

.red3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #990000;
  margin: 5.77px 0;
  top: 82.8px;
  left: 90px;
}

.red3:before,
.red3:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.red3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #990000;
}

.red3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #990000;
}

.red4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #cc0000;
  margin: 5.77px 0;
  top: 49.5px;
  left: 80px;
}

.red4:before,
.red4:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.red4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #cc0000;
}

.red4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #cc0000;
}

.red5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ff6666;
  margin: 5.77px 0;
  top: 15px;
  left: 90px;
}

.red5:before,
.red5:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.red5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ff6666;
}

.red5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ff6666;
}

.red6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ff9999;
  margin: 5.77px 0;
  bottom: 2px;
  left: 110px;
}

.red6:before,
.red6:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.red6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ff9999;
}

.red6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ff9999;
}

.red7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffcccc;
  margin: 5.77px 0;
  bottom: 3px;
  left: 120px;
}

.red7:before,
.red7:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.red7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffcccc;
}

.red7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffcccc;
}

.orange1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ff8000;
  margin: 5.77px 0;
  top: 101px;
  left: 100.2px;
}

.orange1:before,
.orange1:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.orange1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ff8000;
}

.orange1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ff8000;
}

.orange2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #663300;
  margin: 5.77px 0;
  top: 100px;
  left: 110px;
}

.orange2:before,
.orange2:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.orange2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #663300;
}

.orange2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #663300;
}

.orange3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #994d00;
  margin: 5.77px 0;
  top: 82.8px;
  left: 90px;
}

.orange3:before,
.orange3:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.orange3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #994d00;
}

.orange3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #994d00;
}

.orange4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #cc6600;
  margin: 5.77px 0;
  top: 49px;
  left: 80px;
}

.orange4:before,
.orange4:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.orange4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #cc6600;
}

.orange4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #cc6600;
}

.orange5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffcc33;
  margin: 5.77px 0;
  top: 15px;
  left: 90px;
}

.orange5:before,
.orange5:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.orange5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffcc33;
}

.orange5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffcc33;
}

.orange6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffd966;
  margin: 5.77px 0;
  bottom: 2px;
  left: 110px;
}

.orange6:before,
.orange6:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.orange6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffd966;
}

.orange6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffd966;
}

.orange7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffe699;
  margin: 5.77px 0;
  bottom: 3px;
  left: 120px;
}

.orange7:before,
.orange7:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.orange7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffe699;
}

.orange7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffe699;
}

.yellow1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffff00;
  margin: 5.77px 0;
  top: 101px;
  left: 100.2px;
}

.yellow1:before,
.yellow1:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.yellow1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffff00;
}

.yellow1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffff00;
}

.yellow2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #666600;
  margin: 5.77px 0;
  top: 100px;
  left: 110px;
}

.yellow2:before,
.yellow2:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.yellow2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #666600;
}

.yellow2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #666600;
}

.yellow3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #999900;
  margin: 5.77px 0;
  top: 82.8px;
  left: 90px;
}

.yellow3:before,
.yellow3:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.yellow3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #999900;
}

.yellow3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #999900;
}

.yellow4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #cccc00;
  margin: 5.77px 0;
  top: 49px;
  left: 80px;
}

.yellow4:before,
.yellow4:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.yellow4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #cccc00;
}

.yellow4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #cccc00;
}

.yellow5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffff66;
  margin: 5.77px 0;
  top: 15px;
  left: 90px;
}

.yellow5:before,
.yellow5:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.yellow5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffff66;
}

.yellow5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffff66;
}

.yellow6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffff99;
  margin: 5.77px 0;
  bottom: 2px;
  left: 110px;
}

.yellow6:before,
.yellow6:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.yellow6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffff99;
}

.yellow6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffff99;
}

.yellow7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffffcc;
  margin: 5.77px 0;
  bottom: 3px;
  left: 120px;
}

.yellow7:before,
.yellow7:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.yellow7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffffcc;
}

.yellow7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffffcc;
}

.green1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #00ff00;
  margin: 5.77px 0;
  top: 101px;
  left: 100.2px;
}

.green1:before,
.green1:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.green1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #00ff00;
}

.green1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #00ff00;
}

.green2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #006600;
  margin: 5.77px 0;
  top: 100px;
  left: 110px;
}

.green2:before,
.green2:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.green2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #006600;
}

.green2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #006600;
}

.green3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #009900;
  margin: 5.77px 0;
  top: 82.8px;
  left: 90px;
}

.green3:before,
.green3:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.green3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #009900;
}

.green3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #009900;
}

.green4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #00cc00;
  margin: 5.77px 0;
  top: 49px;
  left: 80px;
}

.green4:before,
.green4:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.green4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #00cc00;
}

.green4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #00cc00;
}

.green5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #66ff66;
  margin: 5.77px 0;
  top: 16px;
  left: 90px;
}

.green5:before,
.green5:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.green5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #66ff66;
}

.green5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #66ff66;
}

.green6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #99ff99;
  margin: 5.77px 0;
  bottom: 2px;
  left: 110px;
}

.green6:before,
.green6:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.green6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #99ff99;
}

.green6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #99ff99;
}

.green7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #b3ffb3;
  margin: 5.77px 0;
  bottom: 3px;
  left: 120px;
}

.green7:before,
.green7:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.green7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #b3ffb3;
}

.green7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #b3ffb3;
}

.blue1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #0040ff;
  margin: 5.77px 0;
  top: 101px;
  left: 100.2px;
}

.blue1:before,
.blue1:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.blue1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #0040ff;
}

.blue1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #0040ff;
}

.blue2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #001a66;
  margin: 5.77px 0;
  top: 100px;
  left: 110px;
}

.blue2:before,
.blue2:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.blue2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #001a66;
}

.blue2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #001a66;
}

.blue3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #002699;
  margin: 5.77px 0;
  top: 82.8px;
  left: 90px;
}

.blue3:before,
.blue3:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.blue3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #002699;
}

.blue3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #002699;
}

.blue4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #0033cc;
  margin: 5.77px 0;
  top: 49px;
  left: 80px;
}

.blue4:before,
.blue4:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.blue4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #0033cc;
}

.blue4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #0033cc;
}

.blue5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #3366ff;
  margin: 5.77px 0;
  top: 16px;
  left: 90px;
}

.blue5:before,
.blue5:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.blue5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #3366ff;
}

.blue5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #3366ff;
}

.blue6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #668cff;
  margin: 5.77px 0;
  bottom: 2px;
  left: 110px;
}

.blue6:before,
.blue6:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.blue6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #668cff;
}

.blue6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #668cff;
}

.blue7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #99b3ff;
  margin: 5.77px 0;
  bottom: 3px;
  left: 120px;
}

.blue7:before,
.blue7:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.blue7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #99b3ff;
}

.blue7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #99b3ff;
}
<body>

  <div class="grid-container">
    <header class="header">

      <img class="logo" src="logo.png" alt="">

      <nav class="navbar">
        <a href=about.html class="nav-link">About</a>
        <a href=contact.html class="nav-link">Contact</a>
      </nav>

    </header>

    <main class="main">
    </main>

    <section class="color-select">

      <div class="colors">

        <div class="red">
          <div class="color red1" data-hex="#ff0000"></div>
          <div class="color red2" data-hex="#660000"></div>
          <div class="color red3" data-hex="#990000"></div>
          <div class="color red4" data-hex="#cc0000"></div>
          <div class="color red5" data-hex="#ff6666"></div>
          <div class="color red6" data-hex="#ff9999"></div>
          <div class="color red7" data-hex="#ffcccc"></div>
        </div>

        <div class="orange">
          <div class="color orange1" data-hex="#ff8000"></div>
          <div class="color orange2" data-hex="#663300"></div>
          <div class="color orange3" data-hex="#994d00"></div>
          <div class="color orange4" data-hex="#cc6600"></div>
          <div class="color orange5" data-hex="#ffcc33"></div>
          <div class="color orange6" data-hex="#ffd966"></div>
          <div class="color orange7" data-hex="#ffe699"></div>
        </div>

        <div class="yellow">
          <div class="color yellow1" data-hex="#ffff00"></div>
          <div class="color yellow2" data-hex="#666600"></div>
          <div class="color yellow3" data-hex="#999900"></div>
          <div class="color yellow4" data-hex="#cccc00"></div>
          <div class="color yellow5" data-hex="#ffff66"></div>
          <div class="color yellow6" data-hex="#ffff99"></div>
          <div class="color yellow7" data-hex="#ffffcc"></div>
        </div>

        <div class="green">
          <div class="color green1" data-hex="#00ff00"></div>
          <div class="color green2" data-hex="#006600"></div>
          <div class="color green3" data-hex="#009900"></div>
          <div class="color green4" data-hex="#00cc00"></div>
          <div class="color green5" data-hex="#66ff66"></div>
          <div class="color green6" data-hex="#99ff99"></div>
          <div class="color green7" data-hex="#b3ffb3"></div>
        </div>

        <div class="blue">
          <div class="color blue1" data-hex="#0040ff"></div>
          <div class="color blue2" data-hex="#001a66"></div>
          <div class="color blue3" data-hex="#002699"></div>
          <div class="color blue4" data-hex="#0033cc"></div>
          <div class="color blue5" data-hex="#3366ff"></div>
          <div class="color blue6" data-hex="#668cff"></div>
          <div class="color blue7" data-hex="#99b3ff"></div>
        </div>

      </div>
    </section>

    <section class="about">e</section>
    <section class="social">f</section>
    <footer class="footer">g</footer>
  </div>
</body>

【问题讨论】：

  • 您对问题的描述不是很清楚。我看到 6 个六边形呈蜂窝状，在 4 个不同的颜色系列中重复了 4 次。这些蜂窝形状的放置到底有什么问题？
  • 甜蜜的圣诞节，有很多代码。实际上需要多少代码来演示您遇到的主要问题？除了“颜色选择”之外，您是否需要页眉、导航栏、主要、页脚或任何其他部分？你甚至需要六边形吗？尽量减少代码量，以便回答者可以专注于您想要解决的问题。如需更多帮助，请参阅minimal reproducible example。
  • @TylerH 我希望蜂窝形状位于绿色容器的顶部（即红色蜂窝从左上角开始），但我已经尝试了各种方法，但似乎无法制作这行得通。最后几个蜂窝在绿色容器上脱落的其他问题。示例中有 5 个蜂窝，最后一个在右侧。
  • @luck8 看起来你所有的六边形 div 都是绝对/相对定位的，所以只需将方向属性（top、left 等）更改为将它们放置在你想要的位置的值他们。
  • @HereticMonkey 几乎所有这些代码都是必需的； OP 对您看到的每种形状都有不同的元素（由于手动定位，每种形状都有不同的样式）。不过，页眉/页脚可能会消失。

标签： html css flexbox css-grid


【解决方案1】：

现在的浏览器涉及的 CSS 太多了。

您的第一个错误是使用间隔，然后使用大约 100 像素的六边形偏移...最后一个将在容器外平均 100 像素。

  1. 将 space-between 转换为 space-around，因此第一个和最后一个元素不会粘在边缘。

  2. 减少 100px 的偏移量 120px 变为 20px 并且 80px 变为 -20px ，这样它仍然更接近其原点区域。

您的代码中的示例（我删除了不必要的部分并将重复的样式移到了一组规则中）

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.color-select {
  grid-area: color-select;
  background-color: green;
  margin: 10px;
}


.colors {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  align-content: flex-start;
}

.color {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  order: 0;
}


.red1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background: #ff0000;
  margin: 5.77px 0;
  top: 101px;

}
.color:before,
.color:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}


.red1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ff2600;
}

.red1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ff2600;
}

.red2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #660000;
  margin: 5.77px 0;
  top: 100px;
  left: 10px;
}



.red2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #660000;
}

.red2:after {
  top: 100%;
  border-top: 5.77px solid #660000;
}

.red3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #990000;
  margin: 5.77px 0;
  top: 82.8px;
  left: -10px;
}



.red3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #990000;
}

.red3:after {
  top: 100%;
  border-top: 5.77px solid #990000;
}

.red4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #cc0000;
  margin: 5.77px 0;
  top: 49.5px;
  left: -20px;
}


.red4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #cc0000;
}

.red4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #cc0000;
}

.red5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ff6666;
  margin: 5.77px 0;
  top: 15px;
  left: -10px;
}



.red5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ff6666;
}

.red5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ff6666;
}

.red6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ff9999;
  margin: 5.77px 0;
  bottom: 2px;
  left: 10px;
}



.red6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ff9999;
}

.red6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ff9999;
}

.red7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffcccc;
  margin: 5.77px 0;
  bottom: 3px;
  left: 20px;
}


.red7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffcccc;
}

.red7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffcccc;
}

.orange1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ff8000;
  margin: 5.77px 0;
  top: 101px;
  left: .2px;
}



.orange1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ff8000;
}

.orange1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ff8000;
}

.orange2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #663300;
  margin: 5.77px 0;
  top: 100px;
  left: 10px;
}


.orange2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #663300;
}

.orange2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #663300;
}

.orange3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #994d00;
  margin: 5.77px 0;
  top: 82.8px;
  left: -10px;
}

.orange3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #994d00;
}

.orange3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #994d00;
}

.orange4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #cc6600;
  margin: 5.77px 0;
  top: 49px;
  left: -20px;
}

.orange4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #cc6600;
}

.orange4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #cc6600;
}

.orange5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffcc33;
  margin: 5.77px 0;
  top: 15px;
  left: -10px;
}


.orange5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffcc33;
}

.orange5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffcc33;
}

.orange6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffd966;
  margin: 5.77px 0;
  bottom: 2px;
  left: 10px;
}

.orange6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffd966;
}

.orange6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffd966;
}

.orange7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffe699;
  margin: 5.77px 0;
  bottom: 3px;
  left: 20px;
}

.orange7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffe699;
}

.orange7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffe699;
}

.yellow1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffff00;
  margin: 5.77px 0;
  top: 101px;
  left: .2px;
}


.yellow1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffff00;
}

.yellow1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffff00;
}

.yellow2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #666600;
  margin: 5.77px 0;
  top: 100px;
  left: 10px;
}

.yellow2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #666600;
}

.yellow2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #666600;
}

.yellow3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #999900;
  margin: 5.77px 0;
  top: 82.8px;
  left: -10px;
}


.yellow3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #999900;
}

.yellow3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #999900;
}

.yellow4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #cccc00;
  margin: 5.77px 0;
  top: 49px;
  left: -20px;
}


.yellow4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #cccc00;
}

.yellow4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #cccc00;
}

.yellow5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffff66;
  margin: 5.77px 0;
  top: 15px;
  left: -10px;
}


.yellow5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffff66;
}

.yellow5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffff66;
}

.yellow6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffff99;
  margin: 5.77px 0;
  bottom: 2px;
  left: 10px;
}


.yellow6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffff99;
}

.yellow6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffff99;
}

.yellow7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #ffffcc;
  margin: 5.77px 0;
  bottom: 3px;
  left: 20px;
}

.yellow7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #ffffcc;
}

.yellow7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #ffffcc;
}

.green1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #00ff00;
  margin: 5.77px 0;
  top: 101px;
  left: 0.2px;
}


.green1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #00ff00;
}

.green1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #00ff00;
}

.green2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #006600;
  margin: 5.77px 0;
  top: 100px;
  left: 10px;
}


.green2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #006600;
}

.green2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #006600;
}

.green3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #009900;
  margin: 5.77px 0;
  top: 82.8px;
  left: -10px;
}


.green3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #009900;
}

.green3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #009900;
}

.green4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #00cc00;
  margin: 5.77px 0;
  top: 49px;
  left: -20px;
}


.green4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #00cc00;
}

.green4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #00cc00;
}

.green5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #66ff66;
  margin: 5.77px 0;
  top: 16px;
  left: -10px;
}


.green5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #66ff66;
}

.green5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #66ff66;
}

.green6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #99ff99;
  margin: 5.77px 0;
  bottom: 2px;
  left: 10px;
}


.green6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #99ff99;
}

.green6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #99ff99;
}

.green7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #b3ffb3;
  margin: 5.77px 0;
  bottom: 3px;
  left: 20px;
}


.green7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #b3ffb3;
}

.green7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #b3ffb3;
}

.blue1 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #0040ff;
  margin: 5.77px 0;
  top: 101px;
  left: 0.2px;
}


.blue1:before {
  bottom: 100%;
  border-bottom: 5.77px solid #0040ff;
}

.blue1:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #0040ff;
}

.blue2 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #001a66;
  margin: 5.77px 0;
  top: 100px;
  left: 10px;
}


.blue2:before {
  bottom: 100%;
  border-bottom: 5.77px solid #001a66;
}

.blue2:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #001a66;
}

.blue3 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #002699;
  margin: 5.77px 0;
  top: 82.8px;
  left: -10px;
}


.blue3:before {
  bottom: 100%;
  border-bottom: 5.77px solid #002699;
}

.blue3:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #002699;
}

.blue4 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #0033cc;
  margin: 5.77px 0;
  top: 49px;
  left: -20px;
}


.blue4:before {
  bottom: 100%;
  border-bottom: 5.77px solid #0033cc;
}

.blue4:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #0033cc;
}

.blue5 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #3366ff;
  margin: 5.77px 0;
  top: 16px;
  left: -10px;
}

.blue5:before {
  bottom: 100%;
  border-bottom: 5.77px solid #3366ff;
}

.blue5:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #3366ff;
}

.blue6 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #668cff;
  margin: 5.77px 0;
  bottom: 2px;
  left: 10px;
}


.blue6:before {
  bottom: 100%;
  border-bottom: 5.77px solid #668cff;
}

.blue6:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #668cff;
}

.blue7 {
  position: relative;
  width: 20px;
  height: 11.55px;
  background-color: #99b3ff;
  margin: 5.77px 0;
  bottom: 3px;
  left: 20px;
}


.blue7:before {
  bottom: 100%;
  border-bottom: 5.77px solid #99b3ff;
}

.blue7:after {
  top: 100%;
  width: 0;
  border-top: 5.77px solid #99b3ff;
}
<section class="color-select">

      <div class="colors">

        <div class="red">
          <div class="color red1" data-hex="#ff0000"></div>
          <div class="color red2" data-hex="#660000"></div>
          <div class="color red3" data-hex="#990000"></div>
          <div class="color red4" data-hex="#cc0000"></div>
          <div class="color red5" data-hex="#ff6666"></div>
          <div class="color red6" data-hex="#ff9999"></div>
          <div class="color red7" data-hex="#ffcccc"></div>
        </div>

        <div class="orange">
          <div class="color orange1" data-hex="#ff8000"></div>
          <div class="color orange2" data-hex="#663300"></div>
          <div class="color orange3" data-hex="#994d00"></div>
          <div class="color orange4" data-hex="#cc6600"></div>
          <div class="color orange5" data-hex="#ffcc33"></div>
          <div class="color orange6" data-hex="#ffd966"></div>
          <div class="color orange7" data-hex="#ffe699"></div>
        </div>

        <div class="yellow">
          <div class="color yellow1" data-hex="#ffff00"></div>
          <div class="color yellow2" data-hex="#666600"></div>
          <div class="color yellow3" data-hex="#999900"></div>
          <div class="color yellow4" data-hex="#cccc00"></div>
          <div class="color yellow5" data-hex="#ffff66"></div>
          <div class="color yellow6" data-hex="#ffff99"></div>
          <div class="color yellow7" data-hex="#ffffcc"></div>
        </div>

        <div class="green">
          <div class="color green1" data-hex="#00ff00"></div>
          <div class="color green2" data-hex="#006600"></div>
          <div class="color green3" data-hex="#009900"></div>
          <div class="color green4" data-hex="#00cc00"></div>
          <div class="color green5" data-hex="#66ff66"></div>
          <div class="color green6" data-hex="#99ff99"></div>
          <div class="color green7" data-hex="#b3ffb3"></div>
        </div>

        <div class="blue">
          <div class="color blue1" data-hex="#0040ff"></div>
          <div class="color blue2" data-hex="#001a66"></div>
          <div class="color blue3" data-hex="#002699"></div>
          <div class="color blue4" data-hex="#0033cc"></div>
          <div class="color blue5" data-hex="#3366ff"></div>
          <div class="color blue6" data-hex="#668cff"></div>
          <div class="color blue7" data-hex="#99b3ff"></div>
        </div>

      </div>
    </section>

现在，浏览器理解 clip-path 和 CSS var() 来缩短你的代码，包装 flex 需要推动第一个元素来绘制你的线条：2 - 3 - 2 ， justify-content 和负边距将完成十六进制布局。

可能的重新审视的想法：

[data-test] {
  display:flex;
  flex-wrap:wrap;/* You can let it wrap so it doesnt shrink or set offscreen children */
  justify-content:space-between;
  /* justify-content:space-around;keep off from edges */
  align-items:start;  
  /* align-items:center; whatever else you need here */
  background:linear-gradient(to top,transparent 50%, rgba(0,0,0,0.1) 50%) green;/* remove the gradient, it only shows the center while you need to set your alignments */
  min-height:120px;/* whatever you need here */
}

[data-test] span.color {/* the hex mother boxes */
  flex-shrink:0 ;/* needed if parent is not a wrapping flexbox */
  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* set in center */ 
  width:60px;/* max = 3 x 20px */
  padding-bottom:9px;/* 3 lines : 3 x 6 / 2 = 9  */
}

[data-test] span.color  span{ 
  height:23px;
  width:20px;
  background:var(--color);/* colors injected here from the var set in the style attribute */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);/* cut your shape off */
  margin-bottom:-6px; /* overlapp the lines */
}

[data-test] span.color  span:first-child{
  margin-left:1px;/* 3x20px + px of margin on the first allows only to elements, centered from justify-content set on flex parent */
}



.color-select {
  background-color: green;
  margin: 10px;
}
<p>Colors stored inside a var() from a style attribute that can be used from the css file.</p>
<div data-test>
  <span class="color red">
    <span style="--color: #ff0000 "></span>
    <span style="--color: #660000 "></span>
    <span style="--color: #990000 "></span>
    <span style="--color: #cc0000 "></span>
    <span style="--color: #ff6666 "></span>
    <span style="--color: #ff9999 "></span>
    <span style="--color: #ffcccc "></span>
  </span>  
  <span class="color orange">
    <span style="--color: #ff8000 "></span>
    <span style="--color: #663300 "></span>
    <span style="--color: #994d00 "></span>
    <span style="--color: #cc6600 "></span>
    <span style="--color: #ffcc33 "></span>
    <span style="--color: #ffd966 "></span>
    <span style="--color: #ffe699 "></span>
  </span>
  <!-- and so on with next colors -->
  
  <span class="color red">
    <span style="--color: #ff0000 "></span>
    <span style="--color: #660000 "></span>
    <span style="--color: #990000 "></span>
    <span style="--color: #cc0000 "></span>
    <span style="--color: #ff6666 "></span>
    <span style="--color: #ff9999 "></span>
    <span style="--color: #ffcccc "></span>
  </span>  
  <span class="color orange">
    <span style="--color: #ff8000 "></span>
    <span style="--color: #663300 "></span>
    <span style="--color: #994d00 "></span>
    <span style="--color: #cc6600 "></span>
    <span style="--color: #ffcc33 "></span>
    <span style="--color: #ffd966 "></span>
    <span style="--color: #ffe699 "></span>
  </span>  
  <span class="color red">
    <span style="--color: #ff0000 "></span>
    <span style="--color: #660000 "></span>
    <span style="--color: #990000 "></span>
    <span style="--color: #cc0000 "></span>
    <span style="--color: #ff6666 "></span>
    <span style="--color: #ff9999 "></span>
    <span style="--color: #ffcccc "></span>
  </span>  
  <span class="color orange">
    <span style="--color: #ff8000 "></span>
    <span style="--color: #663300 "></span>
    <span style="--color: #994d00 "></span>
    <span style="--color: #cc6600 "></span>
    <span style="--color: #ffcc33 "></span>
    <span style="--color: #ffd966 "></span>
    <span style="--color: #ffe699 "></span>
  </span>
</div>

<p>You can add more of course , no worries if it can wrap</p>
<div data-test>
  <span class="color red">
    <span style="--color: #ff0000 "></span>
    <span style="--color: #660000 "></span>
    <span style="--color: #990000 "></span>
    <span style="--color: #cc0000 "></span>
    <span style="--color: #ff6666 "></span>
    <span style="--color: #ff9999 "></span>
    <span style="--color: #ffcccc "></span>
  </span>  
  <span class="color orange">
    <span style="--color: #ff8000 "></span>
    <span style="--color: #663300 "></span>
    <span style="--color: #994d00 "></span>
    <span style="--color: #cc6600 "></span>
    <span style="--color: #ffcc33 "></span>
    <span style="--color: #ffd966 "></span>
    <span style="--color: #ffe699 "></span>
  </span>
  <!-- and so on with next colors -->
  
  <span class="color red">
    <span style="--color: #ff0000 "></span>
    <span style="--color: #660000 "></span>
    <span style="--color: #990000 "></span>
    <span style="--color: #cc0000 "></span>
    <span style="--color: #ff6666 "></span>
    <span style="--color: #ff9999 "></span>
    <span style="--color: #ffcccc "></span>
  </span>  
  <span class="color orange">
    <span style="--color: #ff8000 "></span>
    <span style="--color: #663300 "></span>
    <span style="--color: #994d00 "></span>
    <span style="--color: #cc6600 "></span>
    <span style="--color: #ffcc33 "></span>
    <span style="--color: #ffd966 "></span>
    <span style="--color: #ffe699 "></span>
  </span>  
  <span class="color red">
    <span style="--color: #ff0000 "></span>
    <span style="--color: #660000 "></span>
    <span style="--color: #990000 "></span>
    <span style="--color: #cc0000 "></span>
    <span style="--color: #ff6666 "></span>
    <span style="--color: #ff9999 "></span>
    <span style="--color: #ffcccc "></span>
  </span>  
  <span class="color orange">
    <span style="--color: #ff8000 "></span>
    <span style="--color: #663300 "></span>
    <span style="--color: #994d00 "></span>
    <span style="--color: #cc6600 "></span>
    <span style="--color: #ffcc33 "></span>
    <span style="--color: #ffd966 "></span>
    <span style="--color: #ffe699 "></span>
  </span>  
  
  <span class="color red">
    <span style="--color: #ff0000 "></span>
    <span style="--color: #660000 "></span>
    <span style="--color: #990000 "></span>
    <span style="--color: #cc0000 "></span>
    <span style="--color: #ff6666 "></span>
    <span style="--color: #ff9999 "></span>
    <span style="--color: #ffcccc "></span>
  </span>  
  <span class="color orange">
    <span style="--color: #ff8000 "></span>
    <span style="--color: #663300 "></span>
    <span style="--color: #994d00 "></span>
    <span style="--color: #cc6600 "></span>
    <span style="--color: #ffcc33 "></span>
    <span style="--color: #ffd966 "></span>
    <span style="--color: #ffe699 "></span>
  </span>
</div>

【讨论】：

  • 感谢您的详细解答和解释！！！
猜你喜欢
  • 2014-02-26
  • 2019-03-25
  • 2021-06-23
  • 1970-01-01
  • 2019-01-21
  • 1970-01-01
  • 1970-01-01
  • 2019-01-13
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode