drei Spalten, die mittlere soll flexibel sein

[MrMurphy1]

Hallo

Zur Veranschauung ein praktisches Beispiel:

Zu diesem HTML

<article class="beitrag">
   <aside>
      <h2>Schere</h2>
      <p>Text</p>
      <h2>Stein</h2>
      <p>Text</p>
   </aside>
   <section>
      <h2>Schere, Stein, Papier</h2>
      <p>Text</p>
   </section>
   <aside>
      <h2>Papier</h2>
      <p>Text</p>
   </aside>
</article>

könntest du dieses CSS verwenden:

.beitrag {
   display: flex;
}
.beitrag>aside {
   background-color: #000000;
   color: white;
   padding: 1rem;
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 250px;
}
.beitrag>section {
   background-color: #ff0000;
   padding: 1rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
}

oder für ein Responsive Design das folgende CSS:

@media all {
   .beitrag>aside {
      background-color: #000000;
      color: white;
      padding: 1rem;
   }
   .beitrag>section {
      background-color: #ff0000;
      padding: 1rem;
   }
}
@media only screen and (min-width: 1000px) {
   .beitrag {
      display: flex;
   }
   .beitrag>aside {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 250px;
   }
   .beitrag>section {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
   }
}

Ein praktisches Beispiel könnte folgendermaßen ausschauen:

Beispielseite

Gruss

MrMurphy