چگونه فروش اينترنتي بهتري داشته باشيمFlexbox يك روش طرح بندي يك بعدي براي قرار دادن آيتم ها در سطر يا ستون است. آيتم هايي انعطاف پذير براي پر كردن فضاي اضافي و كوچك براي تناسب در فضاهاي كوچكتر. اين مقاله تمام اصول را توضيح مي دهد.
پيش نيازها: مباني HTML (مطالعه HTML) و چگونگي كار با CSS (مطالعه CSS).
هدف: يادگيري نحوه استفاده از سيستم Flexbox براي ايجاد طرح بندي در طراحي وب سايت.
چرا Flexbox ؟
براي مدت زمان طولاني، تنها ابزار قابل اعتماد و سازگار با مرورگر هاي موجود CSS بود كه شامل چيزهايي مانند floats و positions بود. استفاده از آن ها خوب است اما در بعضي موارد آنها نيز محدود و خسته كننده هستند.
الزامات طرح بندي زير ساده است كه هميشه راحت و انعطاف پذير بوده و طراحان با چنين ابزارهايي در طراحي وب سايت دست و پنجه نرم مي كنند:
- يك بلاك به صورت عمودي درون بلاك مادر خود قرار مي گيرد.
- ساختن همه بچه هاي يك كانتينر به همان اندازه عرض/ ارتفاع، بدون در نظر گرفتن اين كه چقدر عرض / ارتفاع در دسترس است.
- ساخت تمام ستون ها در طرح بندي ستون هاي چندگانه، حتي اگر داراي محتوا متفاوت باشند، همان ارتفاع را مي پذيرند.
- همانطور كه در بخش هاي بعدي مشاهده خواهيد كرد، flexbox باعث مي شود بسياري از وظايف طرح بسيار ساده تر شود.
يك مثال ساده از Flexbox
در اين مقاله ما قصد داريم شما را از طريق يك سري تمرينات نسبت به درك چگونگي كاركرد flexbox آشنا نماييم. براي شروع، شما بايد يك كپي از اولين فايل استارت خود مثلا flexbox0.html در github خود را بسازيد. حال آن را در يك مرورگر مدرن (مانند فايرفاكس يا كروم) بارگذاري كنيد و نگاهي به كد ها در ويرايشگر خود داشته باشيد.
خواهيد ديد كه ما داراي يك عنصر
مشخص كردن عناصر Flexbox
براي شروع، ما بايد انتخاب كنيم كه كدام عناصر بايد در Flexbox قرار داده شوند. براي انجام اين كار، مقدار خاصي از display را براي عناصر والد عنصري كه قصد كار روي آن را داريد، تنظيم كنيد. در اين مورد ما مي خواهيم عناصر
نتيجه مانند زير است:
بنابراين همه چيزي را كه براي طراحي وب سايت نياز داريم به دست خواهيم آورد. ايجاد ستون هايي با ابعاد و سايز يكسان. اين به اين دليل است كه مقادير پيش فرض براي آيتم هاي انعطاف پذير (فرزندان كانتينر انحصاري) براي حل مشكلات رايج مثل اين تنظيم شده است. بعدا بيشتر در مورد آن ها خواهيم گفت.
نكته: همچنين شما مي توانيد يك مقدار display را براي inline-flex ها تنظيم كنيد تا انعطاف پذير شوند.
هنگامي كه عناصر در FlexBox قرار مي گيرند، آنها در امتداد دو محور خواهند بود:
محور اصلي محوري در حال حركت در جهت آيتم هاي FlexBox است (به عنوان مثال رديف هاي در عرض صفحه يا ستون ها در طول صفحه). شروع و پايان اين محور، شروع و پايان اصلي است.
محور متقاطع، محوري است كه عمود بر مسير قرار گرفته است كه آيتم هاي FlexBox در آن قرار داده شده است. شروع و پايان اين محور، شروع و پايان متقابل است.
عنصر والدي كه نمايش داده شده است: Flex آن را تنظيم مي كند ( مانند
آيتم هايي كه در FlexBox هاي درون يك flex container قرار مي گيرند، flex container (عناصر
اين اصطلاح را در ذهن داشته باشيد كه در بخش هاي بعدي بيشتر از آن مي شنويد.
ستون يا رديف؟
Flexbox يك خاصيت جديدي به نام flex-direction را فرآهم آورده است كه مشخص مي كند كه كدام مسير در محور اصلي قرار دارد (فرزندان درون FlexBox در كدام مسير قرار گرفته اند.) به طور پيش فرض آنها را در يك رديف در جهت زبان پيش فرض مرورگر شما (در سمت راست به چپ در مرورگر فارسي) كار مي كنند.
سعي كنيد كد زير را به قوانين سكشن هاي خود اضافه كنيد:
;flex-direction: columnشما همچنين مي توانيد با استفاده از مقادير column-reverse و row-reverse آيتم هاي FlexBox را در جهات معكوس نيز قرار بدهيد.
زماني رخ كه شما مقدار مشخصي از عرض يا ارتفاع را در طرح خود داشته باشيد، در نهايت ظرفيت فرزندان flexbox شما سرازير خواهد شد و طرح را خراب مي كند. نگاهي به مثال flexbox-wrap0.html خود بياندازيد و سعي كنيد آن را به صورت زنده ببينيد:
در اينجا مي بينيم كه فرزندان از كانتينر خود خارج مي شوند. يكي از راه هايي كه مي توانيد اين را حل كنيد اين است كه كد زير را به بخش مربوطه اضافه كنيد:
;flex-wrap: wrap
حال نتيجه وب سايت به صورت زير خواهد شد:
سايز آيتم هاي FlexBox
اكنون به اولين مثال بازخواهيم گشت و نگاهي به چگونگي كنترل فضا براي آيتم هاي FlexBox مي پردازيم. فايل خود را از flexbox0.html كپي كنيد يا يك نسخه از flexbox1.html را به عنوان يك نقطه شروع جديد در نظر بگيريد.
ابتدا، كد زير را به پايين CSS اضافه كنيد:
اين مقداري نسبي و بدون واحد است كه تعيين مي كند كه چقدر از فضاي موجود در محدوده اصلي هر يك از آيتم هاي FlexBox را در بر مي گيرد. در اين مورد، ما هر عنصر
اكنون كد هاي زير را اضافه كنيد:
در حال حاضر زماني كه شما به روزرساني مي كنيد، خواهيد ديد كه سومين
شما همچنين مي توانيد با استفاده از كد زير مقدار حداقل اندازه در داخل FlexBox ها را نيز مشخص كنيد:
اين اساسا اين موضوع را بيان مي كند: "هر آيتم FlexBox در اولين بار 200 پيكسل از فضاي موجود به آن داده مي شود. بعد از آن، بقيه فضاي موجود بر اساس واحد هاي نسبت به هم تقسيم مي شوند. اين را امتحان كنيد و طراوت و تفاوت در نحوه اشتراك فضا را ببينيد.
سازگاري با مرورگر ها
پشتيباني Flexbox در اكثر مرورگرهاي جديد مانند Firefox، Chrome، Opera، Microsoft Edge و IE 11، نسخه هاي جديدتر Android / iOS و غيره انجام مي شود. با اين حال، بايد بدانيد كه مرورگرهاي قديمي نيز هنوز هستند كه استفاده مي شوند و طراحي سايت با Flexbox را پشتيباني نمي كنند.
با اين حال اگر شما در حال استفاده از flexbox در يك وب سايت واقعي هستيد، بايد تست كنيد و اطمينان حاصل كنيد كه تجربه كاربري شما همچنان در مرورگرهاي بسياري قابل قبول باشد.
مشخصات Flexbox كمي پيچيده تر از برخي از ويژگي هاي CSS است. به عنوان مثال، اگر يك مرورگر يك سايه CSS را از دست بدهد، احتمالا هنوز سايت قابل استفاده است. با اين حال ويژگي هاي flexbox اين را پشتيباني نمي كنند و احتمالا يك طرح را به صورت كامل خراب و آن را غير قابل استفاده مي كنند.
برگرفته از سايت developer.mozilla.org
منبع: طراحي وب نوپرداز
بهترين سريال هاي ۲۰۱۷ از نگاه وب سايت هاي معتبر خارجي