Nie działa display: flex :(

Question

<div class="gallery">
            <div class="container flex">
                <div class="card">
                    <h3>Mikroorganizmy przewodu pokarmowego</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                    Doloribus perferendis velit magni facere, amet dicta animi veniam? Nostrum, 
                    suscipit laborum.</p>
                </div>
                <div class="card">
                    <h3>Mikroorganizmy przewodu pokarmowego</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                        Doloribus perferendis velit magni facere, amet dicta animi veniam? Nostrum, 
                        suscipit laborum.</p>
                </div>
                <div class="card">
                    <h3>Mikroorganizmy przewodu pokarmowego</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                        Doloribus perferendis velit magni facere, amet dicta animi veniam? Nostrum, 
                        suscipit laborum.</p>
                </div>

                <div class="card">
                    <h3>Mikroorganizmy przewodu pokarmowego</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                        Doloribus perferendis velit magni facere, amet dicta animi veniam? Nostrum, 
                        suscipit laborum.</p>
                </div>
                <div class="card">
                    <h3>Mikroorganizmy przewodu pokarmowego</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                        Doloribus perferendis velit magni facere, amet dicta animi veniam? Nostrum, 
                        suscipit laborum.</p>
                </div>
                <div class="card">
                    <h3>Mikroorganizmy przewodu pokarmowego</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                        Doloribus perferendis velit magni facere, amet dicta animi veniam? Nostrum, 
                        suscipit laborum.</p>
                </div>
            </div> 
        </div>

.gallery{

    width: 100vw;
    height: auto;

    padding: 100px 100px;

    display: flex;

    position: relative;

    background-color: #012F4A;
}

.container .flex{

    width: 100vw;
    height: auto;

    position: relative;

    display: flex;
}

.container .card{

    width: 300px;
    height: 300px;

    border-radius: 10px;
    
    padding: 20px 20px;

margin: 20px;

    background-color: white;
    box-shadow: 0 3px 10px rgba(0,0,0, 0.2);
}
.card h2 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1em;
}
.card h3 {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1em;
}
.card p{
    font-size: 1.1em;
    margin: 20px 0;
    font-weight: 400;
}

Chciałem wykorzystać flex-wrap: wrap

Tak żeby się wszystkie białe divy "card" zwijały przy ściąganiu okna przeglądarki dla zmiany rozdzielczości...ale nawet display flex nie działa.

O co cman ?

 

Z góry wielkie dzięki za zainteresowanie sprawą.

Answer 1

Ten zapis

.container .flex{ 
    width: 100vw;
    height: auto; 
    position: relative; 
    display: flex;
}

odnosi się do

<div class="container">
   <div class="flex"> . . . </div>
</div>

 

możesz np. tak

.container, .flex{ 
    width: 100vw;
    height: auto; 
    position: relative; 
    display: flex;
}

lub

.container {
    . . .
    display: flex;
}

lub

.flex {
    . . .
    display: flex;
}

lub

.gallery .flex {
    . . .
    display: flex;
}

no i dopisz

[ edit ]

.container, .flex{ 
    width: 100vw;
    height: auto; 
    position: relative; 
    display: flex;
    flex-wrap: wrap;
}

 

[ A Complete Guide to Flexbox ]

Comments

kolego, ale ja chce żeby one były ustawione od lewej do prawej...

a ustawiały się automatycznie w row po wprowadzeniu flex-wrap: wrap;

a to co napisałeś z góry zakłada, że mają się ustawiać w row naginając samo flex

IMO nic to nie zmieni w wyglądzie, który jest obecnie

 

 

dobra nie było tematu, pieprzony przecinek ...

DZIĘKÓWKA !!!

---

Flex-a ustaw według swojego uznania.