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

مراقب margin
باشید: تراز بندی خودکار روی موارد فلکس. وقتی از margin: auto
روی flex-items
استفاده می کنید ، همه چیز خیلی عجیب به نظر می رسد. شما باید بفهمید چه خبر است. ممکن است به نتایج غیر منتظره منتهی شود ، اما من قصد دارم همه اینها را توضیح دهم. هنگامی که از در مورد فلکس margin:auto
استفاده می کنید ، جهت (چپ ، راست یا هر دو) که دارای مقدار خودکار است ، فضای خالی موجود را اشغال می کند. گرفتن آن مشکل است. منظور من این است:
<ul>
<li>Branding</li>
<li>Home</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>Home</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>Home</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>Home</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>Home</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>Home</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>Home</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>Home</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>Home</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>Home</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>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
موارد استفاده عملی پیمایش ها بخش بزرگی از هر وب سایت یا برنامه ای هستند. تقریباً در هر وب سایتی روی این سیاره نوعی سیستم ناوبری در دسترس دارد. نگاهی به این سایت های محبوب و نحوه برخورد آنها با سیستم های ناوبری خود بیندازید. آیا می بینید که چگونه flexbox
می تواند به شما کمک کند تا این طرح ها را با کارایی بیشتری ایجاد کنید؟ با نگاهی دقیق تر ببینید که از کجا ویژگی auto-margin
نیز بسیار مفید است. ۱. Bootstrapped Navigation
۲.AirBnB desktop Navigation
Twitter desktop Navigation
۳.
اگر احساس خوبی دارید ، توصیه می کنم در واقع کد بنویسید. خودتان سیستم های ناوبری را پیاده سازی کنید. شما اکنون دانش لازم را کسب کرده اید. کمی شجاعت برای شروع نوشتن تمام چیزی است که شما نیاز دارید. در درس بعدی می بینیم امیدوارم بعد از اتمام تمرینات سیستم ناوبری 🙂