آموزش کامل دستورات CSS Flexbox به همراه مثال – قدم اول

از خیلی وقت پیش که طراحی CSS-Based مد شد ، تقریبا همه از دستور Float برای چیدن عناصر صفحه در سمت چپ و راست یا کنار هم قرار دادن بخش ها، استفاده می کنند. ولی کم کم باید Float را هم در دفتر نوستالژی ها ثبت کنیم و به سمت امکان جدید CSS برای چینش حرفه ای عناصر صفحه بریم یعنی FlexBox (یا به قول W3C، همون CSS Flexible Box Layout Module) . سلسله دستورات FlexBox ماژول جدید CSS3 هستند که چینش عناصر صفحه، جهت ها(Directions) و حتی محاسبه عرض نگهدارنده(Container) را وقتی محتوای داینامیک یا غیر مشخصی دارد، بهبود می بخشند. مشخصه اصلی یک نگهدارنده FlexBox ،قابلیت تغییر عرض (Width) و ارتفاع (Height) عناصر داخلی اش یا همان فرزندان به صورتی است که فضاهای موجود را به بهترین شکل در سایزهای مختلف صفحه نمایش، پر کنند.همان کاری که Float از آن عاجز است.

خیلی از طراحان و توسعه دهندگان وب استفاده از Flexbox را آسان می دانند چون موقعیت دهی به عناصر ساده تر شده است بدین ترتیب صفحاتی با ساختار پیچیده را می توان خیلی سریع و با کمترین کدنویسی و کمترین پیچیدگی توسعه، طراحی کرد.الگوریتم Flexbox بر پایه چینش (Direction-Based) است بر عکس block یا inline که فقط می توانند زیر هم قرار بگیرند یا جلوی هم.همچنین Flexbox بیشتر برای طراحی عناصر کوچک تر صفحه استفاده می شود و برای ساختار کلی صفحه جدیدا از CSS Grid استفاده می شود.

در این مقاله به جای اینکه نحوه کار خصیصه ها(Properties) مربوط به Flexbox را تشریح کنیم، می خواهیم روی چگونگی کارکرد و اثر استفاده از اونها در طراحی به همراه مثال های گرافیکی، فوکوس کنیم.

مبانی

قبل از اینکه سراغ خصیصه های Flexbox برویم اجازه دهید نگاهی به مدل کلی Flexbox بیندازیم. ساختار (Layout) فلکس باکس تشکیل شده است از یک نگهدارنده والد که flex container نامیده میشود و فرزندان آن که flex items نامیده می شوند.

 

 

در شکل بالا، می توانید خصیصه ها و کلمات فنی استفاده شده برای flex container و فرزندانش را ببینید. برای اطلاعات بیشتر در مورد معنی این کلمات می توانید به مستندات رسمی Flexbox نگاهی بیندازید.

Flexbox از بدو تولدش در ۲۰۰۹ (که یه پیش نویس بیش نبود) تا به حال تغییرات زیادی در ساختارش ایجاد شده است تا همه چیز شفاف و روشن باشد و ما از syntax نهایی (Sep 2014) آن استفاده می کنیم.

نحوه پشتیبانی مرورگرها از آخرین نسخه Flexbox:

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

نحوه استفاده

برای استفاده از flexbox فقط کافیست خصیصه display عنصر نگه دارنده را تغییر دهید:

.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}

یا اگر می خواهید آن را شبیه یک عنصر inline نمایش دهید:

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

نکته: این تنها خصیصه ای است که شما باید برای نگه دارنده والد قرار دهید تا  همه فرزندان سطح اول آن (نه عناصر داخل فرزندان و …) به صورت عناصر flex در آیند.

راه های مختلفی برای گروه بندی خصیصه های flexbox وجود دارد ولی ساده ترین راهی که من پیدا کردم تا بتوانم نحوه استفاده از flexbox راه بفهمم، تقسیم کردن آنها به ۲ بخش بود. یک بخش برای flex container و یک بخش برای flex items یا فرزندان. در زیر همه اینها را خواهید دید و اینکه هر کدام چه اثری می گذارند.

خصیصه های مربوط به Flexbox container

flex-direction

این خصیصه با تنظیم محور اصلی نگهدارنده، مشخص می کند عناصر flex داخل نگهدارنده با چه چینشی نمایش یابند که می تواند در دو محور اصلی باشد. مثلا به صورت ردیف های افقی یا ستون های عمودی.

.flex-container {
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
}

با چینش row، عناصر flex به صورت خطی از چپ به راست ltr چیده می شوند.

 

.flex-container {
-webkit-flex-direction: row-reverse; /* Safari */
flex-direction: row-reverse;
}

با چینش row-reverse عناصر flex به صورت خطی و از راست به چپ rtl چینش می شوند.

.flex-container {
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
}

همچنین با چینش column، عناصر به صورت ستونی و از بالا به پایین چینش خواهند شد

.flex-container {
-webkit-flex-direction: column-reverse; /* Safari */
flex-direction: column-reverse;
}

و با چینش از نوع column-reverse هم عناصر به صورت ستونی ولی از پایین به بالا چیده می شوند

مقدار پیش فرض : row

نکته: مقادیر row و row-reverse  بسته به direction کل صفحه عمل می کنند.پس اگر صفحه شما rtl باشد، این دو دستور برعکس کار می کنند.

---

flex-wrap

ایده اولیه flexbox این بود که نگهدارنده بتواند عناصر داخلی اش را در یک خط کنار هم قرار دهد(کاری که قبلا با float می کردیم). flex-wrap همین با کنترل می کند که عناصر در یک خط قرار بگیرند یا چند خط.

.flex-container {
-webkit-flex-wrap: nowrap; /* Safari */
flex-wrap: nowrap;
}

با دستور بالا همه عناصر داخل flexbox در یک خط قرار می گیرند. به صورت پیش فرض عرض شان کاهش می یابد تا عرض نگهدارنده را پر کنند.

.flex-container {
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
}

اینجا عناصر flexbox در چند ردیف نمایش داده شده اند.

.flex-container {
-webkit-flex-wrap: wrap-reverse; /* Safari */
flex-wrap: wrap-reverse;
}

اینجا هم مثل نمونه قبلی است فقط عناصر از پایین چیده شده اند.

مقدار پیش فرض: nowrap

نکته: مقادیر بالا بسته به direction کل صفحه عمل می کنند.پس اگر صفحه شما rtl باشد، این دو دستور برعکس کار می کنند.

---

flex-flow

این خصیصه یک میانبر برای تنظیم خصیصه های flex-direction و flex-wrap است.

.flex-container {
-webkit-flex-flow: || ; /* Safari */
flex-flow: || ;
}

مقدار پیش فرض: row nowrap

---

justify-content

این خصیصه عناصر را از روی محور اصلی خط فعلی نگهدارنده می چیند .یعنی فرض کنید عناصر داخلی عرض ثابت دارند و انعطاف پذیر نیستند حالا این خصیصه مشخص می کند که فضای خالی در کدام سمت باشد و عناصر در کدام سمت.

.flex-container {
-webkit-justify-content: flex-start; /* Safari */
justify-content: flex-start;
}

بدین ترتیب عناصر flexbox به سمت چپ نگهدارنده چینش می شوند البته اگر صفحه ltr باشد.

 

.flex-container {
-webkit-justify-content: flex-end; /* Safari */
justify-content: flex-end;
}

حالا عناصر flexbox به سمت راست نگهدارنده چینش می شوند البته اگر صفحه ltr باشد.

.flex-container {
-webkit-justify-content: center; /* Safari */
justify-content: center;
}

با این دستور هم عناصر در مرکز جمع می شوند

.flex-container {
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
}

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

.flex-container {
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
}

این مقدار عین مقدار بالاست فقط عناصر اول و آخر هم از لبه نگهدارنده فاصله دارند

مقدار پیش فرض: flex-start

---

align-items

عناصر flex می توانند در همه جهت های ردیف فعلی چینش شوند مثل justify-content ولی این بار عمود بر نگهدارنده.

.flex-container {
-webkit-align-items: stretch; /* Safari */
align-items: stretch;
}

همانطور که می بینید عناصر داخلی همه ارتفاع نگهدارنده را پر کرده اند

.flex-container {
-webkit-align-items: flex-start; /* Safari */
align-items: flex-start;
}

اینجا عناصر به نقطه شروع نگهدارنده جمع شده اند

.flex-container {
-webkit-align-items: flex-end; /* Safari */
align-items: flex-end;
}

و اینجا برعکس به نقطه پایانی نگهدارنده چسبیده اند

.flex-container {
-webkit-align-items: center; /* Safari */
align-items: center;
}

و در اینجا هم عناصر به نقطه شروع محور افقی آمده اند

.flex-container {
-webkit-align-items: baseline; /* Safari */
align-items: baseline;
}

عناصر flexbox در این مثال، به واسطه خط مبنا (Baseline) شان چینش شده اند

مقدار پیش فرض: stretch