آموزش CSS Flexbox : آموزش مبانی طراحی وب

stansuperjunior

2 سال پیش

آموزش CSS Flexbox

با شیوه نامه های آبشاری (CSS)، وب سایت ها را می توان طوری طراحی کرد که جذاب تر به نظر برسند. در حالی که HTML فقط شامل مهمترین عناصر پایه است، می توان طراحی وب پیچیده را از طریق CSS با درج تصاویر به شیوه ای جذاب تر، ترتیب متون و یکپارچه سازی عناصر برجسته در یک وب سایت پیاده سازی کرد. زبان نشانه گذاری مفید برای کمک به ساده سازی وظایف طراحی وب و ارائه گزینه های طراحی جدید به توسعه خود ادامه می دهد. CSS Flexbox یک نمونه از این توسعه مداوم است و به سرعت به ابزار مهمی برای طراحی وب معقول در عصر موبایل تبدیل شده است.

بیشتر بخوانید: ایجاد گالری عکس وب سایت : آموزش اصول طراحی وب

CSS Flexbox برای چه مواردی استفاده می شود؟

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

Flexbox (یا دقیق تر: طرح بندی CSS Flexible Box) هوشمندانه تر و پویاتر عمل می کند. طرح به صورت انعطاف پذیر و پویا با صفحه نمایش در حال استفاده تنظیم می شود. فضا پر می شود یا عناصر به هم نزدیکتر می شوند تا هر عنصر صفحه وب در معرض دید باقی بماند. برای این کار بدون اینکه چیدمان مورد نظر مختل شود، Flexbox از دو محور استفاده می کند. محور اصلی معمولاً به صورت افقی اجرا می شود. محور متقاطع به صورت عمودی اجرا می شود. با استفاده از این محورها می توان عناصر را در داخل جعبه مرتب کرد. به این ترتیب، عناصر را می توان در رابطه با یکدیگر توزیع کرد. CSS Flexbox همچنین تضمین می کند که فضای اطراف این عناصر به روشی معقول پر شده است.

آموزش CSS Flexbox : اولین گام ها با فناوری جدید

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

بیشتر بخوانید: استفاده از padding و margin در دستورات Css

اصول CSS Flexbox

Flexbox بر اساس یک ظرف (flex container) است که چندین عنصر (اقلام فلکس) در آن قرار دارد. کانتینر خواص خود را به عناصر می دهد – به عبارت دیگر، عناصر Flexbox های واقعی هستند که با قرار گرفتن در داخل ظرف انعطاف پذیری خود را حفظ می کنند.

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

آموزش CSS Flexbox : ایجاد و ترتیب عناصر

قبل از شروع به چیدمان عناصر، ابتدا باید آنها را با استفاده از HTML ایجاد کنید:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="flex-container">
  <div class="flex-item">Box 1</div>
  <div class="flex-item">Box 2</div>
  <div class="flex-item">Box 3</div> 
</div>

</body>
</html>

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

بیشتر بخوانید: حل خطای Error 404 : معنی و آموزش رفع خطای 404

با استفاده از CSS، اکنون می‌توانیم عبارات را در محور اصلی توزیع کنیم:

<style>
.flex-container {
  display: flex;
  background-color: grey;
}

.flex-item {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
</style>

ظرف در این شیوه نامه در ابتدا تعریف شد. نمایشگر: flex; دستور Flexbox را فعال می کند. عناصر از چپ به راست توزیع می شوند، زیرا ما آنها را متفاوت تعریف نکرده ایم. با این حال، برای تغییر توزیع، پنج گزینه مختلف را می توان با دستور “justify-content” تنظیم کرد:

flex-start: سمت چپ توجیه شده
flex-end: حق موجه
center: مرکز
space-around: به طور مساوی فضای اطراف جعبه ها را توزیع می کند
space-between: به طور مساوی فضای بین جعبه ها را توزیع می کند

کد باقیمانده فقط جنبه آرایشی دارد و ربطی به فلکس باکس های واقعی ندارد.

با Flexbox، CSS از یک تراز افقی سرچشمه می گیرد. با این حال، امکان چیدمان عناصر در یک ستون نیز وجود دارد. علاوه بر این، می توان جهت را معکوس کرد – از چپ به راست یا از پایین به بالا. برای این منظور از دستور flex-direction استفاده می شود:

row:چپ به راست
row-reverse:چپ به راست
column:چپ به راست
column reverse:از پایین به بالا

در همان زمان، “justify-content: flex-end;” فرمان به معنای “flex-direction: row-reverse;” نیست. با استفاده از نوع اول، یکی آخرین عنصر را در سمت راست قرار می دهد، در حالی که نوع دوم ترتیب را تغییر می دهد. بنابراین اولین عنصر در کد در سمت راست ظاهر می شود.

آموزش CSS Flexbox : گروه بندی عناصر

تا به حال، ما Flexboxes را به طور مساوی توزیع کرده ایم. با این حال، اگر ترجیح می دهید مجبور نباشید همه اشیا را به طور همزمان مدیریت کنید، می توانید عناصر را در متن HTML ادغام کنید. برای مثال، اگر متنی باید متفاوت از تصویر نمایش داده شود، مفید است:

<div class="flex-container">
  <div class="flex-item">Box 1</div>
  <div class="flex-item">
    <div class="flex-item">Box 2</div>
    <div class="flex-item">Box 3</div>
  </div>
</div>

بیشتر بخوانید: زبان برنامه نویسی C چیست ؟ + تفاوت با C++ و C#

حرکت عمودی

با استفاده از “محتوای توجیه”، عناصر را می توان در یک رابطه خاص با یکدیگر به غیر از محور افقی قرار داد. اگر کسی بخواهد محتوای خود را از بالا به پایین (روی محور متقاطع) منتقل کند، به دستور “align-item” نیاز دارد. پنج گزینه مختلف وجود دارد:

center:اشیاء در مرکز قرار می گیرند
flex-start:اشیاء در حاشیه بالا توجیه می شوند
flex-end:اشیاء در حاشیه پایین توجیه می شوند
stretch:اجسام به همان اندازه کشیده می شوند
baseline:اشیاء بر اساس خط پایه مرتب شده اند (بسته به محتوا)

به نظر می رسد هر دو گزینه “Flex-Start” و “Baseline” در نگاه اول نتیجه یکسانی دارند. این تفاوت زمانی پدیدار می شود که اشیاء تو در تو باشند. در حالی که “flex-start” فقط دو Flexbox را که در یک سطح سلسله مراتبی قرار دارند به هم مرتبط می کند، “baseline” محتوای جعبه ها را نیز در نظر می گیرد.

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: grey;
  justify-content: center;
  align-items: center;
}

.flex-item1 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
.flex-item2 {
  background-color: blue;
  width: auto;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
.flex-item3 {
  background-color: grey;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
</style>

</head>
<body>

<div class="flex-container">
  <div class="flex-item1">Box 1</div>
  <div class="flex-item2">
    <div class="flex-item3">Box a</div>
    <div class="flex-item3">Box b</div>
  </div>
  <div class="flex-item1">Box 2</div>
</div>

</body>
</html>

گسترش عمودی را نیز می توان از طریق شکست خط تحت تأثیر قرار داد. اگر کسی اشیاء زیادی را در یک ظرف بسته بندی کند، این موارد همیشه به صورت افقی اجرا می شوند تا کاربر باید اسکرول کند و صفحه واقعی ارائه شده رها شود. با “flex-wrap” می توانید اطمینان حاصل کنید که عناصر به درستی در چندین خط توزیع شده اند.

nowrap:بدون خط شکنی
wrap:خط شکستن
wrap-reverse:شکست خط (با ترتیب معکوس)

.flex-container {
  display: flex;
  background-color: grey;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap-reverse;
}

یک فلکس باکس جداگانه را جابجا کنید

تا به حال، این ترتیب همیشه در کل ظرف اعمال شده است. تمام جعبه های داخل کانتینر به دستور جهانی پایبند هستند. این کار را آسان‌تر می‌کند، اما همچنین محدود می‌کند. به همین دلیل است که CSS Flexbox این امکان را در اختیار طراحان وب قرار می دهد که با استفاده از «ترتیب» استثناها را تعریف کنند. مقدار استاندارد (اگر به طور خاص به این صورت تعریف نشده باشد) 0 است. مقدار سفارشی شی را به یک گروه انتزاعی اضافه می کند. همه عناصری که تا به حال ایجاد کرده‌ایم متعلق به یک گروه هستند، زیرا همه دارای مقدار 0 هستند. با توجه به این مقدار، تنها می‌توان اشیاء را به جلو (-1) یا عقب (1) حرکت داد.

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: grey;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flex-item1 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
.flex-item2 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  order: -1;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item1">Box 1</div>
  <div class="flex-item2">Box 2 </div>
  <div class="flex-item1">Box 3</div>

</div>

</body>
</html>

اندازه عناصر انعطاف پذیر

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

.flex-container {
  display: flex;
  background-color: grey;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flex-item1 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
.flex-item2 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  flex: 1;
}

با “flex” در واقع از یک شکل مختصر استفاده می شود. این دستور فقط شامل سه پیکربندی است: «flex-grow»، «flex-shrink» و «flex-basis». بنابراین می‌توان مقادیر فردی را مستقیماً در فرم مختصر (flex: / flex: 1 1 20em) وارد کرد یا یک مقدار جداگانه را انتخاب کرد و پیکربندی را به CSS واگذار کرد.

آموزش CSS Flexbox

ترجمه شده توسط سایت دریای شرق از سایت
کپی بدون ذکر نام و لینک سایت دریای شرق ممنوع است !