جلسه ۵۹: تراز بندی خودکار margin در CSS

webسپتامبر 19, 2021

مراقب margin باشید: تراز بندی خودکار روی موارد فلکس. وقتی از margin: auto روی flex-items استفاده می کنید ، همه چیز خیلی عجیب به نظر می رسد. شما باید بفهمید چه خبر است. ممکن است به نتایج غیر منتظره منتهی شود ، اما من قصد دارم همه اینها را توضیح دهم. هنگامی که از در مورد فلکس margin:auto استفاده می کنید ، جهت (چپ ، راست یا هر دو) که دارای مقدار خودکار است ، فضای خالی موجود را اشغال می کند. گرفتن آن مشکل است. منظور من این است:

<ul>

<li>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

نوار پیمایش را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید:

ul {
    display: flex;
}
li {
    flex: 0 0 auto;
}

li:nth-child(1) {
    margin-left: auto; 
  margin-right: auto; 
}

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>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

اکنون فضا در هر دو طرف flex-item توزیع شده است. بنابراین ، آیا با تراز خوب auto-margin معامله ای انجام می شود؟ به نظر می رسد یکی وجود دارد. اگر شما هم توجه نکنید می تواند ناامید کننده باشد. هنگامی که از تراز بندی خودکار margin در مورد flex استفاده می کنید ، ویژگی justify-content دیگر در مورد flex کار نمی کند. واقعا کار نمی کند به عنوان مثال ، تنظیم یک گزینه تراز بندی متفاوت بر روی موارد flex در بالا از طریق ویژگی justify-content ، تاثیری در طرح ندارد.

li {

justify-content: flex-end;

}

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

li {
            justify-content: flex-end; /*no effect on layout */
            flex: 0 0 auto;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

li:nth-child(1) {
            margin: 8px auto;
        }

<!DOCTYPE html>

<html>

<head>

<title>Flexbox DB</title>

</head>

<body>

<ul>

<li>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

موارد استفاده عملی پیمایش ها بخش بزرگی از هر وب سایت یا برنامه ای هستند. تقریباً در هر وب سایتی روی این سیاره نوعی سیستم ناوبری در دسترس دارد. نگاهی به این سایت های محبوب و نحوه برخورد آنها با سیستم های ناوبری خود بیندازید. آیا می بینید که چگونه flexbox می تواند به شما کمک کند تا این طرح ها را با کارایی بیشتری ایجاد کنید؟ با نگاهی دقیق تر ببینید که از کجا ویژگی auto-margin نیز بسیار مفید است. ۱. Bootstrapped Navigation ۲.AirBnB desktop Navigation Twitter desktop Navigation ۳.

اگر احساس خوبی دارید ، توصیه می کنم در واقع کد بنویسید. خودتان سیستم های ناوبری را پیاده سازی کنید. شما اکنون دانش لازم را کسب کرده اید. کمی شجاعت برای شروع نوشتن تمام چیزی است که شما نیاز دارید. در درس بعدی می بینیم امیدوارم بعد از اتمام تمرینات سیستم ناوبری 🙂

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>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

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

اکنون از margin: auto در اولین مورد لیست (مارک تجاری) استفاده کنید و ببینید چه اتفاقی می افتد.

li:nth-child(1) {
    margin-right: auto; /*applied only to the right*/
}

li:nth-child(1) {
    margin-right: auto; /*applied only to the right*/
}

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>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

چه اتفاقی افتاده؟ فضای اضافی که وجود دارد اکنون در سمت راست اولین flex-item توزیع شده است.

آنچه قبلاً گفتم را به خاطر می آورید؟ هنگامی که در مورد فلکس از margin:auto استفاده می کنید ، جهت (چپ ، راست یا هر دو) که دارای مقدار خودکار است ، فضای خالی موجود را اشغال می کند. فقط با یک طرف ختم نمی شود. اگر یک تراز بندی خودکار margin در هر دو طرف یک مورد فلکس بخواهید ، چه می کنید؟

/*you may use the margin shorthand to set both sides of you wish*/
li:nth-child(1) {
    margin-left: auto;
    margin-right: auto
}

li:nth-child(1) {
    margin-left: auto; 
  margin-right: auto; 
}

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>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

li {

justify-content: flex-end;

}

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

li {
            justify-content: flex-end; /*no effect on layout */
            flex: 0 0 auto;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

li:nth-child(1) {
            margin: 8px auto;
        }

<!DOCTYPE html>

<html>

<head>

<title>Flexbox DB</title>

</head>

<body>

<ul>

<li>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

این چیزی است که ما دریافت کرده ایم:

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>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

اکنون از margin: auto در اولین مورد لیست (مارک تجاری) استفاده کنید و ببینید چه اتفاقی می افتد.

li:nth-child(1) {
    margin-right: auto; /*applied only to the right*/
}

li:nth-child(1) {
    margin-right: auto; /*applied only to the right*/
}

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>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

چه اتفاقی افتاده؟ فضای اضافی که وجود دارد اکنون در سمت راست اولین flex-item توزیع شده است.

/*you may use the margin shorthand to set both sides of you wish*/
li:nth-child(1) {
    margin-left: auto;
    margin-right: auto
}

li:nth-child(1) {
    margin-left: auto; 
  margin-right: auto; 
}

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>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

li {

justify-content: flex-end;

}

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

li {
            justify-content: flex-end; /*no effect on layout */
            flex: 0 0 auto;
          background-color: #8cacea;
            margin: 8px;
            color: #fff;
            padding: 4px;
        }

li:nth-child(1) {
            margin: 8px auto;
        }

<!DOCTYPE html>

<html>

<head>

<title>Flexbox DB</title>

</head>

<body>

<ul>

<li>Branding</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</body>

</html>

webسپتامبر 19, 2021

web

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

جلسه ۳۵: منطقه padding در CSS

جلسه ۶۹: قرار دادن محتوا در داخل Grid. در CSS

جلسه ۱۶: فرو رفتن در عناصر Semantics در html

جلسه ۲۱: انتخاب کنندگان CSS – دوباره! در CSS

دیدگاهتان را بنویسید لغو پاسخ