Verschachtelte Box mit Flexbox

ChOpSueY! · #1 (**permalink**) 15.01.2016, 12:24

Hallo Gemeinde,
ich möchte gerne für 4 Boxen das Flexbox Modell anwenden. Hier die Ausganglage:

Hier mein HTML Ansatz:

HTML-Code:

<div class="flexbox">
<div class="produktbox_flex">
<h3>Couperose</h3>
<div class="pb_desc_flex">
<p>Verminderung von Linien und Fältchen, Verbesserung von Festigkeit und Spannkraft des Gewebes. jksdfljsdjkl jjklsdf  jskdl jklsdf sdf jskdlf sdf</p>
</div>
<table>
<tbody>
<tr>
<td>
<p class="green">DAUER:</p>
</td>
<td width="20"> </td>
<td>
<p class="green">ca. 60 Min.</p>
</td>
</tr>
<tr>
<td>
<p class="green">PREIS:</p>
</td>
<td width="20"> </td>
<td>
<p class="green">59,-€</p>
</td>
</tr>
</tbody>
</table>
</div>

Und hier das CSS mit dem es so aussieht wie im Screenshot zu sehen:

Code:

.flexbox, .pb_desc_wrap{
display: flex;
justify-content: space-around;
}

.produktbox_flex{
margin: 0 1em;                
}

Jetzt möchte ich aber, dass der Beschreibungstext in weiß sich der Höhe der höchsten Box (Box 3) annimmt. Ich möchte also, dass DAUER und PREIS schön auf einer Linie stehen. Die Box ist also verschachtelt.

Kann mir hier jemand einen Lösungsansatz bieten wie ich das zu machen habe?

Beste Grüße,
Chop

cloned · #2 (**permalink**) 15.01.2016, 12:36

Hier kann man über die Tabelle streiten, aber ich würde trotzdem zur Verwendung von definition-Lists raten.
Wenn ich das richtig verstanden habe, dann möchtest du preis/dauer am unteren Rand der Box ausrichten? Probiere mal die Verwendung von align-items.

ChOpSueY! · #3 (**permalink**) 15.01.2016, 13:16

Zitat:

Zitat von cloned

Hier kann man über die Tabelle streiten, aber ich würde trotzdem zur Verwendung von definition-Lists raten.
Wenn ich das richtig verstanden habe, dann möchtest du preis/dauer am unteren Rand der Box ausrichten? Probiere mal die Verwendung von align-items.

Naja ich möchte eben, dass Box1, Box2 und Box4 die gleiche höhe annehmen wie Box3, damit DAUER und PREIS auf einer Linie sind.

Wie du richtig sagst wäre auch das Problem gelöst wenn DAUER und PREIS immer am Ende der Box "sitzen". Ich habe mir das mal angeschaut aber so wie ich das sehe müsste ich dann für <div class="pb_desc_flex"> eine Höhe angeben. Dann habe ich das gleiche Problem aber wie ohne Flexbox - es ist eben nicht flexibel. Wenn ich das System dann für eine Box nehme und der Text ist entscheidend länger funktioniert es nicht....

MrMurphy · #4 (**permalink**) 15.01.2016, 14:31

Hallo,

die Tabelle ist sachlich definitiv falsch. Aber das hat mit dem Problem selbst nichts zu tun.

Der Inhalt der vier Boxen muss seinerseits mit Flexbox ausgerichtet werden. Als Richtung wird column gewählt.

Der notwendige Abstand wird erreicht, indem dem ersten unten auszurichtendem Element ein "margin-top: auto;" mit auf den Weg gegeben wird. In meinem Beispiel dem dl-Element.

Genau so kann dem letzten oben ausgerichtetem Element ein "margin-bottom: auto;" mit auf den Weg gegeben werden. Was halt besser passt.

Ich habe dazu mal folgendes Beispiel mit responsive Design erstellt:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Flexbox Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);

   /* Clearfix - Micro-Clearfix-Hack */
   @media all {
      dl::before,
      dl::after,
      .clearfix::before,
      .clearfix::after {
         content: " "; /*Leerstelle ist wichtig*/
         display: table;
      }
      dl::after,
      .clearfix::after {
         clear: both;
      }
   }


   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%;
      }
      body {
         width: 94%;
         margin: 1rem auto;
      }
   }

   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */

   /*Spezielle Einstellungen*/
   @media all {
      .produktbox {
         /*background-color: hsla(203, 4%, 43%, 0.2);*/
         /*border: 1px solid silver;*/
         border-radius: 0.8rem;
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
      }
      .produktbox>* {
         padding: 1%;
         border: 1px solid silver;
         border-radius: 0.5rem;
         margin: 0.5rem;
         -webkit-box-flex: 1;
         -webkit-flex: 1 1 20%;
             -ms-flex: 1 1 20%;
                 flex: 1 1 20%;
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -webkit-flex-direction: column;
             -ms-flex-direction: column;
                 flex-direction: column;
      }
      .produktbox h2 {
         text-transform: uppercase;
         margin-bottom: 0;
      }
      .produktbox p {
         margin-top: 0.5rem;
         margin-bottom: 0;
      }
      .produktbox p:nth-last-child(2) {
         margin-bottom: 0.5rem;
      }
      .produktbox dl {
         margin-top: auto;
      }
      .produktbox dt {
         font-weight: bold;
         text-transform: uppercase;
         float: left;
         width: 4.5rem;
      }
      .produktbox dd {
         font-weight: bold;
         white-space: nowrap;
         margin-left: 0;
      }
   }
   @media only screen and (max-width: 1050px) {
      .produktbox {
         -webkit-flex-wrap: wrap;
             -ms-flex-wrap: wrap;
                 flex-wrap: wrap;
      }
      .produktbox>* {
         -webkit-box-flex: 1;
         -webkit-flex: 1 1 40%;
             -ms-flex: 1 1 40%;
                 flex: 1 1 40%;
      }
   }
   @media only screen and (max-width: 650px) {
      .produktbox>* {
         -webkit-box-flex: 1;
         -webkit-flex: 1 1 60%;
             -ms-flex: 1 1 60%;
                 flex: 1 1 60%;
      }
   }

   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */

   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <main>
      <article class="produktbox">
         <section>
            <h2>Banane</h2>
            <p>Lieber Onkel Reinhard, schon lange wollte ich Dir sagen, dass ich Dich für einen ganz tollen Texter halte.</p>
            <dl>
               <dt>Dauer:</dt>
               <dd>ca. 60 Min.</dd>
               <dt>Preis:</dt>
               <dd>59,00 €</dd>
            </dl>
         </section>
         <section>
            <h2>Kiwi</h2>
            <p>Ich weiss, Du hörst sehr gerne Lob, und deshalb kann man nicht oft genug sagen, dass Du der Grösste bist.</p>
            <p>Gerade in Deinem Alter ist man ja gesegnet, wenn man noch so witzig schreiben kann wie Du.</p>
            <dl>
               <dt>Dauer:</dt>
               <dd>ca. 40 Min.</dd>
               <dt>Preis:</dt>
               <dd>49,00 €</dd>
            </dl>
         </section>
         <section>
            <h2>Erdbeere</h2>
            <p>Viele Deiner Werberkollegen sind ja schon zu wichtig, um noch Humor zu haben.</p>
            <dl>
               <dt>Dauer:</dt>
               <dd>ca. 120 Min.</dd>
               <dt>Preis:</dt>
               <dd>99,00 €</dd>
            </dl>
         </section>
         <section>
            <h2>Clementine</h2>
            <p>Du bist da ganz anders.</p>
            <dl>
               <dt>Dauer:</dt>
               <dd>ca. 30 Min.</dd>
               <dt>Preis:</dt>
               <dd>29,00 €</dd>
            </dl>
         </section>
      </article>
   </main>
</body>
</html>

Ein temporärer Link zu meiner Testseite zum direkten Ausprobieren:

http://boratb.bplaced.net/

Gruss

MrMurphy

ChOpSueY! · #5 (**permalink**) 15.01.2016, 19:44

Hi Murphy,
super, vielen Dank für die Mühe die du dir gemacht hast. So habe ich es verstanden, funktioniert auch einwandfrei. Echt super das Flexbox System. Wie seht man das denn mittlerweile so bezüglich Browserkompabilität. Kann man darauf jetzt schon zugreifen, oder sollte man lieber noch warten bis die Kompabilität besser ist.

MrMurphy · #6 (**permalink**) 15.01.2016, 20:34

Hallo

Flexbox kann bereits seit über einem Jahr benutzt werden.

Für die Praxis empfehle ich Prefixe wie in meinem Beispiel zu verwenden. Die können nach der Erstellung automatisch hinzugefügt werden.

Das Layout kann also erstmal problemlos ohne Prefixe erstellt werden, bis die Seite in den aktuellen Browsern funktioniert.

Die mangelnde Browserunterstützung wird nur von Anwendern vorgeschoben, die Flexbox nicht verwenden können oder wollen. Um nicht als veraltet zu gelten wird Flexbox dann von denen halt allen Anderen ausgeredet. Es ist auch immer wieder erstaunlich das solche Anwender CSS-Eigenschaften benutzen, die deutlich geringer als Flexbox von den Browsern unterstützt werden, aber einfacher anzuwenden sind.

Probleme bereitet eher die etwas sperrige Anwendung. Die ist nicht sehr intuitiv und in den Anleitungen werden die vorhandenen Knackpunkte leider meist verschwiegen.

So habe ich die Möglichkeit des "margin: auto;" im Zusammenhang mit Flexbox auch durch Zufall einem Video entnommen. Für einige meiner Probleme habe ich auch noch keine Lösung gefunden. Das sind aber alles keine Browserprobleme.

Flexbox ist auch kein Ersatz für andere CSS-Eigenschaften, sondern bietet zusätzliche Möglichkeiten. Flexbox starrsinnig für alle Layoutprobleme ist auch keine Lösung.

Flexbox ist in jedem Fall eine CSS-Eigenschaft der Gegenwart und der Zukunft. Also anwenden und die Knackpunkte überwinden.

Gruss

MrMurphy

ChOpSueY! · #7 (**permalink**) 20.01.2016, 13:52

Hi,
ich hätte dazu noch eine Frage:

In deinem Beispiel haben wir ja genau vier Colums, die die gleiche Breite in einer zeile annehmen.

Was machen wir wenn wir jetzt ein fünftes Element haben was in der gleichen Breite wie die anderen auch in der zweiten Zeile angezeigt werden soll.

So wie es jetzt ist werden ja, wenn ich ein weiteres <section> hinzüge, 5 Elemente in einer Zeile ausgegeben. Also müsste ich ja für Reihe 2 ein neues <article> Element anlegen. In diesem Falle erstreckt sich dann aber das fünfte Element über den kompletten Platz. Gibt es eine Möglichkeit das zu verhindern?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
verschachtelte Flexbox - Probleme mit Firefox und IE	toccamonium	CSS	2	08.11.2015 14:52
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!?	damonster	CSS	12	27.08.2008 15:56
ineinander verschachtelte container.Mozilla box fliesst raus	franz	CSS	3	16.04.2006 22:23
Kniffliges Layout mit float	Roadrunnerle	CSS	6	14.03.2006 11:26
#boxes a:hover.info: 2.posting mit css !!!	marioN	CSS	5	25.01.2004 17:04