چهارشنبه ۲۳ خرداد ۰۳ ۱۱:۳۷ ۱۲۱ بازديد
Flexbox یا این که Flexible Box Layout یک سبک دکورا سیون CSS میباشد که روشی بی آلایش و انعطاف پذیر برای چینش عنصرها در یک برگه اینترنت ارائه میدهد. در واقع flexbox برای پژوهش به متداول ترین سناریوهای دکوراسیون پیاده سازی طراحی سایت اختصاصی شد‌ه‌است و راهی برای توزیع دور و بر و تراز کردن موادسازنده در یک کاسه (container) مهیا می نماید. برای انتخاب حالت و بعدها جعبه ها در CSS میتوانید از یکی‌از شرایط های طرح بندی مو جود استعمال فرمائید:
طرح بلوک – The block layout
از این موقعیت در تهیه و تنظیم اوراق استعمال می‌گردد.
طرح بندی داخل خطی – The inline layout
از این شرایط در رسم متن استعمال میشود.
دکورا سیون جدول – The table layout
از این موقعیت در دکورا سیون جداول استعمال می‌گردد.
طرح جدول – The table layout
از این شرایط در وضعیت یابی موادتشکیل دهنده به کارگیری می‌گردد.
همگی این وضعیت ها برای تراز کردن موادتشکیل دهنده خاص مانند اوراق متن، جداول و غیره به کار گیری می‌شوند، با این اکنون، هیچ یک از این ها راهکار جامعی برای تنظیم تارنما های بغرنج ارائه نمی دهد. این جاست که فلکس جعبه Flexbox وارد میدان می گردد.
پیش نیاز های فلکس جعبه چیست؟
اکنون که می‌دانید فلکس جعبه چیست، برای آغاز فعالیت با Flexbox، می بایست فهم و شعور نخستین ای از HTML و CSS داشته باشید. برای یادگیری فلکس جعبه مایحتاج میباشد تا با مهم‌ترین تگ های HTML، اشکال خصوصیات و صفت ها (attribute) و سبک باکس در CSS آشنا باشید. همینطور فهم و شعور صدق از صفت های اکران در CSS و مقادیر مختلفی که میتواند بگیرد (از جمله، inline، block، inline-block و غیره) داشته باشید.
ضمن این، مایحتاج میباشد که یک ویرایشگر متن برای کدنویسی و یک مرورگر اینترنت برای پیش اکران حاصل کد خویش فعال‌سازی نمائید. میتوانید از شایسته ترین ویرایشگر کد html و css و یا این که هر ویرایشگر متنی که ترجیح می دهید، به کار گیری نمایید. همینطور داشتن تجربیات در به کارگیری از فریمورک های CSS مانند Bootstrap یا این که Foundation به شما در یادگیری فلکس جعبه یاری خواهد کرد، چون این فریمورک ها، از Flexbox برای طرح بندی های خویش استعمال می نمایند.
کاربرد فلکس جعبه چیست؟
همانگونه که گفتیم Flexbox یک ماژول طرح بندی در CSS میباشد که به شما این قابلیت را میدهد که به راحتی طرح بندی های انعطاف پذیر و پاسخگو برای صفحه ها اینترنت خویش ساخت و ساز نمائید. دسته ای از خصوصیات و مقادیر را آماده می نماید که به شما قابلیت و امکان میدهد اندازه، مسافت، تراز و ترتیب موادسازنده را در یک پیاله در دست گرفتن نمایید. بعضا از مزایا و کاربرهای کلیدی استعمال از Flexbox عبارتند از:
بی آلایش سازی طرح بندی
با Flexbox، می توانید طرح بندی های غامض‌خیس و پویاتر را فارغ از توکل بر تکنیک‌های دکوراسیون سنتی مانند شناور یا این که وضعیت‌یابی ساخت‌و‌ساز فرمائید. این قادر است کد را بی آلایش کرده و تولید و مراقبت طرح بندی ها را سهل و آسان خیس نماید.
بهبود پاسخگویی
فلکس جعبه راهی برای ساخت و ساز طرح های عکس العمل گرا ارائه می دهد که با اندازه های گوناگون ورقه اکران و دستگاه ها سازگار می باشند. می توانید از خصوصیت هایی مانند flex-wrap و order برای تغییر تحول دکورا سیون عنصرها در برگه های کوچکتر استعمال نمائید و می توانید از خصوصیت هایی مانند flex-grow و flex-shrink برای تهیه اندازه و مسافت موادسازنده در شکل نیاز استعمال نمائید.
ارائه در دست گرفتن تراز
فلکس جعبه تراز کردن موادتشکیل دهنده در یک کاسه را به طور افقی و عمودی سهل وآسان می نماید. می توانید از خصوصیت هایی مانند justify-content و align-item برای در دست گرفتن هم‌ترازی ارکان در امتداد پایه مهم و شالوده متقاطع استعمال فرمایید.
خصوصیت های فلکس جعبه به شما قابلیت و امکان می دهد طرح بندی های بغرنج و پویا را به راحتی ساخت فرمائید، در حالیکه کد را بی آلایش خیس کرده و جواب دهی را بهبود می بخشد.
خصوصیت های اساسی فلکس جعبه چیست؟
هم اکنون که می‌دانید فلکس جعبه چیست با خصوصیت های آن نیز آشنا گردید.
کاسه فلکس: ظرفی که کلیه اقلام فلکس را در خویش مکان میدهد.
اقلام فلکس: موادتشکیل دهنده شخصی که کاسه را تشکیل میدهند.
اساس مهم: محوری که اقلام فلکس در امتداد آن قرار می‌گیرند.
اساس متقاطع: اساس عمود بر پایه مهم.
جهت فلکس: جهت پایه مهم (از چپ به راست، راست به چپ، از بالا به زیر، از تحت به بالا).
Flex grow: خاصیتی که گزینش می نماید یک گزینه چقدر بایستی نسبت به بقیه اقلام جان دار در پیاله پرورش نماید.
Flex shrink: خاصیتی که انتخاب می نماید یک مورد چقدر می بایست نسبت به بقیه اقلام جان دار در پیاله خرد گردد.
Flex based: خاصیتی که اندازه نخستین یک گزینه فلکس را پیش از استارت رویش یا این که خرد شدن مشخص و معلوم می نماید.
تراز کردن مورد ها: خصوصیتی که انتخاب می نماید مورد ها چه طور بایستی در امتداد اساس متقاطع تراز شوند.
Justify content: خاصیتی که انتخاب می نماید مورد ها به چه شکل بایستی در اساس اساسی تراز شوند.
Flexbox ابزاری توانمند برای ایجاد کرد طرح بندی‌های بغرنج و برخورد‌گرا میباشد و قادر است به بی آلایش‌سازی پروسه پیاده سازی و کدنویسی یک برگه اینترنت یاری دهد.
طرح بلوک – The block layout
از این موقعیت در تهیه و تنظیم اوراق استعمال می‌گردد.
طرح بندی داخل خطی – The inline layout
از این شرایط در رسم متن استعمال میشود.
دکورا سیون جدول – The table layout
از این موقعیت در دکورا سیون جداول استعمال می‌گردد.
طرح جدول – The table layout
از این شرایط در وضعیت یابی موادتشکیل دهنده به کارگیری می‌گردد.
همگی این وضعیت ها برای تراز کردن موادتشکیل دهنده خاص مانند اوراق متن، جداول و غیره به کار گیری می‌شوند، با این اکنون، هیچ یک از این ها راهکار جامعی برای تنظیم تارنما های بغرنج ارائه نمی دهد. این جاست که فلکس جعبه Flexbox وارد میدان می گردد.
پیش نیاز های فلکس جعبه چیست؟
اکنون که می‌دانید فلکس جعبه چیست، برای آغاز فعالیت با Flexbox، می بایست فهم و شعور نخستین ای از HTML و CSS داشته باشید. برای یادگیری فلکس جعبه مایحتاج میباشد تا با مهم‌ترین تگ های HTML، اشکال خصوصیات و صفت ها (attribute) و سبک باکس در CSS آشنا باشید. همینطور فهم و شعور صدق از صفت های اکران در CSS و مقادیر مختلفی که میتواند بگیرد (از جمله، inline، block، inline-block و غیره) داشته باشید.
ضمن این، مایحتاج میباشد که یک ویرایشگر متن برای کدنویسی و یک مرورگر اینترنت برای پیش اکران حاصل کد خویش فعال‌سازی نمائید. میتوانید از شایسته ترین ویرایشگر کد html و css و یا این که هر ویرایشگر متنی که ترجیح می دهید، به کار گیری نمایید. همینطور داشتن تجربیات در به کارگیری از فریمورک های CSS مانند Bootstrap یا این که Foundation به شما در یادگیری فلکس جعبه یاری خواهد کرد، چون این فریمورک ها، از Flexbox برای طرح بندی های خویش استعمال می نمایند.
کاربرد فلکس جعبه چیست؟
همانگونه که گفتیم Flexbox یک ماژول طرح بندی در CSS میباشد که به شما این قابلیت را میدهد که به راحتی طرح بندی های انعطاف پذیر و پاسخگو برای صفحه ها اینترنت خویش ساخت و ساز نمائید. دسته ای از خصوصیات و مقادیر را آماده می نماید که به شما قابلیت و امکان میدهد اندازه، مسافت، تراز و ترتیب موادسازنده را در یک پیاله در دست گرفتن نمایید. بعضا از مزایا و کاربرهای کلیدی استعمال از Flexbox عبارتند از:
بی آلایش سازی طرح بندی
با Flexbox، می توانید طرح بندی های غامض‌خیس و پویاتر را فارغ از توکل بر تکنیک‌های دکوراسیون سنتی مانند شناور یا این که وضعیت‌یابی ساخت‌و‌ساز فرمائید. این قادر است کد را بی آلایش کرده و تولید و مراقبت طرح بندی ها را سهل و آسان خیس نماید.
بهبود پاسخگویی
فلکس جعبه راهی برای ساخت و ساز طرح های عکس العمل گرا ارائه می دهد که با اندازه های گوناگون ورقه اکران و دستگاه ها سازگار می باشند. می توانید از خصوصیت هایی مانند flex-wrap و order برای تغییر تحول دکورا سیون عنصرها در برگه های کوچکتر استعمال نمائید و می توانید از خصوصیت هایی مانند flex-grow و flex-shrink برای تهیه اندازه و مسافت موادسازنده در شکل نیاز استعمال نمائید.
ارائه در دست گرفتن تراز
فلکس جعبه تراز کردن موادتشکیل دهنده در یک کاسه را به طور افقی و عمودی سهل وآسان می نماید. می توانید از خصوصیت هایی مانند justify-content و align-item برای در دست گرفتن هم‌ترازی ارکان در امتداد پایه مهم و شالوده متقاطع استعمال فرمایید.
خصوصیت های فلکس جعبه به شما قابلیت و امکان می دهد طرح بندی های بغرنج و پویا را به راحتی ساخت فرمائید، در حالیکه کد را بی آلایش خیس کرده و جواب دهی را بهبود می بخشد.
خصوصیت های اساسی فلکس جعبه چیست؟
هم اکنون که می‌دانید فلکس جعبه چیست با خصوصیت های آن نیز آشنا گردید.
کاسه فلکس: ظرفی که کلیه اقلام فلکس را در خویش مکان میدهد.
اقلام فلکس: موادتشکیل دهنده شخصی که کاسه را تشکیل میدهند.
اساس مهم: محوری که اقلام فلکس در امتداد آن قرار می‌گیرند.
اساس متقاطع: اساس عمود بر پایه مهم.
جهت فلکس: جهت پایه مهم (از چپ به راست، راست به چپ، از بالا به زیر، از تحت به بالا).
Flex grow: خاصیتی که گزینش می نماید یک گزینه چقدر بایستی نسبت به بقیه اقلام جان دار در پیاله پرورش نماید.
Flex shrink: خاصیتی که انتخاب می نماید یک مورد چقدر می بایست نسبت به بقیه اقلام جان دار در پیاله خرد گردد.
Flex based: خاصیتی که اندازه نخستین یک گزینه فلکس را پیش از استارت رویش یا این که خرد شدن مشخص و معلوم می نماید.
تراز کردن مورد ها: خصوصیتی که انتخاب می نماید مورد ها چه طور بایستی در امتداد اساس متقاطع تراز شوند.
Justify content: خاصیتی که انتخاب می نماید مورد ها به چه شکل بایستی در اساس اساسی تراز شوند.
Flexbox ابزاری توانمند برای ایجاد کرد طرح بندی‌های بغرنج و برخورد‌گرا میباشد و قادر است به بی آلایش‌سازی پروسه پیاده سازی و کدنویسی یک برگه اینترنت یاری دهد.
- ۰ ۰
- ۰ نظر