کانتینر فلکس (Flex Container) در CSS
«کانتینر فلکس (Flex Container)» والد چیدمان فلکس باکس است و با مقداردهی ویژگی display به flex یا inline-flex فعال می شود. سپس می توانید جهت، سطرشکنی و ترازبندی آیتم ها را به صورت منعطف کنترل کنید.
ویژگی های اصلی کانتینر فلکس
کانتینر می تواند ویژگی های زیر را داشته باشد: display، flex-direction، flex-wrap، flex-flow، justify-content، align-items و align-content.
- display: مقدار را روی
flexیاinline-flexبگذارید. - flex-direction: جهت نمایش آیتم ها:
row،column،row-reverse،column-reverse. - flex-wrap: سطرشکنی آیتم ها:
nowrap،wrap،wrap-reverse. - flex-flow: شورت هند برای
flex-directionوflex-wrap. - justify-content: ترازبندی افقی روی محور اصلی.
- align-items: ترازبندی عمودی آیتم ها روی محور عمود.
- align-content: ترازبندی خطوط فلکس وقتی چند خط دارید.
جهت کانتینر با flex-direction
چهار مقدار زیر جهتِ چیدمان را تعیین می کنند. مقدار پیش فرض row است.
.flex-container { display: flex; flex-direction: row; }.flex-container { display: flex; flex-direction: column; }.flex-container { display: flex; flex-direction: row-reverse; }.flex-container { display: flex; flex-direction: column-reverse; }سطرشکنی با flex-wrap و شورت هند flex-flow
برای کنترل شکستن آیتم ها به خطوط جدید از flex-wrap استفاده کنید؛ و برای نوشتن کوتاه، flex-flow را به کار ببرید.
.flex-container { display: flex; flex-wrap: nowrap; }.flex-container { display: flex; flex-wrap: wrap; }.flex-container { display: flex; flex-wrap: wrap-reverse; }.flex-container { display: flex; flex-flow: row wrap; }ترازبندی روی محور اصلی: justify-content
وقتی فضای خالی روی محور اصلی دارید، با مقادیر زیر آیتم ها را تراز کنید: center، flex-start، flex-end، space-around، space-between، space-evenly.
.flex-container { display: flex; justify-content: center; }ترازبندی آیتم ها روی محور عمود: align-items
برای تراز عمودی (یا عمود بر محور اصلی) از align-items با مقادیری مانند center، flex-start، flex-end، stretch، baseline استفاده کنید.
.flex-container { display: flex; height: 200px; align-items: center; }ترازبندی خطوط: align-content
وقتی flex-wrap: wrap فعال است، خطوط با align-content تراز می شوند: center، stretch، flex-start، flex-end، space-around، space-between، space-evenly.
.flex-container { display: flex; flex-wrap: wrap; height: 400px; align-content: space-between; }مرکز دقیق با کانتینر فلکس
برای «مرکز دقیق»، هر دو ویژگی زیر را روی center بگذارید تا آیتم در میانه افق و عمود قرار گیرد.
.flex-container { display: flex; height: 400px; justify-content: center; align-items: center; }نکته: برای مرور مبانی، صفحه فلکس باکس را ببینید. سپس برای کار با آیتم ها، به فلکس – آیتم ها مراجعه کنید.
مطالعه بیشتر
MDN: justify-content و MDN: flex-direction جزئیات هر ویژگی را توضیح می دهند.