ساختار flexbox برای عناصر در کتابخانه Owl Carousel 2

HTML, Js:

<!--popular-products-->
        <section class="popular-products block-shadow container">
            <link rel="stylesheet" href="css/owl.carousel.css" />
            <link rel="stylesheet" href="css/owl.theme.default.css" />
            <link rel="stylesheet" href="css/owl.theme.green.css" />
            <script src="js/owl.carousel.js"></script>

            <div class="popular-products__header">
                <h2 class="popular-products__title">کالاهای پرطرفدار</h2>
            </div>
            <div class="popular-products__carousel">
                <div class="owl-carousel owl-theme">
                    <div class="item">
                        <div class="item__img">
                            <a href="#" title="">
                                <img src="image/carousel-products/01.jpg" alt="">
                            </a>
                        </div>
                        <div class="item__content">
                            <h2 class="item__title"><a href="#" title="">گوشی موبایل ال جی مدل Q6 دو سیم‌ کارت ظرفیت 32
                                    گیگابایت دو سیم‌ کارت ظرفیت 32 گیگابایت</a></h2>
                        </div>
                        <div class="item__footer flex-container flex-space-between flex-ai-center">
                            <span class="item__price-final">1,900,000 تومان</span>
                            <span class="item__price-no">2,000,000 تومان</span>
                            <span class="item__price-offer">15%</span>
                        </div>
                    </div>

                    <div class="item">
                        <div class="item__img">
                            <a href="#" title="">
                                <img src="image/carousel-products/01.jpg" alt="">
                            </a>
                        </div>
                        <div class="item__content">
                            <h2 class="item__title"><a href="#" title="">گوشی موبایل ال جی مدل Q6 دو سیم‌ کارت ظرفیت 32
                                    گیگابایت</a></h2>
                        </div>
                        <div class="item__footer flex-container flex-space-between flex-ai-center">
                            <span class="item__price-final">1,900,000 تومان</span>
                            <span class="item__price-no">2,000,000 تومان</span>
                            <span class="item__price-offer">15%</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item__img">
                            <a href="#" title="">
                                <img src="image/carousel-products/01.jpg" alt="">
                            </a>
                        </div>
                        <div class="item__content">
                            <h2 class="item__title"><a href="#" title="">گوشی موبایل ال جی مدل Q6 دو سیم‌ کارت ظرفیت 32
                                    گیگابایت</a></h2>
                        </div>
                        <div class="item__footer flex-container flex-space-between flex-ai-center">
                            <span class="item__price-final">1,900,000 تومان</span>
                            <span class="item__price-no">2,000,000 تومان</span>
                            <span class="item__price-offer">15%</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item__img">
                            <a href="#" title="">
                                <img src="image/carousel-products/01.jpg" alt="">
                            </a>
                        </div>
                        <div class="item__content">
                            <h2 class="item__title"><a href="#" title="">گوشی موبایل ال جی مدل Q6 دو سیم‌ کارت ظرفیت 32
                                    گیگابایت</a></h2>
                        </div>
                        <div class="item__footer flex-container flex-space-between flex-ai-center">
                            <span class="item__price-final">1,900,000 تومان</span>
                            <span class="item__price-no">2,000,000 تومان</span>
                            <span class="item__price-offer">15%</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item__img">
                            <a href="#" title="">
                                <img src="image/carousel-products/01.jpg" alt="">
                            </a>
                        </div>
                        <div class="item__content">
                            <h2 class="item__title"><a href="#" title="">گوشی موبایل ال جی مدل Q6 دو سیم‌ کارت ظرفیت 32
                                    گیگابایت</a></h2>
                        </div>
                        <div class="item__footer flex-container flex-space-between flex-ai-center">
                            <span class="item__price-final">1,900,000 تومان</span>
                            <span class="item__price-no">2,000,000 تومان</span>
                            <span class="item__price-offer">15%</span>
                        </div>
                    </div>

                </div>
            </div>
            <script>
                $('.owl-carousel').owlCarousel({
                    rtl: true,
                    loop: true,
                    margin: 10,
                    nav: true,
                    items: 4,

                    responsive: {
                        0: {
                            items: 1
                        },
                        600: {
                            items: 3
                        },
                        1000: {
                            items: 4
                        }
                    }
                })
            </script>
        </section>

