بگذارید ابتدا این را بگویم: flexbox آسان است. چه به خاطر مسائل مربوط به پذیرش زودهنگام باشد، چه به این دلیل که ما یاد گرفته‌ایم که به صورت شناور و بلوک فکر کنیم، اغلب از طراحان وب می‌شنوم که فکر می‌کنند Flexbox برای پیاده‌سازی پیچیده است. اما تکرار می کنم: flexbox است آسان

یک ترفند برای درک flexbox وجود دارد که من به شما آموزش خواهم داد و بعد از آن همه چیز مشخص خواهد شد. اما ابتدا می خواهم در مورد چیستی flexbox صحبت کنم.

فلکس باکس چیست؟

فلکس باکس (یا ماژول طرح بندی جعبه انعطاف پذیر برای دادن نام صحیح آن) مجموعه‌ای از ویژگی‌های CSS است که ترکیب می‌شوند و محتوا را به روشی واکنش‌گرا تنظیم می‌کنند.

Flexbox اولین تکنیک چیدمان CSS است که برای وب مدرن کار می کند. منصفانه است که بگوییم تا زمانی که flexbox پشتیبانی نمی شد، هیچ تکنیک طرح بندی وجود نداشت که با طراحی وب واکنش گرا به خوبی کار کند.

هک های زیادی در اطراف شناور بوده اند، مانند تنظیم عناصر نمایشگر: inline-block و به آنها اجازه می دهد تا بسته بندی شوند. اما این موضوع تعدادی از مشکلات را برای سایت های انعطاف پذیر ایجاد کرد، از جمله عدم کنترل و ضربه.روی اثر تغییر اندازه عناصر به همین دلیل، بسیاری از وب سایت های واکنش گرا هنوز از جاوا اسکریپت برای موقعیت یابی محتوا استفاده می کنند.

فلکس باکس برای چیست؟

Flexbox توسط W3C توصیف شده است که برای چیدمان عناصر UI در نظر گرفته شده است – چیزهایی مانند آیتم های منو – برای چیدمان صفحات کامل در نظر گرفته نشده است.

دلیل اینکه برای چیدمان کل صفحات در نظر گرفته نشده است، این است که flexbox دارای یک ماژول CSS همراه است. ماژول طرح بندی شبکه که برای چیدمان در نظر گرفته شده است. طرح شبکه مناسب ترین تکنیک برای فول در نظر گرفته می شود page طرح بندی ها متأسفانه در حال حاضر پشتیبانی بسیار محدودی از شبکه وجود دارد، و منظور من از “محدود” “هیچ” است. حتی آخرین نسخه کروم نیز بدون پرچم از آن پشتیبانی نمی کند.

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

اجزای یک ظاهر طراحی شده

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

وقتی نوبت به چیدمان می‌رسد، به ندرت نیاز داریم که یک مورد را در موقعیت مکانی قرار دهیم – اگر قصد انجام این کار را داریم، بهتر است از موقعیت‌یابی استفاده کنیم. Flexbox زمانی بهترین عملکرد را دارد که روش ارتباط گروه‌هایی از عناصر با یکدیگر را کنترل کند.

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

به این ترتیب، مشخصات flexbox به دو بخش تقسیم می‌شود، یک مجموعه از ویژگی‌ها که به آن اشاره دارد container عنصر، و مجموعه ای از خواص که به عناصر درون اشاره دارد.

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

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

خوشبختانه، با اضافه شدن برخی از پیشوندهای مرورگر برای مرورگرهای قدیمی، اکنون می توانیم به آن اعتماد کنیم روی آی تی. مطابق با caniuse.com، از مرورگرهای رایج فعلی فقط IE9 برای ما مشکل ایجاد می کند.

خوشبختانه، مانند تمام CSS ها، اگر flexbox از کار بیفتد، بی سر و صدا از کار می افتد. به این معنی که IE9 آن را نادیده می گیرد.

نسخه های فلکس باکس

به لطف عدم همکاری خیره‌کننده بین شاخه‌های مختلف کمیته‌ها و شرکت‌ها، پیاده‌سازی flexbox تقریباً با هرج و مرج اوایل دهه 00 رقابت می‌کند، زمانی که هر مرورگر منفرد هر ویژگی را به‌طور منحصربه‌فرد و به طور نادرست در همان زمان پیاده‌سازی می‌کرد. سه پیاده‌سازی flexbox با توجه به شک و تردید، به سادگی یک رویکرد تکراری بود که منجر به مفیدترین راه‌حل رایج شده است.

سه نسخه از نحو فلکس باکس وجود دارد که باید از آنها آگاه باشید: قدیمی، بین‌بین و جدید. مرورگرهای مختلف از سینتکس های مختلف پشتیبانی می کنند، برای مثال IE10 از syntax inbetween پشتیبانی می کند.

درست مانند پیشوندهای مرورگر، نحو Flexbox را از قدیمی‌ترین به جدیدترین می‌نویسیم، به طوری که جدیدترین نحو پشتیبانی‌شده، دستورات قدیمی‌تر را لغو می‌کند.

مثلاً می نویسیم نمایش: فلکس مانند:

display:-webkit-box; /*old prefixed for webkit*/
display:-moz-box; /*old prefixed for mozilla*/
display:-ms-flexbox; /*inbetween prefixed for ie*/
display:-webkit-flex; /*new prefixed for webkit*/
display:flex; /*new*/

به منظور شفافیت، من قصد ندارم به نحوهای قدیمی تر بپردازم، یا در مورد شایستگی های پیش پردازنده، پس پردازشگر، و اسکریپت های تبدیل مختلف بحث کنم. در تمام مثال‌هایم از نحو صحیح و جدید استفاده خواهم کرد.

وقتی نوبت به کد تولید می‌رسد، از یک سری میکس‌های Sass برای گسترش پشتیبانی از flexbox به مرورگرهای قدیمی‌تر استفاده می‌کنم.

عالی وجود دارد Sass mixin اینجا، که می توانید از آن برای جلوگیری از نفخ شدن کد خود استفاده کنید یا نحو قدیمی را استخراج کنید.

راز درک فلکس باکس

راز فلکس باکس این است که اصلا یک جعبه نیست. تا به حال، تمام طرح روی وب از یک سیستم دکارتی x و y برای ترسیم نقاط استفاده کرد. در مقابل، Flexbox یک بردار است.

عالی به نظر می رسد، درست است؟ Flexbox یک بردار است، یعنی ما یک طول و یک زاویه را تعریف می کنیم. ما می توانیم زاویه را تغییر دهیم، بدون اینکه بر طول تأثیر بگذاریم. و ما می توانیم طول را تغییر دهیم، بدون اینکه بر زاویه تأثیر بگذاریم.

این رویکرد جدید به این معنی است که برخی از اصطلاحات فلکس باکس در ابتدا پیچیده است. به عنوان مثال، وقتی موارد را در بالای یک فلکس تراز می کنیم container، ما استفاده می کنیم فلکس استارت، نه بالا– زیرا اگر جهت را تغییر دهیم، فلکس شروع همچنان اعمال خواهد شد، اما بالا نخواهد.

هنگامی که این رویکرد را درک کردید، بسیاری از flexbox ابهام زدایی می کنند.

روش استفاده از ظروف فلکس باکس

نحو Flexbox به دو گروه تقسیم می شود: آن دسته از ویژگی هایی که کنترل می کنند containerو خواصی که کنترل می کنند containerنوادگان مستقیم اولی مفیدترین است، بنابراین بیایید از آنجا شروع کنیم.

شروع شدن

فرض کنید می‌خواهیم آیتم‌ها را در یک بلوک فاصله بگذاریم. ما می خواهیم آنها به طور مساوی فاصله داشته باشند. استفاده از flexbox واقعا آسان است. اولین چیزی که به آن نیاز داریم مقداری نشانه گذاری برای آزمایش این است روی:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Flexbox Layout</title>
 
 <style>
 
 .house {
 background:#FF5651;
 }
 
 .room {
 background:#00AAF2;
 width:90px;
 height:90px;
 }
 
 </style>
 
 </head>
 
 <body>
 
 <div class="house">
 <div class="room kitchen"></div>
 <div class="room washroom"></div>
 <div class="room lounge"></div>
 <div class="room bedroom"></div>
 <div class="room bedroom"></div>
 </div>
 
 </body>
 </html>

این یک HTML ساده است page، با یک خانه div، که شامل پنج است اتاق div هایی که هر کدام دارای یک کلاس هستند که عملکرد آنها را مشخص می کند، آشپزخانه، دستشویی، سالن، و اتاق خواب.

کاری که ما می خواهیم انجام دهیم این است که تنظیم کنیم خانه فلکس باکس بودن container. هر ویژگی flexbox را که تنظیم می کنیم روی خانه سپس برای فرزندانش اعمال خواهد شد ( اتاقs).

ایجاد یک جعبه انعطاف پذیر

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

اعلام خانه به عنوان یک فلکس باکس container ما از کد زیر استفاده می کنیم:

.house {
background:#FF5651;
display:flex;
}

و بس. ما یک جعبه انعطاف پذیر ایجاد کرده ایم. تنها کاری که اکنون باید انجام دهیم این است که به flexbox بگوییم چگونه طرح بندی را انجام دهیم اتاقس ما می توانیم این کار را با استفاده از توجیه-محتوا ویژگی.

توجیه-محتوا دارای پنج مقدار ممکن است: مرکز، فلکس-شروع، خم-انتها، فضای اطراف، و فضای بین این آیتم‌ها را در مرکز قرار می‌دهند، آنها را در ابتدا (که در بالا یا چپ است، همانطور که در زیر بحث خواهیم کرد)، انتهای (که پایین یا سمت راست است)، آنها را با فضای مساوی در اطراف هر مورد قرار می‌دهند، یا با فضای مساوی بین هر آیتم به ترتیب

ما از فضای اطراف استفاده خواهیم کرد:

.house {
background:#FF5651;
display:flex;
justify-content: space-around;
}

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

من در مورد شما مطمئن نیستم، اما دستشویی خانه من کمی کوچکتر از سالن است، و با اینکه آشپزخانه کوچکی دارم، دوست دارم یک آشپزخانه بزرگتر داشته باشم. بنابراین بیایید برخی از موارد اضافه شده را به کد خود اضافه کنیم تا منعکس شود:

.kitchen {
width:300px;
height:300px;
}

.washroom {
width:45px;
height:60px;
}

اتاق های ما هنوز هم فاصله دارند. حتی اگر اندازه را تغییر دادیم. Flexbox در سازماندهی محتوا فوق العاده است.

تغییر زاویه

همانطور که در بالا بحث کردیم، یکی از دلایلی که flexbox برای طراحان بسیار خوب کار می کند این است که به عنوان یک برداری توصیف می شود. در حال حاضر، flexbox تنها از چهار زاویه 0، 90، 180 و 270 درجه پشتیبانی می کند. بنابراین بسیار ساده تر است که آنها را به عنوان یک محور در نظر بگیریم.

برای تغییر محور از عبارت استفاده می کنیم جهت انعطاف پذیری ویژگی، که دارای چهار مقدار ممکن است: ردیف (به طور پیش فرض – همانطور که در مثال های بالا می بینید، اتاق های ما از چپ به راست چیده شده اند) ردیف معکوس، ستون، و ستون معکوس

اگر تغییر دهیم جهت انعطاف پذیری به ستون، خواهید دید که اتاق ها اکنون به صورت عمودی، از بالا به پایین چیده شده اند:

.house {
background:#FF5651;
display:flex;
justify-content: space-around;
flex-direction:column;
}

همانطور که مطمئن هستم می توانید حدس بزنید، ردیف معکوس و ستون معکوس ترتیب اقلام موجود در فلکس خود را معکوس کنید container.

Flex در مقابل Flex-inline

در مثال آخر متوجه خواهید شد که در حالی که خانه تا امتداد درگاه دید کشیده می‌شود، حتی زمانی که روی آن تنظیم شده باشد، تا ارتفاع کامل کشیده می‌شود جهت انعطاف پذیر: ستون.

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

فقط به عنوان نمایش: بلوک یک همراه دارد نمایش: بلوک درون خطی، بنابراین به نمایشگر: فلکس دارد نمایشگر: inline-flex.

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

تراز متقابل محوری

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

اما flexbox همچنین به ما امکان می دهد موقعیت را در امتداد محور ثانویه مخالف کنترل کنیم.

موقعیت روی محور ثانویه توسط تراز کردن آیتم ها ویژگی؛ دارای پنج مقدار ممکن است: خط پایه، مرکز، خمیدگی انتهایی، فلکس-شروع، و کش آمدن.

خط پایه به طور معمول مفیدترین گزینه خواهد بود. این اطمینان را ایجاد می کند که خطوط پایه متن در یک راستا قرار گیرند. برای آزمایش این، باید تغییراتی در فایل HTML خود ایجاد کنیم:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Flexbox Layout</title>
 <link href="https://fonts.googleapis.com/css؟family=Open+Sans" rel="stylesheet" type="text/css">
 <style>
 
 body
 {
 font-family: 'Open Sans', sans-serif;
 color:#FFFFFF;
 }
 
 .house {
 background:#FF5651;
 display:flex;
 justify-content: space-around;
 }
 
 .room {
 background:#00AAF2;
 width:90px;
 height:90px;
 }
 
 .kitchen {
 width:300px;
 height:300px;
 font-size:3em;
 }
 
 .washroom {
 width:60px;
 height:60px;
 
 font-size:0.4em;
 }
 
 </style>
 </head>
 <body>
 
 <div class="house">
 <div class="room kitchen">Kitchen</div>
 <div class="room washroom">Washroom</div>
 <div class="room lounge">Lounge</div>
 <div class="room bedroom">Bedroom</div>
 <div class="room bedroom">Bedroom</div>
 </div>
 
 </body>
 </html>

خواهید دید که من مقداری متن اضافه کرده‌ام، وارد کرده‌ام، سپس یک فونت Google اعمال کرده‌ام. من هم عوض کردم اندازه فونت در آشپزخانه و دستشویی بنابراین یک تمایز واضح وجود دارد.

هنگامی که ما تنظیم می کنیم تراز کردن آیتم ها دارایی به خط پایه خواهید دید که خط پایه متن مطابقت دارد.

.house {
background:#FF5651;
display:flex;
justify-content:space-around;
align-items:baseline;
}

align-items:center تراز مرکزی، یا به صورت عمودی (اگر جهت انعطاف پذیر: ردیف، یا جهت انعطاف پذیر: ردیف معکوس) یا افقی (اگر جهت انعطاف پذیر: ستون، یا جهت انعطاف پذیر: ستون- معکوس).

align-items:flex-start به بالا تراز می شود، و align-items:flex-end به پایین تراز می شود (اگر جهت انعطاف پذیر: ردیف، یا جهت انعطاف پذیر: ردیف معکوس، یا به چپ و راست (اگر جهت انعطاف پذیر: ستون، یا جهت انعطاف پذیر: ستون- معکوس).

کش آمدن، یکی دیگر از گزینه های بسیار مفید است. کش آمدن اندازه آیتم‌ها را تغییر می‌دهد، به طوری که ارتفاع هر کدام یکسان باشد (رشد می‌شوند، نه کوچک می‌شوند).

در نمونه‌های دیگرمان، ما به صراحت ارتفاع موارد را تنظیم کرده‌ایم که برای نادیده گرفتن flexbox کافی است، بنابراین برای مشاهده align-items:کشش درست کار کند، باید آن را حذف کنید ارتفاع از همه کلاس ها به جز یک.

پیچیدن روی خطوط متعدد

تاکنون از flexbox برای چیدمان عناصر استفاده کرده‌ایم تا اندازه آنها در سراسر فضا تغییر کند، اما چه اتفاقی می‌افتد وقتی محتوای آیتم‌ها بیش از حد بزرگ باشد که در یک خط قرار نگیرد؟

برای نمایش این، می‌خواهم اندازه اتاق‌هایم را افزایش دهم:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Flexbox Layout</title>
 <link href="https://fonts.googleapis.com/css؟family=Open+Sans" rel="stylesheet" type="text/css">
 <style>
 
 body
 {
 font-family: 'Open Sans', sans-serif;
 color:#FFFFFF;
 }
 
 .house {
 background:#FF5651;
 display:flex;
 justify-content:space-around;
 align-items:baseline;
 }
 
 .room {
 background:#00AAF2;
 width:180px;
 height:90px;
 font-size:1.5em;
 }
 
 .kitchen {
 width:450px;
 height:300px;
 font-size:4.5em;
 }
 
 .washroom {
 width:120px;
 height:60px;
 font-size:0.6em;
 }
 
 </style>
 </head>
 <body>
 
 <div class="house">
 <div class="room kitchen">Kitchen</div>
 <div class="room washroom">Washroom</div>
 <div class="room lounge">Lounge</div>
 <div class="room bedroom">Bedroom</div>
 <div class="room bedroom">Bedroom</div>
 </div>
 
 </body>
 </html>

اگر پنجره مرورگر خود را کوچک کنید، خواهید دید که محتوا قطع می شود، زیرا فضایی برای آن وجود ندارد. خوشبختانه flexbox a را تعریف می کند بسته بندی انعطاف پذیر ویژگی فقط برای این احتمال، که دارای سه مقدار ممکن است: بدون بسته بندی (به طور پیش فرض)، بسته بندی کردن، و بسته بندی معکوس.

بسته بندی کردن باعث هر آیتمی می شود که فراتر از آن باشد container برای قرار دادن روی خط بعدی، درست همانطور که یک خط متن پیچیده می شود.

.house {
background:#FF5651;
display:flex;
justify-content:space-around;
align-items:baseline;
flex-wrap:wrap;
}

اگر مرورگر خود را پایین بیاورید، اکنون می‌بینید که موارد در خطوط جدیدی قرار می‌گیرند. توجه کنید که چگونه align-itms:baseline اموال هنوز اعمال می شود؟ قدرت واقعی Flexbox در ترکیب خواص آن است.

یک مفهوم مهم که بعداً به آن خواهم پرداخت، این است flex-wrap: wrap-reverse ترتیب اقلام را معکوس نمی کند، باعث ایجاد مواردی می شود که فراتر از آن باشد container برای پیچیدن روی خط قبلی

استفاده از ویژگی های مختصر flexbox

مانند بسیاری از ویژگی‌های CSS، برخی از ویژگی‌های flexbox نسخه‌های کوتاه‌نویسی دارند که توسط سازنده‌های مرورگر به‌طور مداوم پیاده‌سازی می‌شوند.

این فلکس جریان اموال مختصر است جهت انعطاف پذیری و بسته بندی انعطاف پذیر خواص بنابراین به جای نوشتن:

flex-direction:row-reverse;
flex-wrap:wrap;

می توانیم از کوتاه نویسی استفاده کنیم:

flex-flow:row-reverse wrap;

تراز محوری (قسمت 2)

در بالا، ما از تراز کردن آیتم ها ویژگی برای تراز کردن آیتم ها با موارد پایه، موقعیت و کشش. همانطور که در آخرین مثال می بینید، این هنوز هم رخ می دهد، اما رخ می دهد روی یک خط به خط.

وقتی اقلام ما بسته بندی شدند، این گزینه را داریم که روش چیدمان آنها را تنظیم کنیم روی محور ثانویه اگر container بزرگتر از نیاز است.

.house {
background:#FF5651;
min-height:1200px;
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}

اکنون می توانیم از تراز کردن محتوا ویژگی برای قرار دادن موارد در سراسر محور ثانویه کامل.

این تراز کردن محتوا ملک دارای شش تنظیم است: مرکز، خمیدگی انتهایی، شروع خمشی، فضای اطراف، فاصله بین، و کش آمدن. این مقادیر همان نتایج را در جاهای دیگر ارائه می‌دهند: مرکز کردن، تراز کردن به یک انتها، فاصله یکنواخت یا کشش.

روش استفاده از اقلام فلکس باکس

تا به حال، تمام ویژگی هایی که ما به آنها نگاه کرده ایم تنظیم شده اند روی را container عنصر به منظور تنظیم دقیق موارد، flexbox تعدادی ویژگی را نیز در اختیار ما قرار می دهد که می توان آنها را تنظیم کرد روی آیتم های فردی

برای روشن شدن این موضوع، اجازه دهید برخی از کدهای خود را حذف کنیم:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Flexbox Layout</title>
 <link href="https://fonts.googleapis.com/css؟family=Open+Sans" rel="stylesheet" type="text/css">
 <style>
 
 body
 {
 font-family: 'Open Sans', sans-serif;
 color:#FFFFFF;
 }
 
 .house {
 background:#FF5651;
 
 display:flex;
 
 }
 
 .room {
 background:#00AAF2;
 height:90px;
 }
 
 .kitchen {
 height:300px;
 }
 
 .washroom {
 height:60px;
 }
 
 </style>
 </head>
 <body>
 
 <div class="house">
 <div class="room kitchen">Kitchen</div>
 <div class="room washroom">Washroom</div>
 <div class="room lounge">Lounge</div>
 <div class="room bedroom">Master Bedroom</div>
 <div class="room bedroom">Bedroom</div>
 </div>
 
 </body>
 </html>

کنترل اقلام فردی

اولین ویژگی آیتم flexbox نامی گیج کننده است خم شدن ویژگی. خم شدن یک ارزش از است نمایش دادن ویژگی روی را container، بلکه در نوع خود یک ملک است.

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

این فلکس رشد ویژگی به آیتم ها می گوید که در صورت نیاز می توانند بزرگ شوند تا اقلام عرض (برای جهت انعطاف پذیر: ردیف) و ارتفاع (برای جهت انعطاف پذیر: ستون) به طور کامل.

این فلکس رشد دارایی یک نسبت می گیرد. بنابراین اگر ما تنظیم کنیم فلکس رشد دارایی به 1، همه موارد ما به یک اندازه خواهند بود.

.room {
background:#00AAF2;
height:90px;
flex-grow:1;
}

علاوه بر گرفتن اندازه مساوی، می توانیم نسبت های مختلفی را نیز تعیین کنیم. من هنوز می خواهم آشپزخانه ام بزرگتر از دستشویی من باشد، پس بیایید آن را درست کنیم.

.kitchen {
height:300px;
flex-grow:2;
}

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

اگر اندازه مرورگر را تغییر دهید، آن را در اندازه های مختلف خواهید دید آشپزخانه دقیقاً دو برابر عرض دیگری نیست اتاقس که به دلیل مبتنی بر انعطاف پذیری ویژگی.

مبتنی بر انعطاف پذیری تعیین می کند که چگونه فلکس رشد و انعطاف پذیر خواص محاسبه می شود. دارای 2 مقدار است: خودکار (پیش فرض)، و 0.

اگر تنظیم شود 0، کل مورد در نظر گرفته شده است. اگر تنظیم شود خودکار این بالشتک اطراف محتوای آیتم است که اندازه آن تغییر می کند. به عبارت دیگر، 0 اندازه محتوای مورد را هنگام محاسبه نادیده می گیرد و خودکار آن را در نظر می گیرد. یک وجود دارد نمودار مفید ارائه شده توسط W3C که این را توضیح می دهد.

flex-base: 0 اگر بخواهید بین اقلام بدون توجه به محتوای آنها به طور مساوی فاصله بیندازید بسیار مفید است.

همانطور که در بالا گفته شد، خم شدن ویژگی مختصر این ویژگی ها است، و خواهید دید که مطمئن ترین راه برای تنظیم این مقادیر است.

ترتیب ارزش ها است flex-grow، flex-shrink، flex-bases. بنابراین، برای تعیین مقدار رشد 2، مقدار کوچک شدن 1 و مبنای 0، باید از موارد زیر استفاده کنید:

.room {
background:#00AAF2;
height:90px;
flex: 2 1 0;
}

کنترل سفارش با فلکس باکس

یکی از بهترین ویژگی های فلکس باکس، توانایی آن در تغییر ترتیب اقلام است، بدون اینکه روی نشانه گذاری تأثیر بگذارد. این به ویژه برای دسترسی مفید است، زیرا به ما اجازه می دهد تا نشانه گذاری مناسب را کدنویسی کنیم، و سپس آن را به صورت بهینه نمایش دهیم.

برای این کار از آیتم استفاده می کنیم سفارش ویژگی.

با نگاهی به مثال ما، دستشویی درست در کنار آشپزخانه قرار دارد. ترجیح می‌دهم کنار اتاق‌خواب‌ها باشد، بنابراین می‌توانم مستقیماً به حمام صبحگاهی بروم، پس بیایید آن را جابه‌جا کنیم. در حال حاضر دومین مورد است، ما می خواهیم سومین مورد باشد. بنابراین ما آن را تنظیم کردیم سفارش دارایی بر این اساس

.washroom {
height:60px;
order:2;
}

ببینید چطور تا آخر ردیف پرید؟ کنار اتاق خواب هاست، اما نه آنطور که ما در نظر داشتیم. این یک مشکل بزرگ در flexbox است، زیرا بسیاری از توسعه دهندگان (از جمله خودم) در ابتدا انتظار دارند سفارش مانند یک آرایه عمل کند.

سفارش در واقع مانند CSS کار می کند z-index، به این معنی که اگر به صراحت یک را تنظیم نکنید سفارش برای یک آیتم فرض می شود که از لحاظ ترتیبی کمتر از آیتمی است که مقداری برای آن به صراحت تعیین شده است.

ما از دستشویی می خواهیم swap با سالن، تنها موارد دیگری که نیاز به یک سفارش هستند اتاق خوابس

.washroom {
height:60px;
order:2;
}
 
.bedroom {
order:3;
}

توجه کنید که چگونه هر دو اتاق خوابهمان شماره سفارش را به اشتراک می گذارید؟ در چنین مواردی، مرورگر به عقب باز می گردد روی سفارش DOM

شکستن تراز

خاصیت مورد نهایی است خود تراز کردن برای تغییر تراز آیتم استفاده می شود روی محور ثانویه تراز کردن آیتم ها برای تراز کردن همه موارد استفاده می‌شود، و این ویژگی به شما این امکان را می‌دهد که از آن تنظیمات عمومی انصراف دهید.

همان پنج مقدار را به عنوان ویژگی معادل می گیرد روی را container: خط پایه، مرکز، خمیدگی انتهایی، فلکس-شروع، و کش آمدن.

.washroom {
height:60px;
order:2;
align-self:flex-end;
}

چیدمان وب مدرن با فلکس باکس

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

برای نشان دادن، ما یک مورد ساده را گرد هم می آوریم page که از برخی از تکنیک های شرح داده شده در بالا استفاده می کند.

شروع شدن

ابتدا نشانه گذاری ما و برخی از سبک های اساسی برای آن است page.

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
 <title>Flexbox Demo</title>
 <link href="https://fonts.googleapis.com/css؟family=Open+Sans" rel="stylesheet" type="text/css">
 <style>
 
 body {
 margin:0 2em;
 font-family: 'Open Sans', sans-serif;
 } 
 
 a {
 text-decoration:none;
 }
 
 #header > a {
 padding:1em 0;
 }
 
 #header > .logo {
 font-size:2.4em;
 }
 
 ul {
 /* remove list styling */
 list-style: none;
 margin:0;
 padding:0;
 }
</style>
</head>
 <body>
 
 <div id="page">
 
 <ul id="news">
 <li class="newsItem">A</li>
 <li class="newsItem">B</li>
 <li class="newsItem">C</li>
 <li class="newsItem">D</li>
 <li class="newsItem">E</li>
 <li class="newsItem">F</li>
 <li class="newsItem">G</li>
 </ul>
 
 <nav id="header">
 <a class="logo" href="#">Logo</a>
 <a href="#">Ultricies</a>
 <a href="#">Ridiculus</a>
 <a href="#">Condimentum</a>
 </nav>
 
 <nav id="footer">
 <a class="logo" href="#">Logo</a>
 <p>Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 <ul>
 <li><a href="#">Elit Sem</a></li>
 <li><a href="#">Condimentum</a></li>
 <li><a href="#">Parturient</a></li>
 <li><a href="#">Vestibulum</a></li>
 </ul>
 </nav>
 </div>
 </body>
 </html>

من یک div با id دارم page. داخل page من یک لیست نامرتب از اخبار دارم. به دنبال اخبار من است سرتیتر، که در زیر محتوای خبری به نفع دسترسی است. در نهایت، من یک پاورقی

تغییر ترتیب محتوا

اولین کاری که می خواهم انجام دهم این است که آن را جابجا کنم سرتیتر تا بالای page. برای انجام این کار، تنظیم می کنیم page فلکس باکس بودن container. سپس جهت را تنظیم می کنیم ستون سپس به هر یک از آنها سفارش بدهید pageعناصر کودک

#page {
display:flex;
}
#page {
display:flex;
flex-flow:column;
}
#header {
order:1;
}
 
#news {
order:2;
}
 
#footer {
order:3;
}

ظروف فلکس باکس تودرتو

مرحله بعدی چیدمان سرتیتر. عناصر کودک در ظروف فلکس باکس می توانند به تنهایی ظروف فلکس باکس باشند، بنابراین ما می توانیم از فلکس باکس برای ایجاد فاصله یکنواخت در آن استفاده کنیم. سرتیتر عناصر.

بیایید تنظیم کنیم سرتیتر فلکس باکس بودن container، سپس بیایید محتوا را به طور یکنواخت و بدون بالشتک اضافی در کناره ها قرار دهیم و در نهایت مطمئن شویم که آیتم های منو هستند روی همان پایه لوگو.

#header {
order:1;
display:flex;
justify-content:space-between;
align-items:baseline;
}

بسته بندی محتوای پیچیده

اقلام خبری ما قرار است محل‌هایی برای داستان‌های ویژه باشند، بنابراین باید اندازه قابل توجهی داشته باشند تا جایی برای متن، تصویر یا ویدیو ایجاد کنند. بنابراین ما به آنها نیاز داریم که بسته بندی شوند.

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

#news {
order:2;
display:flex;
}

.newsItem {
min-width:300px;
min-height:250px;
background:#79797B;
border:1px solid #706667;
}

حالا باید تنظیم کنیم اخبار container برای بسته بندی، و آیتم خبریs برای پر کردن فضای موجود گسترش یابد.

#news {
order:2;
display:flex;
flex-flow:row wrap;
}

چالشی که اکنون داریم این است که وقتی آیتم خبریs به طور مساوی توزیع نشده اند، بزرگترین مورد (G) در پایین است. در اکثر سایت‌ها، ما می‌خواهیم بیشترین فضا را به بالاترین محتوا اختصاص دهیم. ما می توانیم با تنظیم wrap این مشکل را برطرف کنیم بسته بندی معکوس.

#news {
order:2;
display:flex;
flex-flow:row wrap-reverse;
}

این آیتم ها را دوباره سفارش می دهد، اما با خواندن از بالا سمت چپ، اکنون از کار افتاده اند. بنابراین باید با تنظیم جهت، ترتیب را معکوس کنیم ردیف معکوس

#news {
order:2;
display:flex;
flex-flow:row-reverse wrap-reverse;
}

که موارد را به ترتیب متوالی، خواندن از چپ به راست، از بالا به پایین قرار می دهد. با اقلام بزرگتر همیشه در بالا. اما من نمی‌خواهم ترتیب داستان‌ها را در نشانه‌گذاری خود تغییر دهم تا مورد A را مجبور کنم قبل از مورد B قرار گیرد. بنابراین آخرین کاری که باید انجام دهم این است که ترتیب آیتم‌ها را تغییر دهم.

.newsItem:nth-of-type(7) {
order:1;
}
.newsItem:nth-of-type(6) {
order:2;
}
.newsItem:nth-of-type(5) {
order:3;
}
.newsItem:nth-of-type(4) {
order:4;
}
.newsItem:nth-of-type(3) {
order:5;
}
.newsItem:nth-of-type(2) {
order:6;
}
.newsItem:nth-of-type(1) {
order:7;
}

مخلوط کردن درخواست‌های flexbox و رسانه

آخرین عنصری که استایل داده می شود، است پاورقی ما می‌خواهیم آن را درست کنیم، بسیار شبیه به سرتیتر، اما چون پاورقی فقط سه عنصر فرزند دارد (در مقایسه با سرتیتر‘s چهار) ما می خواهیم پاراگراف را دو برابر پهنای آرم و فهرست تنظیم کنیم.

#footer {
order:3;
display:flex;
align-items:baseline;
flex-direction:row;
}
 
#footer > * {
flex:1;
}
 
#footer > p {
flex:2;
padding-right:2em;
}

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

#footer {
order:3;
display:flex;
align-items:baseline;
flex-direction:column;
padding:2em 0;
}
 
#footer > * {
flex:1;
}
 
#footer > p {
flex:2;
}
 
@media only screen and (min-width:600px) {

#footer {
flex-direction:row;
padding:0;
}
 
#footer > p {
margin-right:2em;
}
}

نتیجه

و شما آن را دارید. یک رویکرد مدرن برای چیدمان محتوا روی یک وب page، که به طور گسترده پشتیبانی می شود و پیاده سازی آن آسان است.

قدرت flexbox در این است که ویژگی‌های آن را می‌توان ترکیب کرد تا با ساده‌ترین نحو ممکن، کنترل دقیقی بر طرح‌بندی‌هایمان به ما بدهد.