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

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

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

عنصر Flexbox

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

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

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div> 

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

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

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

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

ویژگی flex-direction

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

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

.flex-container {
  display: flex;
  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-wrap

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

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

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

ویژگی flex-flow

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

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

ویژگی justify-content

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

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container {
  display: flex;
  justify-content: flex-start;
}

.flex-container {
  display: flex;
  justify-content: flex-end;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}

ویژگی align-items

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

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

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

ویژگی align-content

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

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

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

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

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

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

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

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

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

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

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

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

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

 <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 را مشخص می کند.

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

 <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 را نشان دهیم:

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div> 

 <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 در تمام مرورگرهای مدرن پشتیبانی می شود.