flexbox سوال

حسن خسروجردی

با سلام خدمت شما همراه عزیز

متوجه نشدم

چرا flex wrap رو بذارید flex?

zeinabjri

نه استاد ببخشید من سوالمو بد پرسیدم

من برای یه گالری display:flex گذاشتم عمل کرد و عکسا از پایین scroll خوردن  اما وقتی از خاصیت wrap استفاده کردم نه تنها عمل نمیکرد بلکه حتی عکسا به حالت اول برگشتن و عمودی شدن تو سایت نمیدونم مشکلش چیه 

ولی وقتی حتی به تنهایی از خاصیت wrap استفاده کردم بازم عمل نکرد.

حسن خسروجردی

لطفا کدهاتونو کامل قرار بدید

zeinabjri

<section class="gallery">

    <div class="cards-wrapper">

        <div class="card">

            <div class="card-overlay">

                <h1 class="card-overlay-heading">نام غذا </h1>

                <p class="card-overlay-paragraph">قیمت: </p>

                <button type="button" class="card-overlay-btn">سفارش غذا</button>

            </div>

            <img src="/images/gallery-img-1.jpeg">

        </div>

        <div class="card">

            <div class="card-overlay">

                <h1 class="card-overlay-heading">نام غذا </h1>

                <p class="card-overlay-paragraph">قیمت: </p>

                <button type="button" class="card-overlay-btn">سفارش غذا</button>

            </div>

            <img src="/images/gallery-img-2.jpeg">

        </div>

        <div class="card">

            <div class="card-overlay">

                <h1 class="card-overlay-heading">نام غذا </h1>

                <p class="card-overlay-paragraph">قیمت: </p>

                <button type="button" class="card-overlay-btn">سفارش غذا</button>

            </div>

            <img src="/images/gallery-img-3.jpeg">

        </div>

        <div class="card">

            <div class="card-overlay">

                <h1 class="card-overlay-heading">نام غذا </h1>

                <p class="card-overlay-paragraph">قیمت: </p>

                <button type="button" class="card-overlay-btn">سفارش غذا</button>

            </div>

            <img src="/images/gallery-img-4.jpeg">

        </div>

        <div class="card">

            <div class="card-overlay">

                <h1 class="card-overlay-heading">نام غذا </h1>

                <p class="card-overlay-paragraph">قیمت: </p>

                <button type="button" class="card-overlay-btn">سفارش غذا</button>

            </div>

            <img src="/images/gallery-img-5.jpeg">

        </div>

        <div class="card">

            <div class="card-overlay">

                <h1 class="card-overlay-heading">نام غذا </h1>

                <p class="card-overlay-paragraph">قیمت: </p>

                <button type="button" class="card-overlay-btn">سفارش غذا</button>

            </div>

            <img src="/images/gallery-img-6.jpeg">

        </div>

    </div>

</section>

zeinabjri

اینم استایل دهی در فایل sass

.gallery{

    .cards-wrapper{

        display:flex;

        flex-wrap: wrap;

    }

}

حسن خسروجردی

با این لینک مقایسه کنید

https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp