亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Frage:

Meine Frage ist ganz einfach: Ich m?chte wissen, warum das .header-Element seine Rasterspur überl?uft, wenn es die Ansichtsfensterbreite von 1500 Pixel erreicht.

Code:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: #6e28d9;
  color: white;
}

.container {
  display: grid;
  grid-template-areas: 'header';
  grid-template-columns: 1fr;
  background-color: rgba(255, 255, 255, 0.2);
}

.header {
  display: flex;
  justify-content: space-between;
  grid-area: header;
  width: 1500px;
  max-width: 90%;
  margin: 0 auto;
}

<body>
    <div class="container">
      <div class="header">
        <div class="header-start">header start</div>
        <div class="header-end">header end</div>
      </div>
    </div>
  </body>

Der Effekt, den ich m?chte:

Meine Idee ist, die Breite des .header元素的寬度為1500像素。當(dāng)空間不足時，.header-Elements auf 1500 Pixel festzulegen. Wenn der Platz knapp ist, sollte

90 % seiner Rasterspur belegen.

Was ich versucht habe:

width: min(1500px, 90%)并在.header元素中刪除max-width，成功實現(xiàn)了這個效果，但我不知道具體發(fā)生了什么。我猜測網(wǎng)格軌道是根據(jù)內(nèi)容的寬度來計算其寬度的。目前我不太確定1frIch habe diesen Effekt erfolgreich erreicht, indem ich width: min(1500px, 90%) festgelegt und max-width im

-Element gel?scht habe, aber ich wei? nicht genau, was passiert ist Was. Ich vermute, dass die Rasterspur ihre Breite anhand der Breite ihres Inhalts berechnet. Im Moment bin ich mir nicht sicher, was genau 1fr bedeutet.

Meine Gedanken:

Jeder sagt, Grid sei gro?artig, aber ich bekomme immer Probleme, wenn ich die W?rme von Flexbox verlasse. ??

*{ box-sizing: border-box; padding: 0; margin: 0; } body { background: #6e28d9; color: white; } .container{ display: grid; grid-template-areas: 'header'; grid-template-columns: 1fr; background-color: rgba(255, 255, 255, 0.2); } .header{ display: flex; justify-content: space-between; grid-area: header; width: 1500px; max-width: 90vw; margin: 0 auto; border: 1px solid red; /*Added just to visualize the exact width*/ }