استفاده از Flexbox را یاد بگیرید

استفاده از Flexbox را یاد بگیرید
Flexbox لایه بندی جدید و قدرتمند CSS است که با لایه بندی های قبلی تفاوت بسیاری دارد، Flexbox باعث میشود بسیاری از مشکلات طراحان و توسعه دهندگان وب در لایه بندی حل شود، Flexbox سه قانون اساسی در طراحی وب دارد که دست یابی به آن در CSS سخت و تقریبا غیرممکن است : ترازبندی، پخش شدن و مرتب شدن، باید مجیدآنلاین در این مقاله همراه باشید تا با Flexbox آشنا شوید.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

قبل از اینکه شروع به یادگیری Flexbox کنیم به نکات زیر توجه کنید :
  • Flexbox از سه مرحله گذشت تا به چیزی تبدیل شد که امروزه از آن استفاده میکنیم، هرکدام از این مرحله ها نام های متفاوتی برای خاصیت هایشان داشتند همانند vendor prefix ها که در مرورگرهای مختلف متفاوت هستند، به همین دلیل توصیه میکنم از آخرین ورژن مرورگر خود برای اجرای دستورات Flexbox استفاده کنید و سپس میتوانید روی پشتیبانی آن در مرورگرهای قدیمی تر کار کنید اما زیاد به دنبال پشتیبانی کامل Flexbox در تمام مروگرها نباشید زیرا این کار مثل نوشیدن نوشابه با چنگال میباشد.
  • Flexbox یک لایه بندی جدید در طراحی است برای همین مفروضاتی که از لایه بندی های قدیمی دارید را فراموش کنید و سعی نکنید در این لایه بندی استفاده کنید.
  • ممکن است از دیگران بشنوید که چرا باید از Flexbox استفاده کنیم در صورتی که انواع لایه بندی های دیگر در صفحه ی وب کار ما را به خوبی راه می اندازد، دقت داشته باشید که Flexbox به زودی گسترش خواهد یافت و بسیاری از مشکلات لایه بندی را حل خواهد کرد.

کاربرد Flexbox را بهتر ببینید

سه div ساده را درون یک div پدر قرار میدهیم :
<div id="item-container">
<div class="circle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
به div هایمان ظاهر مناسب را میدهیم و به div پدر خاصیت display : flex میدهیم :
#item-container {
display: flex;
background-color: hsl(34,88%,90%); }

.square {
height: 200px; width: 200px;
background-color: hsl(50,88%,50%); }

.circle {
border-radius: 50%; width: 150px; height: 150px;
background-color: hsl(22,88%,50%); }
نتیجه چیزی شبیه به زیر خواهد شد :
لازم است به چند نکته توجه کنید :
  • خاصیت flex عموما به المنت پدر داده میشود.
  • هرکدام از فرزندان المنتی که خاصیت flex دارند به عنوان flex item شناخته میشوند، هرچند فرزندان ممکن است دارای محتوای خاصی نباشند یا حتی خصوصیات CSS مربوط به خودشان را داشته باشند.
  • Block ، inline ، float  و text-align درون زمینه ی flex item ها هیچ معنایی ندارند.
  • به صورت پیشفرض flex item ها به سمت بالا و چپ پدر المنت دربرگیرنده ی خود میچسبند.

ترازبندی Flexbox

در ابتدا ترازبندی افقی المنت های flex item را تغییر میدهیم، سمت چپ flex item به عنوان flex-start شناخته میشود و سمت راست به عنوان flex end برای همین مینویسیم :
#item-container { justify-content: flex-end; }
محتوا را از طریق justify-content به وسط صفحه می آوریم :
#item-container { justify-content: center; }
کمی به دو المنت فضای خالی میدهیم :
#item-container { justify-content: space-between; }
Space-between باعث میشود حداکثر فضای خالی بین دو المنت درون یک container داشته باشیم، این کار هنگامی که دو flex item یا هزاران flex item داشته باشیم بدون هیچ تفاوتی به خوبی اجرا میشود، به یک مثال دیگر توجه کنید :
#item-container { justify-content: space-around; }
شاید بهترین راه برای درک این مثال این باشید که فکر کنید margin:0 auto داده ایم به المنت ها، المنت ها به اطراف هل داده میشوند ولی به صورتی که در وسط فضای خالی قرار میگیرند.
تا اینجا تمام مثال هایی که زدیم در راستای افق قرار داشتند، حالا اگر بخواهیم المنت ها را نسبت به خط عمود جابجا کنیم چه کاری باید انجام دهیم ؟ به این مثال دقت کنید :
#item-container { justify-content: space-between; align-items: center; }
مقادیری همچون flex-start به بالا و flex-end به پایین اشاره میکند.
Flexbox اولین سیستم لایه بندی CSS بود که اجازه ی مرتب سازی را به شما میداد، یک مثال ساده میزنم، مربع را قبل از دایره ها میگذاریم بجای اینکه وسط آنها بگذاریم :
.square { order: -1; }

نتیجه گیری

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

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

ارسال پاسخ مجید علوی‌زاده
مجید علوی‌زاده
دوشنبه ۰۱ شهریور ۱۳۹۵ ۱۲:۴۷
در پاسخ به دیدگاه نجمه ارسال شده در سه شنبه ۲۶ مرداد ۱۳۹۵ ۰۸:۱۹
سلام آقا تورو خدا بگین flexbox دقیقا چجوریه؟ من یه سایت دستم هست که با فلکس باکس ساخته شده و من باید یه عالمتغییرش بدم.چطور به کدهاش دسترسی داشته باشم؟ اگه خودم بخوام یه سایت با فلکس باکس بسازم باید از کجا شروع کنم؟ مث وردپرسه؟ یعنی یه cms هست؟
flexbox یکی از قابلت‌های css هستش، باید css3 رو کار کنید کلا مفهومش اصلا با وردپرس و cms متفاوته
یه سری هم به سایت flexboxfroggy.com/ بزنید که به شکل خیلی ساده flexbox رو آموزش میده
ارسال پاسخ نجمه
نجمه
سه شنبه ۲۶ مرداد ۱۳۹۵ ۰۸:۱۹
سلام آقا تورو خدا بگین flexbox دقیقا چجوریه؟ من یه سایت دستم هست که با فلکس باکس ساخته شده و من باید یه عالمتغییرش بدم.چطور به کدهاش دسترسی داشته باشم؟ اگه خودم بخوام یه سایت با فلکس باکس بسازم باید از کجا شروع کنم؟ مث وردپرسه؟ یعنی یه cms هست؟