cssطراحی سایت

جلسه ۶۰: با تغییر جهت فلکس چه اتفاقی می افتد؟ در CSS

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

خوب ، شما می توانید آن را نیز تغییر دهید. این دقیقاً همان اتفاقی است که هنگام استفاده از جهت فلکس رخ می دهد: ستون همانطور که در بخش قبلی توضیح داده شد (به یاد داشته باشید مقدار پیش فرضflex-direction: row) وقتی این کار را می کنید ، محور اصلی و عرضی تغییر می کند همانطور که در زیر دیده می شود:

اگر تاکنون متنی به زبان انگلیسی نوشته اید ، از قبل می دانید که زبان از چپ به راست و از بالا به پایین نوشته شده است. این همان مسیری است که برای محور اصلی و عرضی پیش فرض flexbox نیز در نظر گرفته شده است. با این حال ، با تغییر جهت فلکس به ستون ، دیگر از الگوی “زبان انگلیسی” بلکه از ژاپنی پیروی می کند. اوه بله ژاپنی! اگر متنی را به زبان ژاپنی نوشته اید ، این مورد آشنا خواهد بود. (برای سوابق ، من هرگز متن ژاپنی ننوشته ام). متن ژاپنی از بالا به پایین و راست به چپ نوشته می شود. درموردش یک لحظه فکر کن. خیلی عجیب نیست ، ها؟ این توضیح می دهد که چرا این می تواند برای نویسندگان انگلیسی کمی گیج کننده باشد.

بگذارید مثالی بزنم. لیست غیر مرتب استاندارد با ۳ مورد لیست ، به جز این بار من جهت انعطاف پذیر را تغییر می دهم.

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

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

