راکت
راکت
بازگشت به پرسش و پاسخ‌ها
حل شده

مشکل flexbox

7 پاسخ

سلام دوستان وقتی در فلکس باکس یک باکس کلی در نظر می گیری و 4 تا باکس درونش و برای باکس های درونش عرض 300 پیکسل می دی وقتی که کوچیکش می کنیم مروگر رو اون 300 پیکسل می شکنه و به باکس هاس درون باکس کلی تو هم جمع می شن اما اگر disply اش رو inline-block در نظر بگیری زیر هم در اون اندازه میفتن حالا من چطوری disply خودم رو flex در نظرم بگیرم که اگه از لندازه باکس جزئی کوچیکتر شد بیفته پایین کد خود را اینجا وارد کنید

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://roocket.ir/css/style.css">
</head>
<body>
<div class="continer">
    <div class="cont">
    <div class="items">items1</div>
    <div class="items">items2</div>
    <div class="items">items3</div>
    <div class="items">items4</div>

    </div>
</div>
</body>
</html>

و css

.continer{
    display: flex;
}
.cont{
    width: 100%;
    height: 500px;
    display: flex;
    background: linear-gradient(315deg, 2e2e2e 20%, blue 80%);
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
}
.items{
    width: 500px;
    height: 300px;
    background-color: fff;
    margin: 3px;

}

لطفا کمکم کنین مرسی

html_css
کوثر
کوثر
@kowsar
ثبت پرسش جدید

پاسخ‌ها

7
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

بهترین پاسخ

این رو بنویس، درست میشه:

.continer{
    display: flex;
    flex-wrap: wrap;
}
0
ارسال پاسخ
کوثر
کوثر
@kowsar

تخصص: برنامه نویس وب

لطفا کمک کنین

0
ارسال پاسخ
علیرضا تحریری
علیرضا تحریری
@alirezatahriri

تخصص: لاراول، لایوایر و Tailwind css

سلام @alizadevesal میخواهید صفحه وبتون واکنش گرا بشه؟

0
ارسال پاسخ

گفتگوهای مرتبط

شاید پاسخ شما همین‌جا باشد

مشکل گرید در بوت استرپ

6 پاسخ

مشکل در css

1 پاسخ

مشکل در css position

5 پاسخ

لطفا کمک کنید مسیر اموزشی

2 پاسخ
کوثر
کوثر
@kowsar

تخصص: برنامه نویس وب

درود
@alirezatahriri
بله اما می خوام از flexbox استفاده کنم به خاطر align-item و justfy-content

0
ارسال پاسخ
علیرضا تحریری
علیرضا تحریری
@alirezatahriri

تخصص: لاراول، لایوایر و Tailwind css

شما اگر میخواهید که در هر اندازه صفحه وبتون یک استایل خاص داشته باشه داخل فایل css از کد زیر استفاده کنید و برای اون اندازه از صفحه هم کدش رو بنویسید مثلا من گفتم در 900px رنگ سایت قرمز بشه.
کد Css:

        .continer{
            display: flex;
        }
        .cont{
            width: 100%;
            height: 500px;
            display: flex;
            background: linear-gradient(315deg, 2e2e2e 20%, blue 80%);
            justify-content: center;
            flex-direction: row-reverse;
            align-items: center;
        }
        .items{
            width: 500px;
            height: 300px;
            background-color: fff;
            margin: 3px;

        }
        @media screen and (max-width: 900px) {
            body{
                background-color: red;
            }
        }
0
ارسال پاسخ
کوثر
کوثر
@kowsar

تخصص: برنامه نویس وب

درود
@alirezatahriri
دوست عزیز فکر کنم منظورم رو متوجه نشدین می می گم وقتی که سایز اون باکس ها از 300 پیکسل کم شد عرضش کم نشه و بیفته زیر

0
ارسال پاسخ
علیرضا تحریری
علیرضا تحریری
@alirezatahriri

تخصص: لاراول، لایوایر و Tailwind css

سلام @alizadevesal الان فهمیدم کد رو درستش کردم:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .continer{
            display: flex;
        }
        .cont{
            width: 100%;
            height: 500px;
            display: flex;
            background: linear-gradient(315deg, 2e2e2e 20%, blue 80%);
            justify-content: center;
            flex-direction: row-reverse;
            align-items: center;
        }
        .items{
            width: 500px;
            height: 300px;
            background-color: fff;
            margin: 3px;

        }
        @media screen and (max-width: 300px) {
            .continer{
                display: flex;
            }
            .cont{
                width: 95%;
                height: 500px;
                display: grid;
                background: linear-gradient(315deg, 2e2e2e 20%, blue 80%);
                justify-content: center;
                flex-direction: row-reverse;
                align-items: center;
                margin: auto;
            }
            .items{
                width: 290px;
                height: 300px;
                background-color: fff;
                margin: 3px;
                display: grid;
                justify-content: center;
                align-items: center;
            }
        }
    </style>
</head>
<body>
<div class="continer">
    <div class="cont">
        <div class="items">items1</div>
        <div class="items">items2</div>
        <div class="items">items3</div>
        <div class="items">items4</div>

    </div>
</div>
</body>
</html>

از 300px کوچکتر اندازه فلکس باکس کم نمیشه و زیر هم قرار میگیرند.

1
ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام