جلسه ۵۶: خصوصیات کانتینر 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
استفاده کنید. از این موارد برای کار در بخشهای عملی دروس بعدی استفاده خواهید کرد.