راهنمایی کامل Flexbox

بخش: توسعه وب 84 بار مشاهده شده دوشنبه ۱۰ مهر ۹۶ 0 نظر ارسال شده
راهنمایی کامل Flexbox

 پیش زمینه

ماژول Flexbox Layout (جعبه انعطاف پذیر) با هدف ارائه یک راه کارآمد تر برای پخش کردن، تراز و توزیع فضا در میان آیتم ها در container ، حتی در زمانی که اندازه آنها ناشناخته یا پویا است (این معنای کلمه "flex" است)

ایده اصلی پشت flex layout است که به container توانایی تغییر وضعیت width (عرض) / height (ارتفاع) (و order)را جهت پر کردن فضای موجود به بهترین نحو را می دهد (بیشتر این امر را برای تمام دستگاه ها و اندازه های صفحه نمایش ایجاد می کند). یک flex container ، اجزای را برای پر کردن فضای آزاد موجود پر می کند و یا آنها را برای جلوگیری از سرریز کاهش می دهد.

flexbox layout جهت آگنستیک است که با layoutهای معمولی (block  بر پایه عمودی و inline به صورت افقی) متفاوت است. در حالی که آنها به خوبی برای صفحات کار می کنند، اما فاقد انعطاف پذیری (بدون pun در نظر گرفته می شوند) برای حمایت از برنامه های بزرگ و پیچیده می باشند (به خصوص هنگامی که آن را به تغییر جهت گیری، تغییر اندازه، کشش، کاهش، و غیره).

نکته: flexbox layout برای اجزای یک برنامه و layout های مقیاس کوچک مناسب تر است ، در حالی که طرح Grid برای طرح بندی مقیاس بزرگتر در نظر گرفته شده است.

در صورتی که تمایل به یادگیری کامل Flexbox دارید به راحتی میتوانید دوره آموزش جامع Flexbox را که بصورت ویدئویی آماده شده است را دریافت و مشاهده کنید.

 

اصول و تکنولوژی

از آنجا که flexbox یک ماژول کامل است و نه یک خاصیت تنها نیست، شامل بسیاری از مواردی از جمله مجموعه تمام خاصیت های آن است. برخی از آنها برای قرار دادن روی container می باشند (المان پدر، به عنوان flex container نیز شناخته شده)، در حالی که دیگر خاصیت ها به فرزندان تعلق دارند ( " flex items").

اگر layout معمولی براساس مسیر block و  inline باشد، flex layout براساس " flex-flow directions " استوار است. تصویر زیر ایده اصلی flex layout را توضیح می دهد.

flexbox-2

اساسا، item های زیر main axis (از main-start تا main-end) و یا cross axis (از cross-start به cross-end) قرار می گیرند.

  • main axis: محور اصلی  flex container  است که در flex item  قرار داده شده است. مراقب باشید، لزوما افقی نیستند  و به خاصیت های flex-direction بستگی دارد.
  • main-start | main-end : flex item ها در container قرار می گیرند از main-start و رفتن به main-end است.
  • :main size عرض یا ارتفاع flex item می باشد، هر کدام که در ابعاد اصلی قرار دارد، اندازه اصلی item است. خاصیت های اندازه اصلی موردعلاقه flex یا مقدار "width" یا "height" است، هر کدام در ابعاد اصلی قرار دارد.
  • cross axis : محور عمود بر محور اصلی، cross axis نامیده می شود. جهت آن به جهت محور اصلی بستگی دارد.
  • cross-start | cross-end : Flex line با item های پر شده و در container قرار می گیرند که از طرف cross-start در flex container  و به سمت cross-end می رود.
  • cross size : عرض یا ارتفاع یک flex item است، هر کدام که در ابعاد متقابل می باشد، اندازه متقابل item است. خاصیت cross size هر کدام از عرض یا ارتفاع است که در ابعاد متقابل می باشند.

flexbox-3

display#

یک flex container را تعریف می کند. Inline یا block به مقدار داده شده بسته است. این یک flex context برای تمام فرزندان مستقیم را فراهم می کند.

CSS

.container {
  display: flex; /* or inline-flex */
}

توجه داشته باشید که ستون های CSS بر روی flex container تاثیر نمی گذارد.

 

#order

flexbox-4

به طور پیش فرض، flex itemها در سفارش منبع قرار می گیرند. با این حال، خاصیت order، نظم را در flex container کنترل می کند.

CSS

.item {
  order: ; /* default is 0 */
}

 

flex-direction#

flexbox-1

این امر main-axis را ایجاد می کند، بنابراین مشخص کردن flex itemها جهت قرار دادن در flex container می باشد. Flexbox (به غیر از پنهان سازی اختیاری) یک مفهوم single-direction layout است. flex itemها را در ابتدا یا در ردیف افقی یا ستون عمودی قرار می دهد.

CSS

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row (پیش فرض): در ltr چپ به راست ؛ در Rtl راست به چپ.
  • row-reverse: در ltr راست به چپ ؛ در rtl چپ به راست.
  • column: همانند row اما از بالا به پایین
  • column-reverse: همانند row-reverse اما پایین به بالا.

 

 

flex-grow#

flexbox-5

این ویژگی در صورت لزوم توانایی یک flex item را رشد می دهد. این مقدار بدون ارزش است که به عنوان یک نسبت عمل می کند. این موضوع میزان فضای موجود در داخل flex container را تعیین می کند.

اگر تمام item ها دارای flex-grow را به 1 تنظیم کنید، فضای باقیمانده در container به همان اندازه برای تمام فرزندان توزیع خواهد شد. اگر یکی از فرزندان دارای مقدار 2 باشد، فضای باقیمانده دو برابر فضای بیشتری را در اختیار دیگران قرار می دهد (یا حداقل آن را امتحان می کند).

CSS

.item {
  flex-grow: ; /* default 0 */
}

اعداد منفی نامعتبر می باشند.

 

 

flex-wrap#

flexbox-6

به طور پیش فرض، flex item ها سعی می کنند بر روی یک خط قرار گیرند. می توانید آن را تغییر دهید و با استفاده از این خاصیت به itemها مورد نیاز اجازه Wrap بدهید.

CSS

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (پیش فرض): تمام flex itemها در یک خط قرار می گیرند
  • wrap: flex itemها را بر روی چند خط، از بالا به پایین wrap می کند.
  • wrap-reverse: flex itemها را روی چندین خط از پایین به بالا قرار دهید.

 

 

flex-shrink#

این ویژگی توانایی flex item را در صورت لزوم کاهش می دهد.

CSS

.item {
  flex-shrink: ; /* default 1 */
}

اعداد منفی نامعتبر می باشند.

 

 

flex-basis#

این مقدار اندازه پیش فرض یک المان را قبل از توزیع فضای باقی مانده تعریف می کند. می تواند طول (مثلا 20٪، 5rem  و غیره) یا یک keyword (کلمه کلیدی) باشد. auto keyword به معنی " به خاصیت width یا height " نگاه  کن می باشد (که به طور موقت با کلمه کلیدی main-size انجام می شود تا زمانی که از کار می افتد). کلمۀ کلیدی content به معنی "اندازه آن بر اساس محتوای آیتم" است - این کلمه کلیدی هنوز به خوبی پشتیبانی نشده ، بنابراین برای تست سخت بوده و برای دانستن max-content، min-content و fit-content دشوارتر است.

CSS

.item {
  flex-basis:  | auto; /* default auto */
}

اگر مقدار 0 را تنظیم کنید، فضای اضافی اطراف محتوا در نظر گرفته نمی شود. اگر به صورت اتوماتیک تنظیم شود، فضای اضافی بر اساس مقدار flex-grow توزیع می شود. این گرافیک را ببینید.

 

flex-flow (Applies to: parent flex container element)#

این یک خاصیت flex-direction و flex-wrap کوتاه است که با هم flex container اصلی و cross axes را مشخص می کنند. پیش فرض row nowrap است.

CSS

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

 

 

justify-content#

flexbox-7

alignment را در محور اصلی تعریف می کند. این کار فضای اضافی آزاد بیش از زمانی که تمام flex item در یک خط غیر انعطاف پذیر ، یا انعطاف پذیر هستند، اما به حداکثر اندازه خود رسیده اند کمک می کند. برخی کنترل را بر alignment کردن item ها زمانی که از خط  overflow (سرریز) می شوند اعمال می کند.

CSS

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start (پیش فرض): itemها به سمت خط شروع بسته بندی می شوند.
  • flex-end: itemها به سمت خط پایان بسته بندی می شوند.
  • center: itemها در امتداد خط مرکزی قرار دارند.
  • space-between: itemها به طور مساوی در خط توزیع می شوند؛ اولین item در خط شروع است، آخرین item در خط پایان.
  • space-around: itemها به صورت یکنواخت در کنار خط با فاصله مساوی در اطراف آنها توزیع می شوند. توجه داشته باشید که بصورتی فضایی برابر نیست، زیرا تمام itemها دارای فضای برابر در هر دو طرف است. اولین item یک واحد فضایی در برابر لبه container دارد، اما دو واحد فضای میان المان بعدی به این دلیل است که المان بعدی دارای فاصله خاصی است که اعمال می شود.
  • space-evenly: itemها توزیع می شوند تا فاصله بین هر دو آیتم (و فضای لبه ها) برابر باشد.

 

 

flex#

این اصطلاح برای ترکیب flex-grow، flex-shrink و flex-base است. پارامتر دوم و سوم (flex-shrink و flex-basis) اختیاری هستند. پیش فرض 0 1 auto است.

CSS

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

توصیه می شود به جای تنظیم خاصیت فردی از این ویژگی shorthand استفاده کنید. shorthand ارزش های دیگر را هوشمندانه تنظیم می کند.

 

 

align-self#

flexbox-8

اجازه می دهد که alignment پیش فرض (یا مشخص شده توسط align-itemها ) برای overridden جهت flex itemهای فردی مورد استفاده قرار می گیرد.

لطفا align-itemها را برای توضیح مقادیر موجود، را ببینید.

CSS

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

توجه داشته باشید که float ، clear و vertical-align هیچ تاثیری بر یک flex item ندارد.

 

 

align-items#

flexbox-9

این تعریف رفتار پیش فرض را برای چگونگی قرار دادن flex itemها در امتداد محور متقابل در خط فعلی تعیین می کند. آن را به عنوان نسخه توجیهی محتوا برای محور متقابل (عمود بر محور اصلی) در نظر بگیرید.

CSS

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start: لبه حاشیه cross-start آیتم ها روی خط cross-start قرار می گیرد.
  • flex-end: لبه حاشیه cross-end آیتم ها بر روی خط cross-end قرار می گیرد.
  • center: آیتم ها در cross-axis قرار دارند.
  • baseline: آیتم ها به ترتیب با خطوط پایه آنها هم تراز شده اند.
  • stretch (پیش فرض): stretch برای پر کردن container است(به min-width / max-width احترام می گذارد).

 

 

 align-content#

flexbox-10

این خطوط flex container را در زمانی که فضای اضافی در cross-axis وجود دارد، شبیه به چگونگی justify-content ، آیتم های فردی در main-axis را align می کند.

نکته: این ویژگی تاثیری ندارد، زیرا تنها یک عدد از flex item ها وجود دارد.

CSS

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start: خطوط بسته به شروع container.
  • flex-end: خطوط بسته به پایان container.
  • center: خطوط بسته به مرکز container.
  • space-between: خطوط به طور مساوی توزیع شده؛ خط اول در ابتدای container و آخرین در انتهای آن قرار دارد.
  • space-around: خطوط به طور مساوی با فضای برابر در اطراف هر خط توزیع می شوند.
  • stretch (به طور پیش فرض): خطوط را می کشد تا فضا باقی نماند.

مثال ها

