cssطراحی سایت

جلسه ۵۸: نگاهی دقیق به flex-item ها مطلق و نسبی در CSS

این شاید کوتاهترین مقاله در این دوره تعاملی باشد. با این حال ، مهم است. به یاد داشته باشید هدف از این دوره “درک” واقعی عملکردهای داخلی مدل Flexbox است. با پوشش برخی زمینه ها در بخشهای قبلی ، مهم است که در اینجا نیز چند مفهوم مهم روشن شود. در واقع تفاوت بین مطلبی مطلق و نسبی چیست؟ تفاوت عمده این دو مربوط به فاصله و نحوه محاسبه آنها است. فاصله یک مورد فلکس نسبی بر اساس اندازه محتوای آن محاسبه می شود. در یک مورد مطلق فلکس ، صرفاً براساس “فلکس” است نه محتوا.

مثال روش دیگری برای آموزش نیست ، این تنها راه آموزش است.

-آلبرت انیشتین

در اینجا یک مثال خوب وجود دارد.

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

    Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

ul {
    display: flex; /*flexbox activated*/
}

li {
    flex: auto; /*remember this is same as flex: 1 1 auto;*/
    border: 2px solid red;
    margin: 2em;
}
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: auto; /*remember this is same as flex: 1 1 auto;*/
            border: 2px solid red;
            margin: 1em;
      background-color: #8cacea;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Understanding Flexbox- Abs and Rel Flex-items</title>

</head>

<body>

</body>

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

        Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

</html>

موارد فلکس در مثال بالا موارد فلکس نسبی هستند. بگذارید موارد flex را مطلق کنیم – به این معنی که این بار عرض آنها باید بر اساس اندازه محتوای "flex" نباشد. یک one-liner" جادو می کند.

li {

    flex: ۱ ; /*same as flex: ۱ ۱ ۰٫ see flex: ‘positive number’*/

}

نتیجه این است:

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 1; /*same as flex: 1 1 0. see flex: 'positive number'*/
            border: 2px solid red;
            margin: 1em;
      background-color: #8cacea;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Understanding Flexbox- Abs and Rel Flex-items</title>

</head>

<body>

</body>

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

        Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

</html>

آیا می بینید که هر دو مورد فلکس این بار عرض یکسانی دارند؟ عرض اولیه آیتم های فلکس بر اساسflex-basis: 0 است ، و سپس آنها “رشد می کنند” تا متناسب با فضای موجود باشند. وقتی دو یا چند مورد flex با مقادیر flex-based صفر وجود داشته باشد ، آنها فاصله موجود را بر اساس مقادیر flex-رشد به اشتراک می گذارند. من قبلا در مورد این صحبت کردم اکنون عرض ها بر اساس اندازه محتوا محاسبه نمی شوند. عرض ها بر اساس مقدار انعطاف پذیر مشخص شده است. بنابراین شما آن را دریافت کردید. درست؟ موارد منعطف مطلق عرض آنها فقط بر اساس فلکس است ، در حالی که اقلام فلکس نسبی عرض آنها براساس اندازه محتوا است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }
li {
            flex: auto; /*remember this is same as flex: 1 1 auto;*/
            border: 2px solid red;
            margin: 1em;
      background-color: #8cacea;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Understanding Flexbox- Abs and Rel Flex-items</title>

</head>

<body>

</body>

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

        Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

</html>

اگر قبلاً فراموش کرده اید ، flex: 1 1 auto همان تنظیم است: flex-grow: 1 flex-shrink: 1 و flex-based: auto با استفاده از چارچوبی که قبلاً ایجاد کردم ، عرض اولیه موارد فلکس به طور خودکار محاسبه می شود: بر اساس flex-basis: auto ، و سپس آنها “رشد می کنند” تا متناسب با فضای موجود باشند: flex-grow: 1. وقتی عرضهای آیتمهای flex به طور خودکار محاسبه می شوند ، flex-based: auto ، براساس اندازه محتوای موجود در موارد فلکس است. موارد فلکس موجود در مثال بالا دارای محتوای یکسانی نیستند. از این رو ، اندازه آیتم های فلکس نابرابر خواهد بود. از آنجا که عرض های فردی در وهله اول مساوی نبودند (بر اساس محتوا بود) ، هنگام رشد موارد ، عرض نیز نابرابر می ماند.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: auto; /*remember this is same as flex: 1 1 auto;*/
            border: 2px solid red;
            margin: 1em;
      background-color: #8cacea;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Understanding Flexbox- Abs and Rel Flex-items</title>

</head>

<body>

</body>

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

        Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

</html>

موارد فلکس در مثال بالا موارد فلکس نسبی هستند. بگذارید موارد flex را مطلق کنیم – به این معنی که این بار عرض آنها باید بر اساس اندازه محتوای "flex" نباشد. یک one-liner" جادو می کند.

li {

    flex: ۱ ; /*same as flex: ۱ ۱ ۰٫ see flex: ‘positive number’*/

}

نتیجه این است:

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 1; /*same as flex: 1 1 0. see flex: 'positive number'*/
            border: 2px solid red;
            margin: 1em;
      background-color: #8cacea;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Understanding Flexbox- Abs and Rel Flex-items</title>

</head>

<body>

</body>

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

        Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

</html>

آیا می بینید که هر دو مورد فلکس این بار عرض یکسانی دارند؟ عرض اولیه آیتم های فلکس بر اساسflex-basis: 0 است ، و سپس آنها “رشد می کنند” تا متناسب با فضای موجود باشند. وقتی دو یا چند مورد flex با مقادیر flex-based صفر وجود داشته باشد ، آنها فاصله موجود را بر اساس مقادیر flex-رشد به اشتراک می گذارند. من قبلا در مورد این صحبت کردم اکنون عرض ها بر اساس اندازه محتوا محاسبه نمی شوند. عرض ها بر اساس مقدار انعطاف پذیر مشخص شده است. بنابراین شما آن را دریافت کردید. درست؟ موارد منعطف مطلق عرض آنها فقط بر اساس فلکس است ، در حالی که اقلام فلکس نسبی عرض آنها براساس اندازه محتوا است.

نشانه گذاری زیر را در نظر بگیرید. نتیجه این است:

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }
li {
            flex: auto; /*remember this is same as flex: 1 1 auto;*/
            border: 2px solid red;
            margin: 1em;
      background-color: #8cacea;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Understanding Flexbox- Abs and Rel Flex-items</title>

</head>

<body>

</body>

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

        Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

</html>

اگر قبلاً فراموش کرده اید ، flex: 1 1 auto همان تنظیم است: flex-grow: 1 flex-shrink: 1 و flex-based: auto با استفاده از چارچوبی که قبلاً ایجاد کردم ، عرض اولیه موارد فلکس به طور خودکار محاسبه می شود: بر اساس flex-basis: auto ، و سپس آنها “رشد می کنند” تا متناسب با فضای موجود باشند: flex-grow: 1. وقتی عرضهای آیتمهای flex به طور خودکار محاسبه می شوند ، flex-based: auto ، براساس اندازه محتوای موجود در موارد فلکس است. موارد فلکس موجود در مثال بالا دارای محتوای یکسانی نیستند. از این رو ، اندازه آیتم های فلکس نابرابر خواهد بود. از آنجا که عرض های فردی در وهله اول مساوی نبودند (بر اساس محتوا بود) ، هنگام رشد موارد ، عرض نیز نابرابر می ماند.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: auto; /*remember this is same as flex: 1 1 auto;*/
            border: 2px solid red;
            margin: 1em;
      background-color: #8cacea;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Understanding Flexbox- Abs and Rel Flex-items</title>

</head>

<body>

</body>

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

        Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

</html>

موارد فلکس در مثال بالا موارد فلکس نسبی هستند. بگذارید موارد flex را مطلق کنیم – به این معنی که این بار عرض آنها باید بر اساس اندازه محتوای "flex" نباشد. یک one-liner" جادو می کند.

li {

    flex: ۱ ; /*same as flex: ۱ ۱ ۰٫ see flex: ‘positive number’*/

}

نتیجه این است:

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 1; /*same as flex: 1 1 0. see flex: 'positive number'*/
            border: 2px solid red;
            margin: 1em;
      background-color: #8cacea;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Understanding Flexbox- Abs and Rel Flex-items</title>

</head>

<body>

</body>

<ul>

    <li>

        This is just some random text  to buttress the point been explained.

        Some more random text to buttress the point being explained.

    </li>

    <li>This is just a shorter random text.</li>

</ul>

</html>

آیا می بینید که هر دو مورد فلکس این بار عرض یکسانی دارند؟ عرض اولیه آیتم های فلکس بر اساسflex-basis: 0 است ، و سپس آنها “رشد می کنند” تا متناسب با فضای موجود باشند. وقتی دو یا چند مورد flex با مقادیر flex-based صفر وجود داشته باشد ، آنها فاصله موجود را بر اساس مقادیر flex-رشد به اشتراک می گذارند. من قبلا در مورد این صحبت کردم اکنون عرض ها بر اساس اندازه محتوا محاسبه نمی شوند. عرض ها بر اساس مقدار انعطاف پذیر مشخص شده است. بنابراین شما آن را دریافت کردید. درست؟ موارد منعطف مطلق عرض آنها فقط بر اساس فلکس است ، در حالی که اقلام فلکس نسبی عرض آنها براساس اندازه محتوا است.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا