اگه در حال یادگیری طراحی وبسایت هستید حتما اسم flexbox , grid به گوشتون خورده و حتی شاید هم با اونها کار کرده باشید اما اگر هیچ ایده ای درباره اینکه این دو چی هستند و چرا از اونها استفاده میکنیم ندارید حتما تا اخر این پست با من همراه باشید.
اولین نکته ای که باید به اون اشاره کنیم طراحی layout یک وبسایت است . layout به معنی طرز چینش المنت ها درون یک وبسایت است که برنامه نویسان قبلا از position ها و clear & float استفاده میکردند که مشکلات زیادی را به همراه داشت و طراحی را برای اونها به شدت دشوار میکرد.
اما الان با اومدن ماژول های جدید و اضافه شدن flexbox , gird به css3 طراحی layout یک صفحه وب برای برنامه نویسان به شدت آسان تر و حتی لذت بخش تر شده .
به این صورت که برای چینش های تک بعدی (one dimension) از flexbox و از gird برای چینش های دوبعدی (two dimension) استفاده میشه .
اگه بخوام که به زبان ساده توضیح بدم در flexbox ما یک column رو به چندین row و همون row رو به چندین column تقسیم بندی میکنیم . برای همینه که برای طراحی و چنیش تک بعدی خیلی خوبه .
خب الان که با flexbox اشنا شدیم و دید کلی نسبت به اون پیدا کردیم بهتره یکم با جزییات بیشتر اون رو بررسی کنیم .
اگه بخواهیم با flexbox المنت های شکل بالا را کنار هم بچینیم :
حاشیه طلایی دور جعبه ها -> container و مربع های رنگی -> المنت های ما هستند. در بالا به این نکته اشاره کردیم که flexbox برای طراحی تک بعدی مناسب است پس باید با استفاده از row , column المنت ها را تقسیم بندی کنیم.
مستطیل زرد رنگ بالا را یک row01 در نظر میگیریم و تمام مستطیل و مربع های دیگر را درون container فرضی row02 در نظر میگریم .
وrow 02 را به دو column دیگر تقسیم بندی میکنیم به این صورت که مربع ابی رنگ سمت چپ درون یک container فرضی به اسم column 02_01 و تمامی سه مستطیل باقی ماده درون container به اسم column 02_02 .
و الان column02_02 را دوباره به دو سطر دیگر تقسیم بندی میکنیم به این صورت که مستطیل سبز و نارنجی رنگ درون یک container به نام row 02_02_01 قرار میگیرند و مستطیل قرمز رنگ درون row 02_02_02 قرار میگیرد
و در نهایت row02_02_01 را هم به دو column دیگر تقسیم بندی میکنیم .
مهم ترین نکته در خصوص توضیحات بالا این است که هر column یا هر row متواند همزمان item یک container بزگتر از خودش باشد و یا container چندین item کوچک تر از خودش باشد .
و نکته دوم اینکه ما نمیتوانیم در flexbox به صورت همزمان چندین row , column داشته باشیم .
در این مقاله هدف صرفا آشنایی شما با دو ماژول مهم css3 یعنی flexbox , grid بود و در مقاله ای دیگر حتما با این دو بیشتر اشنا خواهیم شد .
امیدوارم که از مطالعه این مقاله لذت برده باشید .
