Bagaimana untuk membuat elemen mengisi bekasnya menggunakan CSS?

Question

Bagaimana kita boleh membuat elemen margin mengisi item Flexbox yang bukan Flexbox itu sendiri?

Elemen (walaupun elemen bersarang dengan jidar) boleh mengisi bekasnya dengan mudah menggunakan position:absolute - jika ia bukan di dalam projek Flexbox. Mengapa ini tidak berfungsi untuk elemen dalam projek Flexbox?

<main>
  <nav>NAV</nav>
  <section>
    <div>DIV</div>
  </section>
</main>


<style>

html, body {
  position:absolute; top:0; left:0; right:0; bottom:0;
  margin: 0;
}

main {
  position:absolute; top:0; left:0; right:0; bottom:0;
  display: flex;
}

nav {
  flex-basis: 250px;
  background-color: #eee;
}

section {
  flex-basis: 100%;
  background-color: #ccc;
  margin: 10px;
}

div {
  /* position:absolute; top:0; left:0; right:0; bottom:0; */
  /* why doesn't the above line work? */

  background-color: #cfc;
  margin: 10px;
}

</style>

Terdapat banyak soalan serupa seperti ini dan soalan ini yang sebenarnya tidak sesuai untuk item di dalam kotak flex atau item dengan jidar. Terdapat banyak penyelesaian kes khas, seperti align-self:stretch、height:100% 和 box-sizing:border-box 在本例中不起作用，因为嵌套的 margin atau fakta bahawa Flexbox sendiri tidak bersarang. Masalah terus timbul dengan penggodam satu kali ini...

Jadi apakah cara umum untuk mengisi projek Flexbox? position:absolute Apa masalahnya di sini? Apakah cara paling umum untuk mempunyai elemen mengisi bekasnya?

Answer 1

Berikut adalah beberapa idea yang mungkin anda fikir berbaloi untuk diterokai? Saya akan nav 作为 main 的兄弟而不是孩子。这对于 CSS 来说不是必需的，但结构最有意义。理想情况下，您有 header、nav``main、footer，也可能有 aside. Anda benar-benar mahu mengelakkan semua kedudukan mutlak. Ia tidak dimainkan dengan baik pada mudah alih - bayangkan apa yang akan berlaku jika anda meletakkan kotak teks atau kawasan teks pada halaman dan pengguna mudah alih mengklik padanya dan papan kekunci lembut muncul.

body {
  display: grid;
  grid-template-columns: [left] 196px [main] 1fr [right];
  grid-template-rows: [top] 1fr [bottom];
  grid-gap: 4px;
  outline: 1px dashed #616161;
  min-height: 100vh;
  min-width: 0;
}
body > nav {
  outline: 1px dashed red;
  grid-column-start: left;
  grid-column-end: main;
  grid-row-start: top;
  grid-row-end: bottom;
}
body > main {
  outline: 1px dashed blue;
  grid-column-start: main;
  grid-column-end: right;
  grid-row-start: top;
  grid-row-end: bottom;
  display: flex;
  flex-flow: column nowrap;
}
section {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
}
div {
  flex: 1 1 auto;
  margin: 4px;
  outline: 1px dotted green;
  min-height: auto;
}

NAV

  

    
DIV
  

Answer 2

  
NAV
  

    
DIV