بیایید با یک مثال بسیار ساده شروع کنیم، تقریبا مشکل روزانه را حل می کنیم: کاملا مرکز. ساده ترین راه، استفاده از flexbox است.

CSS

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

این به margin وابسته است که حاشیه `auto` را در یک flex container اضافه می کند، فضای اضافی را جذب می نماید. بنابراین تنظیم یک حاشیه عمودی از auto باعث می شود که آیتم کاملا در هر دو محور کاملا در مرکز باشند.

حال می خواهیم از برخی خاصیت های بیشتر استفاده کنیم. یک لیست 6 موردی را در نظر بگیرید، همه با ابعاد ثابت در مورد aesthetic، اما آنها می توانند auto-sized شوند. می خواهیم آنها را در محور افقی به طور مساوی و هموار تقسیم کنیم تا زمانی که ما تغییر اندازه مرورگر را انجام دهیم، تمام موارد مناسب است (بدون نمایش اطلاعات رسانه ای!).

CSS

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

انجام شد. تنها نگرانی ظاهر طراحی وجود دارد. مثال زیر یک قلم از این امور است.

HTML

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

SCSS

@import "compass/css3";

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

Result

flexbox-11

بیایید مورد دیگری را امتحان کنیم. تصور کنید ما یک  right-aligned navigation را در بالای صفحه وب خود داریم، اما می خواهیم آن را بر روی صفحه نمایش های medium-sized و single-columned روی دستگاه های کوچک در مرکز قرار گیرد. اینکار به اندازه کافی آسان است.

CSS

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

HTML

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

SCSS

@import "compass/css3";

.navigation {
  list-style: none;
  margin: 0; 
  
  background: deepskyblue;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  background: darken(deepskyblue, 2%);
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }
  
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
  }

  
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}

Result

flexbox-14

بیایید کار جدیدی با انعطاف پذیری flex itemها انجام دهیم! در مورد اولین طرح mobile-first 3-columns با full-width عنوان و فوتر است. مستقل از order منبع می باشد.

CSS

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

/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. nav
 * 3. main
 * 4. aside
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

HTML

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>
 

SCSS

 

@import "compass/css3";

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 2em; 
}

Result

flexbox-12

Prefix flexbox

Flexbox برای حمایت از بیشتر مرورگرها نیاز به برخی از vendor prefix ها دارد. این تنها شامل خاصیت های prepending با vendor prefix نیست، در واقع از ویژگی های کاملا متفاوت و ویژگی های مختلفی برخوردار است. این امر به این دلیل است که مشخصات Flexbox در طول زمان تغییر کرده و نسخه های old ، tweener و نسخه های new آن ایجاد شده است. 

بهترین راه مدیریت آن در دستور نگارش (syntax) جدید (و نهایی) است و CSS خود را از طریق Autoprefixer اجرا کنید، که بسیار خوب است.

به طور خلاصه، در اینجا یک Sass @mixin برای کمک به برخی از prefix ها است که به شما می آموزد تا چه مواردی باید انجام شوند:

SCSS

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

Bugها

Flexbox قطعا بدون اشکالات نیست. بهترین مجموعۀ Flexbugها برای فیلیپ والتون و گرگ ویتورث هستند. این مکان برای پیگیری منبع باز است.

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

توسط " version "  flexbox شکسته شده:

  • (new) به معنای دستور نگارش (syntax) جدیدی از مشخصات (مثلا نمایش: display: flex;)
  • (tweener) به معنای دستور نگارش (syntax) غیررسمی فردی از سال 2011 است (به عنوان مثال display: flexbox;)
  • (old) به اصطلاح قدیمی از سال 2009 (به عنوان مثال display: box;)

flexbox-13

مرورگر +BlackBerry 10 از دستور نگارش (syntax) جدید پشتیبانی می کند.

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

گروه تحقیقات سافت اسکیل به منظور افزایش سطح دانش جامعه، سعی در ترجمه، تالیف و تولید محتوای با کیفیت در زمینه های مختلف نرم افزاری دارد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...