جلسه ۵۶: خصوصیات کانتینر Flex در CSS
در درس قبلی ، برخی اصول اساسی را پایه گذاری کردم. مخازن و موارد فلکس چیست و نحوه شروع مدل Flexbox چیست. اکنون زمان مناسبی است تا بتوانید از همه این موارد به خوبی استفاده کنید. با تنظیم یک عنصر اصلی به عنوان یک ظرف فلکس ، دو ویژگی از هم ترازی در دسترس قرار می گیرد تا در ظرف فلکس استفاده شود. درست مانند این که ویژگی عرض را روی یک عنصر بلوک به عنوان عرض تعریف کنید: ۲۰۰px . شش ویژگی مختلف وجود دارد که ظرف فلکس می تواند بدست آورد. خبر خوب این است که تعریف این ویژگی ها نیازی به رویکردی متفاوت از آنچه قبلاً عادت کرده اید ندارد.
۱٫ جهت فلکس
خاصیت Flex-direction جهتی را که آیتم های فلکس در امتداد محور اصلی قرار می گیرند کنترل می کند. ممکن است از هر چهار مقدار استفاده کند
/*where ul represents a flex container*/
ul {
flex-direction: row || column || row-reverse || column-reverse;
}
در اصطلاح غیر رسمی ، ویژگی جهت فلکس به شما اجازه می دهد تا تصمیم بگیرید که چگونه موارد فلکس چیده شود. به صورت افقی ، عمودی یا معکوس در هر دو جهت. از نظر فنی ، “افقی” و “عمودی” همان چیزی نیست که جهات در “جهان فلکس” خوانده می شوند. اینها به عنوان محور اصلی و محور عرضی توصیف می شوند. پیش فرض ها در زیر نشان داده شده است. از نظر عامیانه ، جهت پیش فرض محور اصلی “افقی” است. از چپ به راست. محور عرضی مانند “عمودی” معنی می شود. از بالا تا پایین.
به طور پیش فرض ، ویژگی جهت فلکس بر روی سطر تنظیم می شود و آن (ها) را در امتداد محور اصلی تراز می کند. این توضیح می دهد که چه اتفاقی با لیست نامرتب در ابتدای این مقال افتاده. حتی اگر مشخصه جهت فلکس مشخص نشده باشد ، مقدار پیش فرض سطر را به خود اختصاص داده است. سپس موارد انعطاف پذیر در محور اصلی قرار گرفتند و از چپ به راست به صورت افقی قرار خواهند گرفتند
اگر ویژگی جهت فلکس به ستون تغییر کند ، موارد فلکس در امتداد محور عرضی تراز می شوند. آنها از بالا به پایین پشته می شوند ، دیگر نه از چپ به راست.
۲٫ Flex-wrap
خاصیت flex wrap می تواند هر یک ازاین سه مقدار را به خود اختصاص دهد:
//where ul represents a flex container
ul {
flex-wrap: wrap || no-wrap || wrap-reverse;
}
من با خواندن مثالی در مورد نحوه عملکرد خاصیت flex-wrap توضیح خواهم داد. موارد بیشتری را در لیست مرتب نشده قرار دهید. شما چی فکر میکنید؟ آیا ظرف فلکس تغییر اندازه بیشتری می دهد تا بیشتر جا بگیرد یا موارد لیست را به خط دیگری انتقال می دهد؟
/*adding ۳ more li elements*/
<ul> <!–parent element–>
<li></li> <!–first child element–>
<li></li> <!–second child element–>
<li></li> <!–third child element–>
<li></li>
<li></li>
<li></li>
</ul>
خوشبختانه ، ظرف فلکس متناسب با موارد فلکس جدید سازگار می شود
ul {
display: flex; /*or inline-flex*/
list-style: none;
}
li {
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
}
<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
(iii) Center مرکز دقیقاً همان کاری را که انتظار دارید انجام می دهد. موارد منعطف را در امتداد محور اصلی قرار می دهد.
ul {
justify-content: center;
}
ul {
display: flex;
justify-content: center;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}
HTML: <html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
(iv) Space-between Space-between فاصله یکسان بین هر مورد فلکس را حفظ می کند.
ul {
justify-content: space-between;
}
ul {
display: flex;
justify-content: space-between;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}
<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
هوم ، آیا اینجا چیز متفاوتی مشاهده کردید؟ نگاهی به تصویر توصیفی زیر بیندازید.
(v) Space-around سرانجام ،Space-around همان فاصله را در اطراف موارد فلکس حفظ می کند.
ul {
justify-content: space-around;
}
ul {
display: flex;
justify-content: space-around;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
نگاه دوم ضرری ندارد:
اگر به نظر می رسد این موارد برای آموحتن بیش از حد زیاد است نگران نباشید. با کمی تمرین با syntax ها بسیار راحت تر خواهد شد. حتماً بفهمید که چگونه آنها بر نمایش موارد فلکس در محور اصلی تأثیر می گذارند.
۵٫ Align-items
خاصیت align-items تا حدودی به ویژگی justify-content شبیه است. با درک ویژگی justify-content ، آسان تر است که این کار را انجام دهید. Align-items را می توان روی هر یک از این مقادیر تنظیم کرد:flex-start || flex-end || center || stretch || baseline
/*ul represents any flex container*/
ul {
align-items: flex-start || flex-end || center || stretch || baseline
}
این نحوه چیدمان آیتم های flex را بر روی محور عرضی تعریف می کند. این تفاوت بین ویژگی align-items و justify-content است. در زیر نحوه تأثیر مقادیر مختلف بر روی موارد flex آورده شده است. جهت تحت تأثیر این خصوصیات را فراموش نکنید. محور عرضی.
(i) Stretch
مقدار پیش فرض stretch است. با این کار ، عناصر فلکس “کشیده” می شوند تا تمام ارتفاع ظرف فلکس را پر کنند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: stretch;
height: 100%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
(ii) Flex-start
flex-start آنچه را که انتظار دارید انجام می دهد. این آیتم های انعطاف پذیر را در ابتدای محور عرضی گروه بندی می کند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-start;
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
(iii) Flex-end
همانطور که انتظار می رود ، فلکس انتهای موارد فلکس را تا انتهای محور عرضی گروه بندی می کند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-end;
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
(iv) Center
مقدار مرکز به همان اندازه قابل پیش بینی است. موارد فلکس را به مرکز ظرف فلکس تراز می کند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: center;
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
(v) Baseline
و مقدار پایه؟ موارد انعطاف پذیر را در امتداد خطوط اصلی آنها تراز می کند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: baseline;
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
Baseline" واقعاً فانتزی به نظر می رسد. به نظر می رسد که این نتیجه دقیقاً مانند flex-start به است اما کاملاً متفاوت است. هک "baseline" چیست؟ تصویر زیر باید کمک کند.
توجه کنید که چگونه همه موارد فلکس تراز شده اند تا صندلی محتوای آنها در baseline باشد؟
۶٫ Align-content
هنگام بحث در مورد ویژگی wrap ، آیا به خاطر دارید که چه چیزهایی رخ داد که موارد فلکس بیشتری را به ظرف فلکس اضافه کردید؟ شما یک ظرف فلکس چند خطی دارید. خاصیت align-content در کانتینرهای چند خطه استفاده می شود. مقادیر مشابه موارد align را جدا ازbaseline می گیرد. طبق تعریف ، چیدمان آیتم های flex را در یک ظرف فلکس چند خطی کنترل می کند. درست مانند موارد align ، مقدار پیش فرض نیز کشیده است اینها مقادیری هستند که اکنون باید با آنها آشنا شوید. بنابراین ، در اینجا نحوه تأثیر آنها بر یک ظرف فلکس چند خطی با ۱۰ مورد فلکس وجود دارد.
(i) Stretch
با stretch ، موارد انعطاف پذیر “کشیده” می شوند تا فضای موجود در امتداد محور عرضی متناسب باشد. فاصله ای که بین موارد فلکس زیر مشاهده می کنید به دلیل حاشیه تعیین شده روی موارد است.
Flex-start (ii)
قبلاً مقدار flex-start را دیده اید. این بار موارد موجود در محفظه چند خطی را با شروع محور عرضی تراز می کند. بخاطر داشته باشید محور عرضی پیش فرض از بالا به پایین است. بنابراین ، موارد فلکس با بالای ظرف فلکس تراز می شوند.
(iii) Flex-end
مقدار flex-end موارد فلکس را به انتهای محور عرضی تراز می کند.
(iv) Center
همانطور که حدس زده اید ، مرکز موارد منعطف را با مرکز محور عرضی تراز می کند.
این آخرین ویژگی flex-container بود. اکنون می فهمید که چگونه از خواص مختلف flex-container استفاده کنید. از این موارد برای کار در بخشهای عملی دروس بعدی استفاده خواهید کرد.
<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li></li> <!–first child element–>
<li></li> <!–second child element–>
<li></li> <!–third child element–>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
مجدداً ، ظرف فلکس متناسب با همه کودکان سازگار می شود ، حتی اگر مرورگر به صورت افقی پیمایش شود. این رفتار پیش فرض هر ظرف فلکس است. یک ظرف فلکس باعث می شود تا آیتم های فلکس بیشتری در یک خط قرار گیرد. این به این دلیل است که خاصیت flex-wrap به صورت پیش فرض برای nowrap پیش می آید. این باعث می شود که ظرف فلکس بسته بندی نشود.
ul {
flex-wrap: no-wrap; /*Keep on taking more flex items without breaking (wrapping)*/
}
no-wrap ارزش یکiron-clad نیست و قابل تغییر است. با این تعداد آیتم فلکس ، مطمئناً می خواهید کالاهای فلکس در ظرف فلکس “بسته بندی شود”. “بسته بندی” یک کلمه فانتزی برای گفتن است ، “وقتی فضای موجود در ظرف فلکس دیگر نمی تواند آیتم های فلکس را در عرض پیش فرض خود قرار دهد ، به چندین خط می ریزد. این با مقدار بسته بندی امکان پذیر اس با این کار ، flex-item ها اکنون در صورت لزوم به چندین خط تقسیم می شوند. در این حالت ، وقتی یک خط دیگر نمی تواند شامل تمام موارد لیست در عرض پیش فرض خود باشد ، آنها به چندین خط تقسیم می شوند. حتی در تغییر اندازه مرورگر. در اینجا این مورد به نظر می رسد توجه داشته باشید که موارد flex اکنون در عرض های پیش فرض خود نمایش داده می شوند. نیازی به اجبار چند مورد فلکس به یک خط نیست.
ul {
display: flex; /*or inline-flex*/
list-style: none;
flex-wrap: wrap;
}
li {
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
}
<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li></li> <!–first child element–>
<li></li> <!–second child element–>
<li></li> <!–third child element–>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
یک ارزش دیگر وجود دارد : wrap-reverse. بله درست حدس زدید. این اجازه می دهد تا آیتم های flex به چندین خط شکسته شوند ، اما در جهت معکوس.
ul {
display: flex; /*or inline-flex*/
list-style: none;
flex-wrap: wrap-reverse;
}
li {
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
}
<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li></li> <!–first child element–>
<li></li> <!–second child element–>
<li></li> <!–third child element–>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
۳٫ Flex-flow
flex-flow یک ویژگی مختصر است که مقادیر فلکس و جهت انعطاف پذیری را می گیرد. تا به حال از خاصیت border shorthand استفاده کرده اید؟ border: 1px solid red اینجا همین مفهوم است. چند مقدار در یک خط اعلام می شود. مثال زیر را ببینید.
ul {
flex-flow: row wrap; /*direction 'row' and yes, please wrap the items.*/
}
ترکیبات دیگری را که ممکن است انجام شود امتحان کنید flex-flow: row nowrap, flex-flow: column wrap, flex-flow: column nowrap نتایج تولید شده با آنچه در flex-direction وflex-wrap مشاهده کرده اید تفاوتی ندارند. من مطمئن هستم که شما می فهمید چه چیزی تولید می کند آنها را امتحان کنید.
۴٫ Justify-content
زندگی با مدل Flexbox واقعا خوب است. اگر هنوز در این شک دارید ، ویژگی justify-content ممکن است شما را متقاعد کند. ویژگی justify-content هر یک از ۵ مقدار زیر را به خود اختصاص می دهد.
ul {
justify-content: flex-start || flex-end || center || space-between || space-around
}
و ویژگی justify-content دقیقاً چه چیزی را به جدول می آورد؟ خوب ، ممکن است ویژگی text-align را به شما یادآوری کند. ویژگی justify-content نحوه چیدمان موارد فلکس را در محور اصلی تعریف می کند. یک مثال سریع لیست ساده غیر مرتب شده زیر را در نظر بگیرید.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}
<html> <head> <title>Flexbox Starter</title> </head> <body> <ul> <!–parent element–> <li>1</li> <!–first child element–> <li>2</li> <!–second child element–> <li>3</li> <!–third child element–> </ul> </body> </html>
اضافه کردن برخی از استایل های اساسی با ویژگی justify-content ، سه مورد فلکس ممکن است در محور اصلی به هر روشی که بخواهید تراز شوند. در اینجا تجزیه و تحلیل آنچه ممکن است وجود دارد. (i) Flex-start مقدار پیش فرض flex-start است. flex-start تمام موارد فلکس را به ابتدای محور اصلی گروه بندی می کند
ul {
justify-content: flex-start;
}
CSS:
ul {
display: flex;
justify-content: flex-start;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}
<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
(ii) Flex-end flex-end موارد فلکس را تا انتهای محور اصلی گروه بندی می کند.
ul {
justify-content: flex-end;
}
ul {
display: flex;
justify-content: flex-end;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}
<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
(iii) Center مرکز دقیقاً همان کاری را که انتظار دارید انجام می دهد. موارد منعطف را در امتداد محور اصلی قرار می دهد.
ul {
justify-content: center;
}
ul {
display: flex;
justify-content: center;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}
HTML: <html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
(iv) Space-between Space-between فاصله یکسان بین هر مورد فلکس را حفظ می کند.
ul {
justify-content: space-between;
}
ul {
display: flex;
justify-content: space-between;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}
<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
هوم ، آیا اینجا چیز متفاوتی مشاهده کردید؟ نگاهی به تصویر توصیفی زیر بیندازید.
(v) Space-around سرانجام ،Space-around همان فاصله را در اطراف موارد فلکس حفظ می کند.
ul {
justify-content: space-around;
}
ul {
display: flex;
justify-content: space-around;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>1</li> <!–first child element–>
<li>2</li> <!–second child element–>
<li>3</li> <!–third child element–>
</ul>
</body>
</html>
نگاه دوم ضرری ندارد:
اگر به نظر می رسد این موارد برای آموحتن بیش از حد زیاد است نگران نباشید. با کمی تمرین با syntax ها بسیار راحت تر خواهد شد. حتماً بفهمید که چگونه آنها بر نمایش موارد فلکس در محور اصلی تأثیر می گذارند.
۵٫ Align-items
خاصیت align-items تا حدودی به ویژگی justify-content شبیه است. با درک ویژگی justify-content ، آسان تر است که این کار را انجام دهید. Align-items را می توان روی هر یک از این مقادیر تنظیم کرد:flex-start || flex-end || center || stretch || baseline
/*ul represents any flex container*/
ul {
align-items: flex-start || flex-end || center || stretch || baseline
}
این نحوه چیدمان آیتم های flex را بر روی محور عرضی تعریف می کند. این تفاوت بین ویژگی align-items و justify-content است. در زیر نحوه تأثیر مقادیر مختلف بر روی موارد flex آورده شده است. جهت تحت تأثیر این خصوصیات را فراموش نکنید. محور عرضی.
(i) Stretch
مقدار پیش فرض stretch است. با این کار ، عناصر فلکس “کشیده” می شوند تا تمام ارتفاع ظرف فلکس را پر کنند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: stretch;
height: 100%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
(ii) Flex-start
flex-start آنچه را که انتظار دارید انجام می دهد. این آیتم های انعطاف پذیر را در ابتدای محور عرضی گروه بندی می کند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-start;
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
(iii) Flex-end
همانطور که انتظار می رود ، فلکس انتهای موارد فلکس را تا انتهای محور عرضی گروه بندی می کند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-end;
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
(iv) Center
مقدار مرکز به همان اندازه قابل پیش بینی است. موارد فلکس را به مرکز ظرف فلکس تراز می کند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: center;
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
(v) Baseline
و مقدار پایه؟ موارد انعطاف پذیر را در امتداد خطوط اصلی آنها تراز می کند.
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: baseline;
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
}
/* apply to all list items except the first one*/
li:not(:first-child) {
font-size: 2rem;
}<html>
<head>
<title>Flexbox Starter</title>
</head>
<body>
<ul> <!–parent element–>
<li>I am list ۱</li> <!–first child element–>
<li>I am list ۲</li> <!–second child element–>
<li>I am list ۳</li> <!–third child element–>
</ul>
</body>
</html>
Baseline" واقعاً فانتزی به نظر می رسد. به نظر می رسد که این نتیجه دقیقاً مانند flex-start به است اما کاملاً متفاوت است. هک "baseline" چیست؟ تصویر زیر باید کمک کند.
توجه کنید که چگونه همه موارد فلکس تراز شده اند تا صندلی محتوای آنها در baseline باشد؟
۶٫ Align-content
هنگام بحث در مورد ویژگی wrap ، آیا به خاطر دارید که چه چیزهایی رخ داد که موارد فلکس بیشتری را به ظرف فلکس اضافه کردید؟ شما یک ظرف فلکس چند خطی دارید. خاصیت align-content در کانتینرهای چند خطه استفاده می شود. مقادیر مشابه موارد align را جدا ازbaseline می گیرد. طبق تعریف ، چیدمان آیتم های flex را در یک ظرف فلکس چند خطی کنترل می کند. درست مانند موارد align ، مقدار پیش فرض نیز کشیده است اینها مقادیری هستند که اکنون باید با آنها آشنا شوید. بنابراین ، در اینجا نحوه تأثیر آنها بر یک ظرف فلکس چند خطی با ۱۰ مورد فلکس وجود دارد.
(i) Stretch
با stretch ، موارد انعطاف پذیر “کشیده” می شوند تا فضای موجود در امتداد محور عرضی متناسب باشد. فاصله ای که بین موارد فلکس زیر مشاهده می کنید به دلیل حاشیه تعیین شده روی موارد است.
Flex-start (ii)
قبلاً مقدار flex-start را دیده اید. این بار موارد موجود در محفظه چند خطی را با شروع محور عرضی تراز می کند. بخاطر داشته باشید محور عرضی پیش فرض از بالا به پایین است. بنابراین ، موارد فلکس با بالای ظرف فلکس تراز می شوند.
(iii) Flex-end
مقدار flex-end موارد فلکس را به انتهای محور عرضی تراز می کند.
(iv) Center
همانطور که حدس زده اید ، مرکز موارد منعطف را با مرکز محور عرضی تراز می کند.
این آخرین ویژگی flex-container بود. اکنون می فهمید که چگونه از خواص مختلف flex-container استفاده کنید. از این موارد برای کار در بخشهای عملی دروس بعدی استفاده خواهید کرد.
