✔ Per FlexBox Style wie im Float Layout erreichen!

Guri

Guri

Mitglied
Hallo Leute,

ich wollte was erreichen mit FlexBox das selebe wie mit Float, aber habe ich nicht geschaft,
habe auch im internet und foren gesucht sogar auch in FlexBox generatoren wie hier: http://the-echoplex.net/flexyboxes/ habe kein lösung gefunden,
ich dachte mir, wird einfach aber war es nicht, grundgerrüst für flex, were so:

HTML: 
<html>
<head>

<style>
    .flex {
        background: orange;
        height: 300px;
        width: 500px;
      
    }
    .flex1 {
        background: red;
        height: 100px;
        width: 100px;
      
    }
    .flex2 {
        background: green;
        height: 100px;
        width: 100px;
      
    }
    .flex3 {
        background: blue;
        height: 100px;
        width: 100px;
      
    }
</style>

<head>
<body>

    <div class="flex">
       <div class="flex1"></div>
       <div class="flex2"></div>
       <div class="flex3"></div>
   </div>

</body>
</html>
hier fehlt nur die Flex-Style bzw. css-code,


ich will erreichen, in einen großen box 500x300 px, 3 kleine boxen je 100 px, 2 sollten links sein und eine recht, wie im bild hier:

50845-5140af7591606ea7886bc8f4d3f013c7.jpg


mit float were die code bzw. style hier:
HTML: 
<html>
<head>

<style>
    .box {
        background: orange;
        height: 300px;
        width: 500px;
    }
    .box1 {
        background: red;
        height: 100px;
        width: 100px;
        float: left;
    }
    .box2 {
        background: green;
        height: 100px;
        width: 100px;
        float: left;
    }
    .box3 {
        background: blue;
        height: 100px;
        width: 100px;
        float: right;
    }
</style>

<head>
<body>

    <div class="box">
       <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>
   </div>

</body>
</html>

meine Frage, wie erreiche ich denn selben effekt wie bei Float per FlexBox, ohne margin und padding,
ich bedanke mich im Voraus, mfg Guri.
 

Anhänge

  • float-modell.png
    float-modell.png
    285 Bytes · Aufrufe: 1
Zuletzt bearbeitet:
Hallo und vielen Dank für den Tipp, das heisst ohne verstachtelung geht es nicht,

ich habe hin bekomen, und zwar, die beide boxen links in eine box, und den boxen recht auch in eine box, es ist oder sieht so aus wie mit float, so:

HTML: 
<html>
<head></head>
<style>

   .flex {
       background: orange;
       height: 300px;
       width: 500px;
      
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
   }
  
   .flex-left {
       background: cyan;
       height: auto;
       width: auto;
      
       display: flex;
   }
   .flex-right {
       background: magenta;
       height: auto;
       width: auto;
      
       display: flex;
   }

   .flex1 {
       background: red;
       height: 100px;
       width: 100px;
   }
   .flex2 {
       background: green;
       height: 100px;
       width: 100px;
   }
   .flex3 {
       background: blue;
       height: 100px;
       width: 100px;
   }
</style>
<body>

<div class="flex">

   <div class="flex-left">
       <div class="flex1"></div>
       <div class="flex2"></div>
   </div>
  
   <div class="flex-right">
       <div class="flex3"></div>
   </div>
  
</div>

</body>
</html>

und scheint zu funtionieren, mfg Guri.
 
Hallo

Flexbox funktioniert eindimensional, also entweder horizontal oder vertikal. Deshalb sind manchmal zusätzliche Container erforderlich.

In diesem Fall gibt es einen Flex-Container, desser gesamter Inhalt horizontal dargestellt werden soll. Deshalb ist kein zusätzlicher Container erforderlich.

Für die gewünschte Darstellung muss deshalb der ursprüngliche HTML-Quelltext nicht geändert werden, also

Code: 
   <div class="flex">
      <div class="flex1"></div>
      <div class="flex2"></div>
      <div class="flex3"></div>
   </div>

Weiterhin wird in den üblichen Flexbox-Anleitungen gerne unterschlagen, dass unter Flexbox die Angabe margin: auto; spezielle Auswirkungen hat. In diesem Fall wird margin-right: auto; benötigt.

Zum ursprünglichen CSS

Code: 
   .flex {
      background: orange;
      width: 500px;
      height: 300px;
   }
   .flex1 {
      background: red;
      width: 100px;
      height: 100px;
   }
   .flex2 {
      background: green;
      width: 100px;
      height: 100px;
   }
   .flex3 {
      background: blue;
      width: 100px;
      height: 100px;
   }

müssen nur zwei Einträge hinzugefügt werden:

Code: 
   .flex {
      background: orange;
      width: 500px;
      height: 300px;
      display: flex;
   }
   .flex1 {
      background: red;
      width: 100px;
      height: 100px;
   }
   .flex2 {
      background: green;
      width: 100px;
      height: 100px;
      margin-right: auto;
   }
   .flex3 {
      background: blue;
      width: 100px;
      height: 100px;
   }

Mit den CSS3-Selektoren kann der Quelltext noch gestrafft werden. id und class sollen im Zuge der Trennung von Inhalt und Gestaltung bekanntlich deutlich sparsamer eingesetzt werden. Weiterhin kann das CSS noch zusammengefasst werden. Also

Code: 
   <div class="flex">
      <div></div>
      <div></div>
      <div></div>
   </div>

und

Code: 
   .flex {
      background: orange;
      width: 500px;
      height: 300px;
      display: flex;
   }
   .flex>* {
      width: 100px;
      height: 100px;
   }
   .flex>:nth-child(1) {
      background: red;
   }
   .flex>:nth-child(2) {
      background: green;
      margin-right: auto;
   }
   .flex>:nth-child(3) {
      background: blue;
   }

Im kleinen wie in diesem Beispiel machen sich die Vorteile dieser Schreibweise noch nicht bemerkbar. Bei komplexeren Layouts wird der HTML-Quelltext übersichtlicher und das CSS einfacher wartbar und erweiterbar.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hallo und vielen Dank, für den schönen Erklerung,
man lernt nicht Genug, immer was Neues,
manchmal sieht man nicht den Wald, von latuern Bäumen, mfg Guri.

so geht auch:
.flex {
background: orange;
width: 500px;
height: 300px;
display: flex;
}
.flex1 {
background: red;
width: 100px;
height: 100px;
}
.flex2 {
background: green;
width: 100px;
height: 100px;
}
.flex3 {
background: blue;
width: 100px;
height: 100px;
margin: 0 0 0 auto;
}
Zum Vergrößern anklicken....
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück