021-28423015

Flexbox در CSS

قبل از ماژول Flexbox ، چهار حالت طرح بندی وجود داشت:

  • Block-  برای بخشی در یک صفحه وب
  • Inline- برای متن
  • Table- برای داده های جدول دو بعدی
  • Positioned- برای موقعیت صریح یک عنصر

ماژول چیدمان جعبه Flexible ، ساختن طرح بندی ریسپانسیو انعطاف پذیر بدون استفاده از شناور(float) یا موقعیت(position) را آسان تر می کند.

عنصر Flexbox

برای شروع استفاده از مدل Flexbox، ابتدا باید یک ظرف انعطاف پذیر(container) را تعریف کنید.

مثال زیر یک container انعطاف پذیر (منطقه آبی) را با سه عدد انعطاف پذیر نشان می دهد.

عنصر Flexbox
 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div> 
مشاهده مثال

عنصر والدین (container)

container انعطاف پذیر با تنظیم خصوصیت display  به انعطاف پذیری تبدیل می شود:

.flex-container {
display: flex;
}

خصوصیات container  انعطاف پذیر عبارتند از:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

ویژگی flex-direction

ویژگی flex-direction تعریف می کند که در آن کانتینر قصد دارد انعطاف پذیری ها را مرتب کند.

مقدار ستون موارد انعطاف پذیر را به صورت عمودی (از بالا به پایین) مرتب می کند:

عنصر والد
.flex-container {
  display: flex;
  flex-direction: column;
}
مشاهده مثال

مقدار ستون معکوس موارد انعطاف پذیر را به صورت عمودی (اما از پایین به بالا) دسته بندی می کند:

column
.flex-container {
  display: flex;
  flex-direction: column;
}
مشاهده مثال

مقدار ردیف موارد انعطاف پذیر را به صورت افقی (از چپ به راست) مرتب می کند:

column-reverse
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
مشاهده مثال

مقدار معکوس ردیف موارد انعطاف پذیر را به صورت افقی (اما از راست به چپ) قرار می دهد:

row
.flex-container {
  display: flex;
  flex-direction: row;
}
مشاهده مثال

ویژگی flex-wrap

خصوصیات flex-wrap مشخص می کند که آیتم های انعطاف پذیر باید بسته شوند یا نه.

مثالهای زیر 12 عدد انعطاف پذیر را در اختیار شما قرار میدهند تا بتوانید خصوصیات flex-wrap را نشان دهید.

row-reverse
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
مشاهده مثال

wrap
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
مشاهده مثال

nowrap
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
مشاهده مثال

ویژگی flex-flow

ویژگی flex-flow جریان یک ویژگی مختصر برای تنظیم هر دو ویژگی flex-direction و flex-wrap است.

wrap-reverse
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
مشاهده مثال

ویژگی justify-content

برای محاسبه موارد انعطاف پذیر از justify-content استفاده می شود:

row wrap
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
مشاهده مثال

ترازبندی center
.flex-container {
  display: flex;
  justify-content: center;
}
مشاهده مثال

flex-start
.flex-container {
  display: flex;
  justify-content: flex-start;
}
مشاهده مثال

flex-end
.flex-container {
  display: flex;
  justify-content: flex-end;
}
مشاهده مثال

space-around
.flex-container {
  display: flex;
  justify-content: space-around;
}
مشاهده مثال

ویژگی align-items

خصوصیت align-items برای جفت کردن اجزای انعطاف پذیر به صورت عمودی استفاده می شود.

در این نمونه ها ما از یک container  200 پیکسل بالا استفاده می کنیم تا ویژگی align-items  را نشان دهد.

space-between
.flex-container {
  display: flex;
  justify-content: space-between;
}
مشاهده مثال

align-items center
.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;
}
مشاهده مثال

ویژگی align-content

ویژگی align-content برای تنظیم خطوط انعطاف پذیر استفاده می شود.

در این نمونه ها ما از container  با ظرفیت 600 پیکسل استفاده می کنیم که ویژگی بسته بندی پیچیده را برای بسته بندی به کار می برد تا ویژگی align-content را بهتر نمایان سازد.

space-between
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}
مشاهده مثال

space-around
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}
مشاهده مثال

stretch
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}
مشاهده مثال

align-content center
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}
مشاهده مثال

align-content flex-start
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}
مشاهده مثال

align-content flex-end
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}
مشاهده مثال

مرکزی کامل (perfect centering)

در مثال زیر ما یک مسئله بسیار رایج را حل می کنیم: perfect centering

راه حل: هر دو ویژگی های justify-content و align-items را به مرکز تنظیم کنید و مورد انعطاف پذیری کاملا محور قرار گیرد:

align-items center
.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}
مشاهده مثال

عناصر فرزند (اقلام)

عناصر فرزند مستقیم یک ظرف انعطاف پذیر به طور خودکار انعطاف پذیر (انعطاف) موارد را تبدیل می کنند.

عنصر فوق چهار علامت آبی انعطاف پذیر را درون ظرف مخزن خاکستری ظاهر می کند.

flex-container
 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div> 
مشاهده مثال

 

خصوصیات انعطاف پذیری (flex) عبارتند از:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

ویژگی order

خصوصیت order ، ترتیب موارد انعطاف پذیری را مشخص می کند.

اولین مورد در کد لازم نیست که به عنوان اولین مورد در طرح نمایش داده شود.

مقدار order باید یک عدد باشد، مقدار پیش فرض 0 است.

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 ، مشخص می کند که چقدر یک محصول انعطاف پذیر نسبت به بقیه موارد انعطاف پذیر رشد می کند.

مقدار باید یک عدد باشد، مقدار پیش فرض 0 است.

flex-grow
 <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 را مشخص می کند که چقدر مقدار انعطاف پذیری نسبت به بقیه موارد انعطاف پذیر کاهش می یابد.

مقدار باید یک عدد باشد، مقدار پیش فرض 1 است.

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

خصوصیات flex-basis ، طول اولیه یک محصول flex را مشخص می کند.

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-base است.

flex
 <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-self همگام سازی پیشفرضی تنظیم شده توسط ویژگی  align-items را غیرفعال میکند.

در این نمونه ها از یک ظرف 200 پیکسل بالا استفاده می کنیم تا بهتر بتوانیم خصوصیات align-self را نشان دهیم:

align-self
 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div> 
مشاهده مثال

align-self flex-start
 <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> 
مشاهده مثال

پشتیبانی مرورگر

خواص flexbox در تمام مرورگرهای مدرن پشتیبانی می شود.


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط