• 1400/01/24

flexbox سوال :

با سلام 

من با در نظر گرفتن اینکه display:flex باشه و داخل conteinar  هم تعریف شده باشه هر چه قدر flex-wrap رو برابر با flex قرار میدم عمل نمیکنه اصلا display  رو عمل میکنه ولی خاصیت  wrap  رو نه

تو اینترنتم نبود سرچ کردم

  • 1400/01/25
  • ساعت 13:51

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

 

 

متوجه نشدم

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


  • 1400/01/26
  • ساعت 00:57

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

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

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


  • 1400/01/26
  • ساعت 15:59

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


  • 1400/01/26
  • ساعت 18:39

<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="buttonclass="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="buttonclass="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="buttonclass="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="buttonclass="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="buttonclass="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="buttonclass="card-overlay-btn">سفارش غذا</button>

            </div>

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

        </div>

    </div>

</section>


 


  • 1400/01/26
  • ساعت 18:40

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

.gallery{

    .cards-wrapper{

        display:flex;

        flex-wrap: wrap;

    }

}


  • 1400/01/28
  • ساعت 14:11

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

 

 

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


logo-samandehi logo-anjoman-senfi