CSS:

/*popular-products*/
.popular-products {}

.popular-products__header {
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
    background-color: #ff6a00;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.popular-products__title {
    color: #fff;
}

.popular-products__carousel {}

.item {    
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    text-align: center;
}

.item:hover {
    box-shadow: 0 1px 2px 3px #dcdcdc;
}

.item__content {

}

.item__title {
    font-size: 0.***;
    font-weight: 400;
}

.item__footer {
    font-size: 0.875em;    
}
.item__price-final {
    color: #ff6a00;
}
.item__price-no {
    font-size: 0.***;
    text-decoration: line-through;
}
.item__price-offer {
    padding: 0.2em 0.4em;
    color: red;
    border: 1px solid red;
    border-radius: 0.3em;
}

بهتر بود یه تصویر از خروجی می گرفتی تا بهتر مشخص بشی که دنبال چه کاری هستی و مشکل کجاست اما اون چیزی که من برداشت کردم درست کردنش فقط با یه ارتفاع دادن حل می شه. کافیه به کلاس item ات یه ارتفاع مشخص بدی مثلا 200 پیکسل
اینطوری همه اسلاید هات بلحاظ ارتفاع یکسان می شن.
اگر نمی خوای به کلاس item ارتفاع ثابت بدی، می تونی ارتفاعش رو 100 درصد در نظر بگیری که اگر یه item ارتفاعش بیشتر از 200 پیکسل شد، بقیه ایتم ها هم هم اندازه اون بشن.
محتوی هر اسلاید رو هم باید معیین کنی که همه یکسان باشند. مثلا کلاس item__img ات 100 پیکسل باشه و اون دوتای دیگه هم هر کدوم یه اندازه ای
در هر صورت فرقی نمی کنه. دقیقا همون کاری رو باید انجام بدی که در حالت عادی و بدون owl carousel انجام می دادی

از طرفی سعی کن هیچ موقع از این Selector استفاده نکنی:

$('.owl-carousel').owlCarousel

علتش هم اینه که کلاس owl-carousel یه کلاس اجباری برای این افزونه است و اگر شما بخوای یه اسلایدر دیگه داخل پروژه ات داشته باشی چون دوتا سلکتور رو هم یکسان قرار دادی، کانفیگ هاش به هم می خوره. یه ایدی یا یه کلاس اضافه بزار و از اون استفاده کن. مثلا

product-carousel

یا هر اسم دیگه

تصویر از صورت سئوالم:

@SeyedMH.Mosavi
ممنونم ازتون بابت پاسخگویی و دقت نظرتون.
1) عکس رو قرار دادم تا بهتر مشخص بشه منظورم.
2) وقتی ی عدد ثابت برای ارتفاع در نظر می گیرم، خطوط قیمت ها باهمدیگه همتراز نمی شند. چون می خواستم بخش میانی ِ یعنی <div class="itemcontent"> کِش بیاد، ولی با ارتفاع ثابت کِش اومدن رخ نمیده.
3) وقتی ارتفاع رو 100% قرار دادم هم به هدفم نرسیدم، روی یکدیگر تاثیری نمیذارن.
4) اینکه ارتفاع <div class="itemimg"> و <div class="itemfooter> ی مقدار ثابت باشه، شدنی هستش. ولی خود مسئله اصلی به بخش <div class="itemcontent"> مربوط میشه که اندازه هاش متغیره و تغییر میکنه.

نگاه کنید، چیزی که مدنظر منه، مشابهش رو میشه توی بخش مقالات راکت دید، اونجا هم عکس و تَه کارت اندازه ثابتی دارند اما بخش محتوا تغییر اندازه میده تا همگی همتراز شوند. عکس:

5) مشکلم در استفاده از این کتابخونه اینه که کدهای جی کوئری میان و ی سری نگهدارنده div ایجاد می کنند که من نمی دونم چجوری باید اونها رو عوض کنم تا به خواسته ام برسم.
6) باشه ممنونم، تعییر میدم انتخابگرم رو و ی اسم یکتا واسش میذارم.

تا الان مشکلم برطرف نشده

تو عکسی که تو ضمیمه کردی سه تا بخشه
بخش اول که تصویر داخلش قرار می گیره
بخش دوم عنوان محصول
بخش سوم قیمت و ...
خود این سه بخش هم داخل یه بخش دیگه است که border داره

اینکار راحت ترین روششه که اول شما یه ارتفاع ثابت برای اون بخشی که border داره در نظر می گیری. مثلا 500 پیکسل
بعد بخش بعدی می رسیم سراغ div ای که داخلش عکسه که اونهم یه رقمی مثلا 300 پیکسل در نظر می گیری
بخش بعدی می رسیم سراغ عنوان که شما حداکثرش رو در نظر می گیره که مثلا سه خط می خواد بشه و ارتفاع سه خط رو تست می کنی که مثلا شده 150 پیکسل
300 پیکسل برای عکس
150 پیکسل برای عنوان
و 50 پیکسل باقی مونده برای قیمت
فقط بر طبق طراحی شما نباید عنوان رو بهش ارتفاع بدی و بقیه بخش ها رو بهش ارتفاع بده

حالت دومش استفاده از felx هست:
ارتفاع اون بخشی که border داره رو مثلا 500 پیکسل در نظر می گیری
برای تصویر هم دوباره یه ارتفاع مشخص مثلا 300 پیکسل
دوتای باقی مونده که شامل عنوان و قیمت و ... است رو داخل یه div دیگه قرار می دی و اون div رو بهش یه اسمی می دی و ارتفاعش رو 200 پیکسل در نظر می گیری
حالا باید به این خصوصیات رو به div مورد نظر بدی:

display: flex;
flex-direction: column;
justify-content: space-between;

خصوصیت سوم رو می تونی تغییر بدی و هر جوری که دوست داشتی مقار دهی کنی

کل این توضیحاتی که دادم خدمت شما بازهم بر می گردیم به حرف اولم که هیچ فرقی نمی کنه که داری از owlCarousel استفاده می کنی یا نه. اگر این کد بیرون اسلایدر مورد نظر کار کنه پس داخش هم کار می کنه.
owlCarousel هم ساختار div های شما رو بهم نمی زنه بلکه خودش یه چنتا چیز بیرون این ساختار شما اضافه می کنه که بتونه اسلایدر رو نمایش بده.

@SeyedMH.Mosavi

ممنونم بابت پاسخگویی تون، متوجه روشی که ارائه کردین شدم و تونستم پیاده سازی کنمش. برای هر کدوم از کالاها، هر سه بخش، شامل ِ عکس، محتوا و قیمت رو اندازه دهی عمودی (ارتفاع) کردم و همه ی کالاها بدین طریق ارتفاع شون مساوی میشن.
در واقع با این روشی که فرمودین بدون استفاده از flexbox کالاها رو هم اندازه کردیم.

حالا می خواستم بگم که اینجا کارم راه افتاده و از همین استفاده می کنم. اما اون چیزی که مدنظرم هستش و شاید بعدا ً نیازم بشه، یعنی ایجاد حالت flexbox برای عناصر داخلی، همونطور که گفتم برام مقدور نیست و نمی دونم چجوری باید ایجادش کنم.
شاید من به خوبی توضیح ندادم، چون شما میگید فرقی نداره که owlCarousel باشه یا نباشه. اما به نظر میرسه که فرق داره؛ چون توی حالت عادی کدها بدین شکل می شدند:

<div class="owl-carousel owl-theme" id="popular-products__carousel">
                <div class="carousel-item"> ... </div>
                <div class="carousel-item"> ... </div>
                <div class="carousel-item"> ... </div>
                <div class="carousel-item"> ... </div>
                <div class="carousel-item"> ... </div>
</div>

عنصر popular-productscarousel بعنوان والد رو می شد به شکل display: flexbox کرد و عناصر carousel-item هم فرزندان اون می شدند، اونوقت هنگام اندازه دهی ها این عناصر ِ فرزند خودشون باهم هم اندازه می شدند.
ولی از اونجایی که کتابخانه ی owl.carousel.js باعث میشه ما بین ِ popular-productscarousel و carousel-itemها div های دیگری رو ایجاد می کنه، من نمی تونم اون حالت ِ flexbox رو بین ِ والد و فرزندان ایجاد کنم. اینجا همون جایی هستش که میخواستم این کتابخانه رو بصورتی شخصی سازی کنم و از خاصیت ِ flexbox بهره ببرم.

خوب مشخصه که نمی شه!
شما داری از یه ابزاری استفاده می کنی که داره تگ های شما رو تغییر می ده. از طرفی داره با عرض ثابت و inline ای که خودش به div ها می ده کار می کنه. شما بخوای اون رو flex کنی احتمال داره اصلا دیگه کار نکنه!
من سوالم اینه که چرا باید popular-products__carousel رو display اش رو flex کنی؟ چه اتفاقی قراره با این کار بیافته که الان نیفتاده؟!

@SeyedMH.Mosavi
من می خواستم popular-products__carousel به صورت flexbox باشه تا بعدش عناصر ِ carousel-item رو بتونم بصورت ارتفاع مساوی دربیارم، یعنی از سه بخش تشکیل شدش: 1 عکس، 2 عنوان، 3 قیمت؛ بیام 1 عکس و 3 قیمت رو اندازه ثابتی قرار بدم، سپس بخش 2 عنوان رو grow:1 مقداردهی کنم تا کِش بیاد و کل عنصر carousel-item بدین طریق با همدیگه مساوی بشن.
این طرز فکرم اشتباه بوده؟ یا توی این مورد اشتباهه؟ یا چی؟
(تصحیح کردم منظورم همون عنوان بود - آخه ممکنه این بخش هم شامل عنوان باشه و هم توصیف کوتاهی از کالا، البته الان فقط شامل عنوان هستش)

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

البته هیچ فرقی نمی کنه. باز با همون روش ارتفاع ثابت می تونی مشکلت رو حل کنی ولی اگر بخوای همه چیز رو با flex پیش ببری نمی شه!
بلاخره شما یه جایی یه ارتفاعی باید بدی دیگه. حالا یا به popular-products__carousel و یا به carousel-item
هر کاری کنی باید یه ارتفاع مشخص باشه. عناصر داخل هم همینطوره. شما اگر به عکست ارتفاع ندی و از سمت پنل ادمینت یه عکس کوچیکتر یا بزرگتر ارسال بشه که کل ساختارت بهم می ریزه
می مونه دوتا عنصر بعدی که تو سایت تو عنوان و قیمت هست و تو سایت راکت عنوان و توضیحات هست.
اون رو هم اگر دقت کنی من به دو روش بهت گفتم چی کار کنی. روش اول دادن ارتفاع و ... بدون استفاده از خصوصیات flex و روش دوم که کدش رو هم نوشتم با استفاده از خصوصیات flex هست. شما اگر می خوای حتما کارت رو با flex جلو ببری از روش دوم استفاده کن ببین کارت راه می افته یا نه
می تونی از خود سایت راکت هم نگاه کنی که چطوری پیاده سازیش کرده و ایده بگیری

@SeyedMH.Mosavi
ممنونم ازتون بابت وقتی که می ذارید و توضیح می دین.
(پیام قبلی رو تصحیح کردم)

پس به نظر شما امکان پذیر نیستش حالتی که مدنظرم بودش و به روش ارتفاع ثابت باید عمل کرد (این روش رو انجام دادم و همه چی درست پیش رفت).
من flexbox رو واسه همون اندازه دهی کالاها میخواستم به کار بگیرم، دیگه اینجا با ارتفاع ثابت نیازی بهش نداشتم، همون روش معمولی جوابگو بود و کارم رو راه انداخت.

در کل سپاس از شما و وقتی که گذاشتین، عناصرم ارتفاع یکسانی گرفتند و بعلاوه بیخیال این شدم که بتونم کتابخونه رو شخصی سازی کنم و از خاصیت ِ نمایش در حالت ِ flex بهره بگیرم.