Flexbox Boxen in zweite Zeile

kallle · 27.02.2022

Hallo zusammen,

ich brüte schon eine Weile über einem Flexbox-Problem.

Ich habe eine wechselnde Anzahl von Figure-Boxen. Diese sollen alle die gleiche Höhe und eine Mindest- und eine Maximalbreite haben.

Das Eltern-DIV "menuboxen_aussen" soll immer komplett ausgenutzt werden. Es sei denn, es sind nur wenige Boxen aktiv, dann sorgt ja die Maximalbreite jeder Box für einen Zwischenraum.

Wenn nun das Fenster schmaler wird sollen die Boxen in die zweite Reihe rutschen.

Ich möchte quasi diese Boxen "nachbauen".

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>test</title>
        <style>
            @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css);
            #menuboxen_aussen {
                display:flex;
                }
            .menuboxen {
                margin: 20px;
                min-width: 300px;
                max-width: 310px;
                height: 320px;
                background-color: #EEEEEE;
                border: 1px solid #A2BC09;
                color: #000000;
                text-align: center;
            }
            .menuboxen figcaption {
                padding: 40px 0 0 0;
            }
            .menuboxen i {
                font-size: 54px;
                color: #006528;
                width: 100px;
                line-height: 100px;
                background-color: #ffffff;
                border: 1px solid #A2BC09;
                padding: 0;
                margin: 0 0 10px;
                text-align: center;
                display: inline-block;
            }
            .menuboxen i:hover{
                color: #006528;
                background-color: #A2BC09;
                border: 1px solid #006528;
            }
            figure.menuboxen figcaption h3 a {
                color: #000000;
                font-family: sans-serif;
                text-decoration: none;
            }
            figure.menuboxen figcaption h3 a:hover {
                color: #006528;
                font-family: sans-serif;
                text-decoration: none;
            }
            figure.menuboxen figcaption p {
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <div id="menuboxen_aussen">
            <figure class="menuboxen">
                <figcaption><a href="#"><i class="fa fa-pencil"></i></a>
                    <h3><a href="#">Pencil</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ligula eget dolor</p>
                </figcaption>
            </figure>
            <figure class="menuboxen">
                <figcaption><i class="fa fa-car"></i>
                    <h3><a href="#">Car</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                </figcaption>
            </figure>
            <figure class="menuboxen">
                <figcaption><i class="fa fa-users"></i>
                    <h3><a href="#">User</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor</p>
                </figcaption>
            </figure>
            <figure class="menuboxen">
                <figcaption><i class="fa fa-screwdriver-wrench"></i>
                    <h3><a href="#">ScrewdriverAndWrenchTools</a></h3>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </figure>
            <figure class="menuboxen">
                <figcaption><i class="fa fa-key"></i>
                    <h3><a href="#">Key</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</p>
                </figcaption>
            </figure>
            <figure class="menuboxen">
                    <figcaption><i class="fa fa-shield-virus"></i>
                    <h3><a href="#">Virus</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetuer </p>
                </figcaption>
            </figure>
        </div>
    </body>
</html>

Kann mir jemand sagen wie ich das anstelle?

Vielen Dank und viele Grüße
kalle

Sempervivum · 28.02.2022

Hallo kalle,
versuche dies CSS, es sollte das tun, was Du möchtest:

Code:

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

https://kulturbanause.de/blog/css-grid-auto-fill-responsive-layouts-ohne-media-queries/

Das Beispiel mit einem festen Wert für den max-Wert:

Code:

grid-template-columns: repeat(auto-fit, minmax(300px, 500px));

funktioniert bei mir leider nicht und mir ist unverständlich warum nicht.