cssطراحی سایت

جلسه ۵۵: مقدمه ای برای Flexbox در CSS

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

چرا از Flexbox استفاده کنیم؟

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

Flexbox چیست؟

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

چگونه می توانم از مدل flexbox استفاده کنم؟

این اولین سوالی است که همه می پرسند ، و پاسخ آن بسیار ساده تر از آن چیزی است که شما انتظار داشته اید. برای شروع استفاده از مدل Flexbox ، تمام کاری که شما باید انجام دهید این است که ابتدا یک مخزن فلکس تعریف کنید. خوب ، من این جا شما را بیشتر گیج کردم؟ بگذار توضیح بدهم. در HTML معمول ، تهیه لیست ساده ای از موارد به این شکل در می آید.

<ul> <!–parent element–>

  <li></li> <!–first child element–>

  <li></li> <!–second child element–>

  <li></li> <!–third child element–>

</ul>

اگر نگاهی به آن بیندازید ، حتماً دیده اید که لیست نامرتب ، عناصر لیست را در خود جای داده است. شما می توانید ul را عنصر والدین ، و li عنصر فرزند را بنامید. برای استفاده از مدل flexbox ، باید یک عنصر اصلی را به یک ظرف فلکس (با عنوان ظرف انعطاف پذیر) تبدیل کنید. این کار را با تنظیم display: flex یا display: inline-flex برای تغییر درون خطی انجام می دهید. این خیلی ساده است و از آنجا شما آماده استفاده از مدل Flexbox هستید. به شما گفتم آنطور که انتظار دارید سخت نیست. با استفاده از صفحه نمایش ، یک عنصر والد خاص را به عنوان یک ظرف فلکس تنظیم کنید:flex || inline-flex با استفاده از یک لیست مرتب نشده و یک دسته از عناصر لیست ، در زیر نحوه شروع زمینه قالب بندی Flexbox را مشاهده نمایید.

/*Make parent element a flex container*/
ul {
  display: flex; /*or inline-flex*/
}

موارد لیست را کمی استایل دهید ، بنابراین ممکن است ببینید در اینجا چه خبر است.

li {
  width: 100px;
  height: 100px;
  background-color: #8cacea;
  margin: 8px;
}

آنچه شما باید داشته باشید به این شکل است:

/*Make parent element a flex container*/
ul {
  display: flex; /*or inline-flex*/
  list-style: none;
}

li {
  width: 100px;
  height: 100px;
  background-color: #8cacea;
  margin: 8px;
}

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox Starter</title>

</head>

<body>

<ul> <!–parent element–>

  <li></li> <!–first child element–>

  <li></li> <!–second child element–>

  <li></li> <!–third child element–>

</ul>

</body>

</html>

شاید متوجه نشده باشید ، اما قبلاً اتفاقی افتاده است. زمینه قالب بندی Flexbox اکنون آغاز شده است. به یاد داشته باشید که به طور پیش فرض ، "div" در CSS به صورت عمودی ، از بالا به پایین پشته می شود.

تصویر بالا نتیجه ای است که ممکن است به آن امیدوار باشید. با این وجود ، با در نظر گرفتن همان صفحه ساده: display:flex ، بلافاصله می توانید تغییر در طرح را مشاهده کنید. عناصر لیست اکنون به صورت افقی ، از چپ به راست انباشته شده اند. درست مثل آنچه که اگر از float استفاده می کردید اتفاق می افتاد.

به محض معرفی display: flex ، مدل Flexbox شروع به کار می کند: بر روی هر عنصر والدی . ممکن است درک نکنید که چرا این تغییر در جهت گیری عناصر لیست ایجاد شده است. قول می دهم خیلی زود وارد کارهای درونی آن شوم. در حال حاضر ، به من اعتماد کنید. یک چیز دیگر وجود دارد که باید توجه شما را به آن جلب کنم. به محض این که ویژگی نمایش را روی flex تنظیم کنید ، لیست غیر مرتب به طور خودکار تبدیل به ظرف فلکس می شود و عناصر کودک (در این حالت ، عناصر لیست li) به موارد فلکس تبدیل می شوند. این اصطلاحات بارها و بارها تکرار می شوند ، در حالی که من شما را با چیزهای جالب توجه دیگری که مدل Flexbox در اختیار دارد ، آشنا می کنم. من از دو کلمه کلیدی استفاده کرده ام ، و می خواهم بیشتر بر آنها تأکید کنم زیرا آنها برای درک آنچه در پیش رو است بسیار حیاتی هستند. Flex container (ظروف فلکس): عنصر اصلی که صفحه نمایش را تنظیم کرده اید: flex روشن است. Flex items ( موارد فلکس) : عناصر کودکان در یک ظرف فلکس قرار دارند.

  1. ظرف فلکس: عنصر اصلی که آیتم های فلکس در آن وجود دارد
  2. مورد (موارد) فلکس: کودک / فرزندان ظرف فلکس

این پایه و اساس استفاده از مدل flexbox است و به محض درک این موضوع ، چیزهای جالب تری در پیش رو داریم. در اینجا جایی است که من مقدمه ای برای مدل Flexbox را جمع بندی می کنم. در درس بعدی می بینیمت

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا