1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Per FlexBox Style wie im Float Layout erreichen!

Dieses Thema im Forum "CSS" wurde erstellt von Guri, 9. Januar 2017.

  1. 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:
    1.  
    2.     .flex {
    3.         background: orange;
    4.         height: 300px;
    5.         width: 500px;
    6.      
    7.     }
    8.     .flex1 {
    9.         background: red;
    10.         height: 100px;
    11.         width: 100px;
    12.      
    13.     }
    14.     .flex2 {
    15.         background: green;
    16.         height: 100px;
    17.         width: 100px;
    18.      
    19.     }
    20.     .flex3 {
    21.         background: blue;
    22.         height: 100px;
    23.         width: 100px;
    24.      
    25.     }
    26.  
    27.  
    28.     <div class="flex">
    29.        <div class="flex1"></div>
    30.        <div class="flex2"></div>
    31.        <div class="flex3"></div>
    32.    </div>
    33.  
    34. </body>
    35. </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:

    https://www.tutorials.de/data/attachments/50/50845-5140af7591606ea7886bc8f4d3f013c7.jpg

    mit float were die code bzw. style hier:
    HTML:
    1.  
    2.     .box {
    3.         background: orange;
    4.         height: 300px;
    5.         width: 500px;
    6.     }
    7.     .box1 {
    8.         background: red;
    9.         height: 100px;
    10.         width: 100px;
    11.         float: left;
    12.     }
    13.     .box2 {
    14.         background: green;
    15.         height: 100px;
    16.         width: 100px;
    17.         float: left;
    18.     }
    19.     .box3 {
    20.         background: blue;
    21.         height: 100px;
    22.         width: 100px;
    23.         float: right;
    24.     }
    25.  
    26.  
    27.     <div class="box">
    28.        <div class="box1"></div>
    29.        <div class="box2"></div>
    30.        <div class="box3"></div>
    31.    </div>
    32.  
    33. </body>
    34. </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:

    Zuletzt bearbeitet: 9. Januar 2017
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Zuletzt bearbeitet: 9. Januar 2017
  3. Guri

    Guri Mitglied

    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:
    1.  
    2.    .flex {
    3.        background: orange;
    4.        height: 300px;
    5.        width: 500px;
    6.      
    7.        display: flex;
    8.        justify-content: space-between;
    9.        align-items: flex-start;
    10.    }
    11.  
    12.    .flex-left {
    13.        background: cyan;
    14.        height: auto;
    15.        width: auto;
    16.      
    17.        display: flex;
    18.    }
    19.    .flex-right {
    20.        background: magenta;
    21.        height: auto;
    22.        width: auto;
    23.      
    24.        display: flex;
    25.    }
    26.  
    27.    .flex1 {
    28.        background: red;
    29.        height: 100px;
    30.        width: 100px;
    31.    }
    32.    .flex2 {
    33.        background: green;
    34.        height: 100px;
    35.        width: 100px;
    36.    }
    37.    .flex3 {
    38.        background: blue;
    39.        height: 100px;
    40.        width: 100px;
    41.    }
    42.  
    43. <div class="flex">
    44.  
    45.    <div class="flex-left">
    46.        <div class="flex1"></div>
    47.        <div class="flex2"></div>
    48.    </div>
    49.  
    50.    <div class="flex-right">
    51.        <div class="flex3"></div>
    52.    </div>
    53.  
    54. </div>
    55.  
    56. </body>
    57. </html>
    und scheint zu funtionieren, mfg Guri.
     
  4. MrMurphy

    MrMurphy Mitglied

    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 (Text):
    1.    <div class="flex">
    2.       <div class="flex1"></div>
    3.       <div class="flex2"></div>
    4.       <div class="flex3"></div>
    5.    </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 (Text):
    1.    .flex {
    2.       background: orange;
    3.       width: 500px;
    4.       height: 300px;
    5.    }
    6.    .flex1 {
    7.       background: red;
    8.       width: 100px;
    9.       height: 100px;
    10.    }
    11.    .flex2 {
    12.       background: green;
    13.       width: 100px;
    14.       height: 100px;
    15.    }
    16.    .flex3 {
    17.       background: blue;
    18.       width: 100px;
    19.       height: 100px;
    20.    }
    müssen nur zwei Einträge hinzugefügt werden:

    Code (Text):
    1.    .flex {
    2.       background: orange;
    3.       width: 500px;
    4.       height: 300px;
    5.       display: flex;
    6.    }
    7.    .flex1 {
    8.       background: red;
    9.       width: 100px;
    10.       height: 100px;
    11.    }
    12.    .flex2 {
    13.       background: green;
    14.       width: 100px;
    15.       height: 100px;
    16.       margin-right: auto;
    17.    }
    18.    .flex3 {
    19.       background: blue;
    20.       width: 100px;
    21.       height: 100px;
    22.    }
    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 (Text):
    1.    <div class="flex">
    2.       <div></div>
    3.       <div></div>
    4.       <div></div>
    5.    </div>
    und

    Code (Text):
    1.    .flex {
    2.       background: orange;
    3.       width: 500px;
    4.       height: 300px;
    5.       display: flex;
    6.    }
    7.    .flex>* {
    8.       width: 100px;
    9.       height: 100px;
    10.    }
    11.    .flex>:nth-child(1) {
    12.       background: red;
    13.    }
    14.    .flex>:nth-child(2) {
    15.       background: green;
    16.       margin-right: auto;
    17.    }
    18.    .flex>:nth-child(3) {
    19.       background: blue;
    20.    }
    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: 10. Januar 2017
    sheel gefällt das.
  5. Guri

    Guri Mitglied

    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:
     
Die Seite wird geladen...