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

Soalan:

Soalan saya sangat mudah, saya ingin tahu mengapa elemen .header melimpahi trek gridnya apabila ia mencapai lebar paparan 1500 piksel.

Kod:

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

Kesan yang saya mahukan:

Idea saya adalah untuk menjadikan lebar elemen .header元素的寬度為1500像素。當空間不足時，.header 1500 piksel. Apabila ruang rendah,

sepatutnya menduduki 90% daripada trek gridnya.

Apa yang saya cuba:

width: min(1500px, 90%)并在.header元素中刪除max-width，成功實現(xiàn)了這個效果，但我不知道具體發(fā)生了什么。我猜測網(wǎng)格軌道是根據(jù)內(nèi)容的寬度來計算其寬度的。目前我不太確定1frSaya berjaya mencapai kesan ini dengan menetapkan width: min(1500px, 90%) dan memadamkan max-width dalam elemen

, tetapi saya tidak tahu dengan tepat apa yang berlaku Apa. Saya rasa trek grid mengira lebarnya berdasarkan lebar kandungannya. Pada masa ini saya tidak pasti apa sebenarnya maksud 1fr.

Pemikiran saya:

Semua orang berkata Grid hebat, tetapi saya sentiasa menghadapi masalah apabila meninggalkan kehangatan Flexbox. ??

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