ویژگی Flexbox در CSS
خوش اومدین به بیست و هشتمین جلسه از دوره آموزش رایگان CSS. یکی از موضوعات ضروری امروزه در طراحی سایت که جزء اساسی طراحی وبسایت هست، بحث Responsive صفحات وب هست. برای پیاده سازی ویژگی ریسپانسیو، روشهای مختلفی وجود داره. یکی از بهترین روش‌ها ویژگی Flexbox در css هست. این ویژگی امکان قرارگرفتن عناصر به صورت افقی کنار همدیگه با نظم خاصی قرار میده. همینطور نسبت به تغییر اندازه مرورگر هم منعطف هست و ترتیب اون تنظیم میشه. برای آشنایی با ویژگی Flexbox در CSS با من همراه باشید.
ویژگی Flexbox در CSS
اولین و مهمترین نکته که در مورد ویژگی Flexbox در CSS وجود داره، این است که این ویژگی باید برای عنصر والد تعریف شود. ما تمامی ویژگی های مربوط به flexbox رو برای عنصر والد تعریف میکنیم و بعد از اون تنظیمات ما برای عناصر داخل عنصر والد اعمال میشن.
در اینجا میتونیم یه نمونه کامل استفاده از flex رو ببینیم. در ادامه این جلسه مقادیر مختلف و ویژگی های متنوع flex رو بررسی میکنیم:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
نقش عنصر والد در Flexbox
همانطور که جلوتر گفتم، برای استفاده از ویژگی flexbox باید والد خودمون رو به درستی و به شکل موردنظرمون مقداردهی کنیم. در نتیجه عناصر فرزند(عناصر داخل عنصر والد) از تنظیمات ما تبعیت میکنند و به شکل دلخواه ما در کنار هم قرار میگیرن.
اولین قدم برای استفاده از این ویژگی این است که ویژگی display رو با مقدار flex مقداردهی کنیم. همانند کد زیر:
.flex-container {
display: flex;
}
زمانی که ما از مقدار flex برای display والد استفاده میکنیم، امکان استفاده از ویژگی های زیر فراهم میشه:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
در ادامه به بررسی این ۶ ویژگی و شیوه مقداردهی اونها میپردازیم:
ویژگی flex-direction
ویژگی flex-direction ترتیب قرارگیری عناصر داخل عنصر والد رو مشخص میکنه. یکی از مقادیری که میتونیم برای این ویژگی قرار بدیم، مقدار column هست. این کار باعث میشه که عناص، داخل عنصر والد بصورت ستونی نمایش داده بشن:
.flex-container {
display: flex;
flex-direction: column;
}
در نتیجه این مقداردهی، چینش زیر رو خواهیم داشت:
ما میتونیم عناصر رو بصورت ستونی نمایش بدیم در الی که از پایین به بالا چیده شده باشند:
.flex-container {
display: flex;
flex-direction: column-reverse;
}
همینطور میتونیم عناصر رو بصورت افقی از چپ به راست بچینیم:
.flex-container {
display: flex;
flex-direction: row;
}
میتونیم اولین عنصر رو در سمت راست قرار بدیم و ا]رین عنصر در سمت چپ نمایش نمایش بده. در واقع عناصر رو از راست به چپ بچینیم:
.flex-container {
display: flex;
flex-direction: row-reverse;
}
مقدار row-reverse برای ویژگی flex-direction باعث میشه که عناصر دسته بندی افقی راست به چپ چیده شه.
ویژگی flex-wrap
دومین ویژگی که میتونیم ازش استفاده کنیم، ویژگی flex-wrap است. این ویژگی میتونه حالت قرارگیری آیتم ها رو با تغییر اندازه تعیین میکنه.
در این مثال من با استفاده از ویژگی flex-wrap یک flex با ۱۲ آیتم ایجاد کردم:
.flex-container {
display: flex;
flex-wrap: wrap;
}
حالت پیشفرض ویژگی flex-wrap مقدار nowrap هست:
.flex-container {
display: flex;
flex-wrap: nowrap;
}
مقدار wrap-reverse توی وضعیت responsive عناصر رو به ترتیب معکوس میچینه.
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
ويژگی flex-flow
ما با استفاده از ویژگی flex-flow میتونیم مقادیر دو ویژگی flex-direction و flex-wrap رو بصورت یکجا وارد کنیم. مثال زیر رو ببینید:
.flex-container {
display: flex;
flex-flow: row wrap;
}
ویژگی justify-content
ویژگی justify-content برای ترازبندی آیتم های flex استفاده میشه.
با استفاده از مقدار center برای ویژگی justify-content میتونیم آیتم های flex وسط چین کنیم:
.flex-container {
display: flex;
justify-content: center;
}
مقدار flex-start باعث میشه آیتم های flex از ابتدای عنصر والد ترازبندی بشن:
.flex-container {
display: flex;
justify-content: flex-start;
}
مقدار flex-end باعث میشه آیتم های flex در انتهای عنصر والد ترازبندی بشه:
.flex-container {
display: flex;
justify-content: flex-end;
}
مقدار space-around باعث میشه فضای خالی انتهایی بین تمامی آیتم های عنصر والد تقسیم بشه:
.flex-container {
display: flex;
justify-content: space-around;
}
مقدار space-between باعث میشه آیتم های flex با فواصل بین خطوط آنها نمایش داده بشه:
.flex-container {
display: flex;
justify-content: space-between;
}
ویژگی align-items
با استفاده از ویژگی align-items میتونیم ترازبندی عمودی آیتم های flex رو مشخص کنیم
مقدار center برای ویژگی align-items باعث میشه که عناصر از لحاظ ارتفاع در وسط عنصر والد قرار بگیرن:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
مقدار flex-start باعث میشه عناصر در بخش بالای عنصر والد قرار بگیرن:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
مقدار flex-end باعث میشه آیتم ها در بخش پایین عنصر والد قرار بگیرن:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
مقدار stretch اندازه آیتم ها رو امتداد میده تا عنصر والد رو پر کنند:
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
مقدار baseline باعث میشه یک خط رنگی روی آیتم های flex قرار بگیره
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
ویژگی align-content
با استفاده از ویژگی align-content میتونیم فاصله بین سطرها(ردیف ها) ایجاد شده در داخل عنصر والد رو مدیریت کنیم.
مقدار space-between برای این ویژگی باعث میشه که فاضله فاصله مساوی بین ردیف ها ایجاد بشه:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
مقدار space-around برای ویژگی align-content باعث میشه فضای قبل، بعد بین ردیف ها نمایش داده بشه:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
مقدار stretch برای این ویژگی باعث میشه که فضای باقی مانده توسط خطوط flex پر بشه:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
مقدار center باعث میشه که خطوط flex در وسط عنصر نمایش داده بشه:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
مقدار flex-start باعث میشه خطوط flex در ابتدای عنصر والد نمایش داده بشه:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
مقدار flex-end در ویژگی align-content باعث میشه که نمایش خطوط flex در انتهای عنصر والد صورت بگیره:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
مرکزیت کامل عنصر
اگر میخواهید عنصر یا عناصر شما دقیقا در وسط عنصر والد قرار بگیرن کافیه که مقدار دو ویژگی justify-content و align-items رو center قرار بدیم. با این روش میتونیم عنصر یا عناصر خودمون رو دقیقا در مرکز عنصر والد قرار بدیم:
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
ویژگی های عناصر فرزند
تا اینجا تمامی ویژگی هایی که استفاده میکردیم برای عنصر والد بود. هرچند نتیجه روی عناصر فرزند اعمال میشد ولی تنظیمات رو روی عنصر والد اعمال میکردیم. در این بخش با چند ویژگی که مخصوص عناصر فرزند هست آشنا میشیم. این ویژگی ها به شرح زیر هستند:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
ویژگی order
با استفاده از ویژگی order میتونیم ترتیب قرارگیری هر آیتم رو مشخص کنیم:
مقدار order مشخص کننده اولویت نمایش آیتم است، این مقدار با عدد مشخص میشه و مقدار پیش فرض اون ۰ هست.
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
ویژگی flex-grow
ویژگی flex-grow مشخص میکنه که یه آیتم flex میتونه مابقی فضای خالی عنصر والد خودش رو پر کنه.
مقدار این ویژگی با عدد مشخص میشه و مقدار پیش فرض اون صفر هست.
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
ویژگی flex-shrink
ویژگی flex-shrink مقدار انعطاف پذیری یه آیتم رو نسبت به بقیه آیتم ها مشخص میکنه.
این ویژگی هم مقدار عددی میگیره و مقدار پیش فرض اون ۱ هست.
در مثال زیر میزان انعطاف پذیری آیتم سوم رو نسبت به بقیه کم کردم:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
ویژگی flex-basis
این ویژگی طول داخلی یک آیتم رو مشخص میکنه
در مثال زیر طول آیتم سوم را ۲۰۰ پیکسل بیشتر کردم:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
ویژگی flex
با استفاده از این ویژگی، میتونیم مقادیر ویژگی های flex-grow ، flex-shrink و flex-basis رو بصورت یکجا وارد کنیم.
در مثال زیر برای آیتم سوم ویژگی های growable و shrinkable رو حذف کردم و طول داخلی آیتم رو با ۲۰۰ پیکسل تنظیم کردم:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
ویژگی align-self
ویژگی align-self ترازبندی یک عنصر داخل عنصر والد رو بصورت اختصاصی مقداردهی میکنیم. این ویژگی بصورت پیشفرض با align-items عنصر والد مقداردهی میشه که ما میتونیم بصورت اختصاصی برای هر آیتم تغییر بدیم.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
در مثال بالا من برای آیتم شماره ۳ ترابندی عمودی را بصورت اختصاصی روی center قرار دادم. مقادیری که برای align-items استفاده میکردیم را میتوانیم برای align-self نیز استفاده کنیم.
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
