Rahmen bei Flexbox

mtm · 14. August 2017

Hallo zusammen,

zuerst mal : 'Schön, dabei zu sein !'.

Ich hab' da ein kleines Problem . Ich erneuere gerade die HP eines Chores (responsive). Dabei arbeite ich auch (logisch) mit Flexboxen. Ich habe einen <article>-Teil und einen <aside>-Teil. Es funktioniert soweit auch alles, d.h. die Teile werden nebeneinander dargestellt, wenn genug Platz da ist, ansonsten untereinander. So weit, so gut.
Dem <aside>-Teil habe ich einen bottom-left mitgegeben. Wenn die Teile aber untereinander stehen, soll er natürlich einen bottom-top haben.
Hat jemand von Euch eine Idee, wie ich das hinkriege ?

Danke im Voraus

mtm

MrMurphy · 14. August 2017

Hallo

Zitat

Hat jemand von Euch eine Idee, wie ich das hinkriege ?

Ja. Verwende Media Queries und bestimme dadurch den Umbruch selbst.

Zu diesem HTML

Code

<main class="content">
   <article class="contentarticle">
   </article>
   <aside class="contentaside">
   </aside>
</main>

könnte das CSS zum Beispiel so aussehen:

Code

/*.content*/
   @media only screen and (min-width: 900px) {
      .content {
         display: flex;
      }
   }

   /*.contentarticle*/
   @media only screen and (min-width: 900px) {
      .contentarticle {
         flex-grow: 1;
      }
   }

   /*.contentaside*/
   @media all {
      .contentaside {
         border-top: 2px solid grey;
      }
   }
   @media only screen and (min-width: 900px) {
      .contentaside {
         border-top: 0;
         border-left: 2px solid grey;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 300px;
      }
   }

Alles anzeigen

Und ein Beispiel zum direkten ausprobieren:

Beispielseite

Gruss

MrMurphy

Rahmen bei Flexbox

Jetzt mitmachen!

Teilen