آموزش فوق کاربردی Flex در بوت استرپ 4
یادگیری Flex در بوت استرپ 4:
در این بخش از آموزش، با مبحث بسیار مهم و کاربردی flex و کلاسهای آن در بوت استرپ 4 آشنا خواهید شد.
Flex:
- d-flex: با استفاده از این کلاس display یک شی را flex قرار میدهیم.
- d-inline-flex: با استفاده از این کلاس شی میتواند علاوه بر خاصیت flex، خاصیت inline هم داشته باشد.
- flex-row: با استفاده از این کلاس اشیا در یک سطر قرار میگیرند.
- flex-row-reverse: مانند flex-row میباشد، با این تفاوت که اگر صفحه شما راست چین باشد در سمت چپ قرار میگیرند و اگر چپ چین باشد در سمت راست قرار میگیرند.
- flex-column: با استفاده از این کلاس اشیا به صورت عمودی قرار میگیرند.
- flex-column-reverse: این کلاس باعث میشود، اشیا از پایین به بالا قرار بگیرند.
- flex-wrap: اندازه آیتمهای داخل باکس flex را حفظ می کند و اگر فضا کافی نباشد و جا نشوند می شکند و بقیه آیتمها را در سطر بعد نمایش میدهد.
- flex-nowrap: برعکس flex-wrap میباشد.
- justify-content-*: از این کلاس برای تراز افقی اشیا استفاده میشود. دارای مقادیر :
- justify-content-start: این حالت پیش فرض میباشد و اشیا از چپ به راست قرار میگیرند.
- justify-content-end: اشیا از راست به چپ قرار میگیرند.
- justify-content-center: اشیا در وسط قرار میگیرند.
- justify-content-between: فضای اضافی بین اشیا تقسیم میشود. اشیا اول و آخر به سمت راست و چپ صفحه میچسبند.
- justify-content-around: فضای خالی را اطراف اشیا اضافه میکند.
- align-items-*: برای تراز عمودی استفاده میشود. دارای مقادیر زیر میباشد:
- align-items-streach: حالت پیش فرض میباشد. کل فضا را اشغال میکند.
- align-items-start: عناصر در بالا صفحه قرار میگیرند.
- align-items-end: عناصر در پایین صفحه قرار میگیرند.
- align-items-center: عناصر در وسط صفحه قرار میگیرند.
- align-self-*: برای تراز بندی آیتمهای داخل باکس flex استفاده میشود. مقادیر آن مانند مقادیر align-item میباشد.
- align-content-*: مانند align-item میباشد، با این تفاوت که فقط برای خاصیت flex-wrap استفاده میشود. در واقع زمانی که میخواهیم مجوعهایی از چند سطر را باهم موقعیتشان را مشخص کنیم از این کلاس استفاده میکنیم.
- order-*: با استفاده از این کلاس ترتیب قرار گرفتن آیتمهای داخل باکس flex را مشخص میکنیم. به طور پیش فرض مقدار این کلاس برای همه آیتمها 0 است. با اعدادی بین 0 تا 12 مقداردهی میشود.
برای یادگیری این مبحث مثالها و نکتههای متعددی را در فایل ویدئویی آوردهایم که با تهیه این درس و مشاهده ویدئوها به طور کامل به این مبحث مسلط خواهید شد.
امیدواریم که این آموزش، برای شما دوستان درسمنی عزیز مفید باشد، درصورت سوال و یا مشکل میتوانید به انجمن پرسش و پاسخ درسمن مراجعه کنید. پیشنهادات و انتقادات خود را در بخش نظرات برای ما ارسال کنید.
انجمن برنامه نویسان وب
جلسات دوره
مهدی عباسی
مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و .... مطالعه بیشتر رزومه
نظر شما در تصمیم دیگران اثرگذار است.
لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.