li {
            flex-basis: 100px;
        
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

و تمام! ما موارد فلکس محور خود را داریم. می دانم ممکن است کمی گیج کننده شود. فقط یک بار دیگر آن را مرور کنید. هنگام مطالعه مدل flexbox ، متوجه شدم که بسیاری از کتابهای CSS از این قسمت صرف نظر کرده اند. کمی تفکر در ژاپنی کمک زیادی به شما می کند و باید بدانید که این خواص براساس flex-direction  در محل کار می کنند. من مطمئن هستم که شما دوباره چیز جدیدی یاد گرفتید و من از توضیح این موضوع لذت می برم امیدوارم شما هم اینو دوست داشته باشید 🙂

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

وای – چی؟ ارتفاع تحت تأثیر قرار می گیرد ، اما عرض نه؟ قبلاً گفتم که ویژگی flex-based عرض اولیه هر مورد flex را مشخص می کند. من اشتباه کردم – یا بهتر بگویم ، من به “انگلیسی” فکر می کردم. بیایید کمی به ژاپنی برویم. همیشه لازم نیست “عرض” باشد. پس از تغییر جهت فلکس ، لطفا توجه داشته باشید که هر خاصیتی که بر محور اصلی تأثیر بگذارد اکنون بر محور اصلی جدید تأثیر می گذارد. خاصیتی مانند flex-based که بر عرض آیتم های flex در امتداد محور اصلی تأثیر می گذارد اکنون بر روی ارتفاع و نه بر عرض تأثیر می گذارد. جهت تغییر کرده است! بنابراین حتی اگر از خاصیت flex-grow  استفاده کرده باشید ، روی ارتفاع نیز تأثیر می گذارد! اساساً ، هر خاصیت انعطاف پذیری که در محور افقی کار می کند (محور اصلی آن زمان) اکنون بر روی محور اصلی جدید عمل می کند – این فقط یک سوئیچ جهت است. بیایید یک مثال دیگر ببینیم. قول می دهم بعد از این درک بهتری پیدا کنید. عرض مواردی را که قبلاً بررسی کردیم کاهش دهید و آنها دیگر کل فضای را پر نمی کنند:

li {
    width: 200px;
}

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

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

پس بیایید به ژاپنی فکر کنیم. محور اصلی از بالا به پایین است ، شما نیازی به آن ندارید. محور عرضی از چپ به راست است. به نظر می رسد همان چیزی است که شما نیاز دارید. از این رو ، شما باید “__ موارد فلکس را از ابتدای محور عرضی به مرکز حرکت دهید”. خاصیت فلکس کانتینر دربه کار می آید؟ بله ، ویژگی align-items است. معاملات ویژگی align-items را با ترازبندی در محور عرضی به خاطر بسپارید. بنابراین برای انتقال موارد  به مرکز ، این کار را انجام می دهید:

li {
    align-items: center;
}
ul {
            display: flex;
        align-items: center;
        flex-direction: column;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 100px;
        
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

و تمام! ما موارد فلکس محور خود را داریم. می دانم ممکن است کمی گیج کننده شود. فقط یک بار دیگر آن را مرور کنید. هنگام مطالعه مدل flexbox ، متوجه شدم که بسیاری از کتابهای CSS از این قسمت صرف نظر کرده اند. کمی تفکر در ژاپنی کمک زیادی به شما می کند و باید بدانید که این خواص براساس flex-direction  در محل کار می کنند. من مطمئن هستم که شما دوباره چیز جدیدی یاد گرفتید و من از توضیح این موضوع لذت می برم امیدوارم شما هم اینو دوست داشته باشید 🙂

li {
    flex-basis: 100px;
}

… و این چیزی است که خواهیم داشت:

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

وای – چی؟ ارتفاع تحت تأثیر قرار می گیرد ، اما عرض نه؟ قبلاً گفتم که ویژگی flex-based عرض اولیه هر مورد flex را مشخص می کند. من اشتباه کردم – یا بهتر بگویم ، من به “انگلیسی” فکر می کردم. بیایید کمی به ژاپنی برویم. همیشه لازم نیست “عرض” باشد. پس از تغییر جهت فلکس ، لطفا توجه داشته باشید که هر خاصیتی که بر محور اصلی تأثیر بگذارد اکنون بر محور اصلی جدید تأثیر می گذارد. خاصیتی مانند flex-based که بر عرض آیتم های flex در امتداد محور اصلی تأثیر می گذارد اکنون بر روی ارتفاع و نه بر عرض تأثیر می گذارد. جهت تغییر کرده است! بنابراین حتی اگر از خاصیت flex-grow  استفاده کرده باشید ، روی ارتفاع نیز تأثیر می گذارد! اساساً ، هر خاصیت انعطاف پذیری که در محور افقی کار می کند (محور اصلی آن زمان) اکنون بر روی محور اصلی جدید عمل می کند – این فقط یک سوئیچ جهت است. بیایید یک مثال دیگر ببینیم. قول می دهم بعد از این درک بهتری پیدا کنید. عرض مواردی را که قبلاً بررسی کردیم کاهش دهید و آنها دیگر کل فضای را پر نمی کنند:

li {
    width: 200px;
}

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

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

پس بیایید به ژاپنی فکر کنیم. محور اصلی از بالا به پایین است ، شما نیازی به آن ندارید. محور عرضی از چپ به راست است. به نظر می رسد همان چیزی است که شما نیاز دارید. از این رو ، شما باید “__ موارد فلکس را از ابتدای محور عرضی به مرکز حرکت دهید”. خاصیت فلکس کانتینر دربه کار می آید؟ بله ، ویژگی align-items است. معاملات ویژگی align-items را با ترازبندی در محور عرضی به خاطر بسپارید. بنابراین برای انتقال موارد  به مرکز ، این کار را انجام می دهید:

li {
    align-items: center;
}
ul {
            display: flex;
        align-items: center;
        flex-direction: column;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 100px;
        
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

و تمام! ما موارد فلکس محور خود را داریم. می دانم ممکن است کمی گیج کننده شود. فقط یک بار دیگر آن را مرور کنید. هنگام مطالعه مدل flexbox ، متوجه شدم که بسیاری از کتابهای CSS از این قسمت صرف نظر کرده اند. کمی تفکر در ژاپنی کمک زیادی به شما می کند و باید بدانید که این خواص براساس flex-direction  در محل کار می کنند. من مطمئن هستم که شما دوباره چیز جدیدی یاد گرفتید و من از توضیح این موضوع لذت می برم امیدوارم شما هم اینو دوست داشته باشید 🙂

ul {
            display: flex;
        flex-direction: column;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }
li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

پس چه اتفاقی افتاد؟ اکنون “متن” به سبک ژاپنی – از بالا به پایین (محور اصلی) نوشته شده است. چیزی است که برای شما ممکن است خنده دار باشد ، من دوست دارم به آن اشاره کنم. می بینید عرض آیتم ها فضا را پر می کنند ، درست است؟ اگر بخواهید قبل از این تغییر دهید ، فقط با ویژگی های flex-based و (یا) flex-grow مقابله می کنید. بیایید ببینیم که چگونه آنها بر طرح جدید ما تأثیر می گذارند.

li {
    flex-basis: 100px;
}

… و این چیزی است که خواهیم داشت:

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

وای – چی؟ ارتفاع تحت تأثیر قرار می گیرد ، اما عرض نه؟ قبلاً گفتم که ویژگی flex-based عرض اولیه هر مورد flex را مشخص می کند. من اشتباه کردم – یا بهتر بگویم ، من به “انگلیسی” فکر می کردم. بیایید کمی به ژاپنی برویم. همیشه لازم نیست “عرض” باشد. پس از تغییر جهت فلکس ، لطفا توجه داشته باشید که هر خاصیتی که بر محور اصلی تأثیر بگذارد اکنون بر محور اصلی جدید تأثیر می گذارد. خاصیتی مانند flex-based که بر عرض آیتم های flex در امتداد محور اصلی تأثیر می گذارد اکنون بر روی ارتفاع و نه بر عرض تأثیر می گذارد. جهت تغییر کرده است! بنابراین حتی اگر از خاصیت flex-grow  استفاده کرده باشید ، روی ارتفاع نیز تأثیر می گذارد! اساساً ، هر خاصیت انعطاف پذیری که در محور افقی کار می کند (محور اصلی آن زمان) اکنون بر روی محور اصلی جدید عمل می کند – این فقط یک سوئیچ جهت است. بیایید یک مثال دیگر ببینیم. قول می دهم بعد از این درک بهتری پیدا کنید. عرض مواردی را که قبلاً بررسی کردیم کاهش دهید و آنها دیگر کل فضای را پر نمی کنند:

li {
    width: 200px;
}

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

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

پس بیایید به ژاپنی فکر کنیم. محور اصلی از بالا به پایین است ، شما نیازی به آن ندارید. محور عرضی از چپ به راست است. به نظر می رسد همان چیزی است که شما نیاز دارید. از این رو ، شما باید “__ موارد فلکس را از ابتدای محور عرضی به مرکز حرکت دهید”. خاصیت فلکس کانتینر دربه کار می آید؟ بله ، ویژگی align-items است. معاملات ویژگی align-items را با ترازبندی در محور عرضی به خاطر بسپارید. بنابراین برای انتقال موارد  به مرکز ، این کار را انجام می دهید:

li {
    align-items: center;
}
ul {
            display: flex;
        align-items: center;
        flex-direction: column;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 100px;
        
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

و تمام! ما موارد فلکس محور خود را داریم. می دانم ممکن است کمی گیج کننده شود. فقط یک بار دیگر آن را مرور کنید. هنگام مطالعه مدل flexbox ، متوجه شدم که بسیاری از کتابهای CSS از این قسمت صرف نظر کرده اند. کمی تفکر در ژاپنی کمک زیادی به شما می کند و باید بدانید که این خواص براساس flex-direction  در محل کار می کنند. من مطمئن هستم که شما دوباره چیز جدیدی یاد گرفتید و من از توضیح این موضوع لذت می برم امیدوارم شما هم اینو دوست داشته باشید 🙂

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

li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

وبعد از آن:

ul {
            display: flex;
        flex-direction: column;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }
li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

پس چه اتفاقی افتاد؟ اکنون “متن” به سبک ژاپنی – از بالا به پایین (محور اصلی) نوشته شده است. چیزی است که برای شما ممکن است خنده دار باشد ، من دوست دارم به آن اشاره کنم. می بینید عرض آیتم ها فضا را پر می کنند ، درست است؟ اگر بخواهید قبل از این تغییر دهید ، فقط با ویژگی های flex-based و (یا) flex-grow مقابله می کنید. بیایید ببینیم که چگونه آنها بر طرح جدید ما تأثیر می گذارند.

li {
    flex-basis: 100px;
}

… و این چیزی است که خواهیم داشت:

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

وای – چی؟ ارتفاع تحت تأثیر قرار می گیرد ، اما عرض نه؟ قبلاً گفتم که ویژگی flex-based عرض اولیه هر مورد flex را مشخص می کند. من اشتباه کردم – یا بهتر بگویم ، من به “انگلیسی” فکر می کردم. بیایید کمی به ژاپنی برویم. همیشه لازم نیست “عرض” باشد. پس از تغییر جهت فلکس ، لطفا توجه داشته باشید که هر خاصیتی که بر محور اصلی تأثیر بگذارد اکنون بر محور اصلی جدید تأثیر می گذارد. خاصیتی مانند flex-based که بر عرض آیتم های flex در امتداد محور اصلی تأثیر می گذارد اکنون بر روی ارتفاع و نه بر عرض تأثیر می گذارد. جهت تغییر کرده است! بنابراین حتی اگر از خاصیت flex-grow  استفاده کرده باشید ، روی ارتفاع نیز تأثیر می گذارد! اساساً ، هر خاصیت انعطاف پذیری که در محور افقی کار می کند (محور اصلی آن زمان) اکنون بر روی محور اصلی جدید عمل می کند – این فقط یک سوئیچ جهت است. بیایید یک مثال دیگر ببینیم. قول می دهم بعد از این درک بهتری پیدا کنید. عرض مواردی را که قبلاً بررسی کردیم کاهش دهید و آنها دیگر کل فضای را پر نمی کنند:

li {
    width: 200px;
}

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

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

پس بیایید به ژاپنی فکر کنیم. محور اصلی از بالا به پایین است ، شما نیازی به آن ندارید. محور عرضی از چپ به راست است. به نظر می رسد همان چیزی است که شما نیاز دارید. از این رو ، شما باید “__ موارد فلکس را از ابتدای محور عرضی به مرکز حرکت دهید”. خاصیت فلکس کانتینر دربه کار می آید؟ بله ، ویژگی align-items است. معاملات ویژگی align-items را با ترازبندی در محور عرضی به خاطر بسپارید. بنابراین برای انتقال موارد  به مرکز ، این کار را انجام می دهید:

li {
    align-items: center;
}
ul {
            display: flex;
        align-items: center;
        flex-direction: column;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 100px;
        
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

و تمام! ما موارد فلکس محور خود را داریم. می دانم ممکن است کمی گیج کننده شود. فقط یک بار دیگر آن را مرور کنید. هنگام مطالعه مدل flexbox ، متوجه شدم که بسیاری از کتابهای CSS از این قسمت صرف نظر کرده اند. کمی تفکر در ژاپنی کمک زیادی به شما می کند و باید بدانید که این خواص براساس flex-direction  در محل کار می کنند. من مطمئن هستم که شما دوباره چیز جدیدی یاد گرفتید و من از توضیح این موضوع لذت می برم امیدوارم شما هم اینو دوست داشته باشید 🙂

این نگاه قبل از تغییر جهت است:

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

li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

وبعد از آن:

ul {
            display: flex;
        flex-direction: column;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }
li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

پس چه اتفاقی افتاد؟ اکنون “متن” به سبک ژاپنی – از بالا به پایین (محور اصلی) نوشته شده است. چیزی است که برای شما ممکن است خنده دار باشد ، من دوست دارم به آن اشاره کنم. می بینید عرض آیتم ها فضا را پر می کنند ، درست است؟ اگر بخواهید قبل از این تغییر دهید ، فقط با ویژگی های flex-based و (یا) flex-grow مقابله می کنید. بیایید ببینیم که چگونه آنها بر طرح جدید ما تأثیر می گذارند.

li {
    flex-basis: 100px;
}

… و این چیزی است که خواهیم داشت:

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

وای – چی؟ ارتفاع تحت تأثیر قرار می گیرد ، اما عرض نه؟ قبلاً گفتم که ویژگی flex-based عرض اولیه هر مورد flex را مشخص می کند. من اشتباه کردم – یا بهتر بگویم ، من به “انگلیسی” فکر می کردم. بیایید کمی به ژاپنی برویم. همیشه لازم نیست “عرض” باشد. پس از تغییر جهت فلکس ، لطفا توجه داشته باشید که هر خاصیتی که بر محور اصلی تأثیر بگذارد اکنون بر محور اصلی جدید تأثیر می گذارد. خاصیتی مانند flex-based که بر عرض آیتم های flex در امتداد محور اصلی تأثیر می گذارد اکنون بر روی ارتفاع و نه بر عرض تأثیر می گذارد. جهت تغییر کرده است! بنابراین حتی اگر از خاصیت flex-grow  استفاده کرده باشید ، روی ارتفاع نیز تأثیر می گذارد! اساساً ، هر خاصیت انعطاف پذیری که در محور افقی کار می کند (محور اصلی آن زمان) اکنون بر روی محور اصلی جدید عمل می کند – این فقط یک سوئیچ جهت است. بیایید یک مثال دیگر ببینیم. قول می دهم بعد از این درک بهتری پیدا کنید. عرض مواردی را که قبلاً بررسی کردیم کاهش دهید و آنها دیگر کل فضای را پر نمی کنند:

li {
    width: 200px;
}

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

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

li {
            flex: 0 0 auto;
        flex-basis: 100px;
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

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

پس بیایید به ژاپنی فکر کنیم. محور اصلی از بالا به پایین است ، شما نیازی به آن ندارید. محور عرضی از چپ به راست است. به نظر می رسد همان چیزی است که شما نیاز دارید. از این رو ، شما باید “__ موارد فلکس را از ابتدای محور عرضی به مرکز حرکت دهید”. خاصیت فلکس کانتینر دربه کار می آید؟ بله ، ویژگی align-items است. معاملات ویژگی align-items را با ترازبندی در محور عرضی به خاطر بسپارید. بنابراین برای انتقال موارد  به مرکز ، این کار را انجام می دهید:

li {
    align-items: center;
}
ul {
            display: flex;
        align-items: center;
        flex-direction: column;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 100px;
        
        width: 200px;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>List One</li>

    <li>List Two</li>

    <li>List Three</li>

</ul>

</body>

</html>

و تمام! ما موارد فلکس محور خود را داریم. می دانم ممکن است کمی گیج کننده شود. فقط یک بار دیگر آن را مرور کنید. هنگام مطالعه مدل flexbox ، متوجه شدم که بسیاری از کتابهای CSS از این قسمت صرف نظر کرده اند. کمی تفکر در ژاپنی کمک زیادی به شما می کند و باید بدانید که این خواص براساس flex-direction  در محل کار می کنند. من مطمئن هستم که شما دوباره چیز جدیدی یاد گرفتید و من از توضیح این موضوع لذت می برم امیدوارم شما هم اینو دوست داشته باشید 🙂

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

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

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

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