Перспективи використання технології Flexbox при адаптивній верстці вебсторінок
DOI:
https://doi.org/10.26642/ten-2019-2(84)-70-76Ключові слова:
веброзробка, адаптивна верстка, Flexbox, вебсторінка, вебсайт, адаптивність, фреймворкАнотація
Правильна верстка сайту відповідає за коректне відображення контенту. Від верстальника вимагається таке відображення в браузері, яке буде найбільш близьким до попередньо створеного макета дизайну сайту, заздалегідь розробленого за допомогою графічних редакторів. Для цього існує багато інструментів: HTML, CSS, різного типу фреймворки. Розрізняють «жорстку» (фіксовану) і «гумову» (адаптивну) верстку сайту. При «жорсткій» верстці всі елементи вебсторінки мають завжди фіксовані розміри, незалежно від розміру монітора користувача й установленого дозволу екрана. Адаптивна верстка сайту дозволяє змінювати розміри елементів сторінки, підлаштовуючись під різні розміри й дозволи моніторів. Найбільш значущою і активно досліджуваною сферою веброзробки є адаптивна верстка. Зважаючи на велике різноманіття технологій, що дозволяють вирішувати ряд проблем, які постають перед розробником при верстці адаптивних вебсайтів, варто дослідити найбільш ефективні з них. Досліджено технологію адаптивної верстки вебсторінок Flexbox. Виокремлено основні особливості застосування Flexbox для вирішення основних завдань, таких як вирівнювання графічного контенту відповідно до ширини екрану, автоматичне визначення центру для точного вирівнювання контейнерів на сторінці. Вирізнено основні переваги та перспективи використання технології Flexbox при адаптивній верстці вебсторінок, які містять динамічний контент, що формує чітке уявлення про подальше впровадження цієї технології у процес веброзробки. Для коректного відображення використовують адаптивну верстку. Щоб реалізувати адаптивність сайту, прописуються додаткові стилі, що, крім більшого обсягу роботи, тягне за собою передбачення поведінки кожного з елементів.Посилання
Filimonenkova, T.N. and Dunaevskiy, A.S. (2017), «Tekhnologii adaptivnoy verstki saytov», World science: problems and innovations, рр. 78–81.
Fadeeva, A.S. (2017), «Adaptivnyy dizayn ili mobil'naya versiya sayta: preimushchestva i nedostatki», Aktual'nye problemy aviatsii i kosmonavtiki, T. 3, No.13, pp. 1106–1107.
Dmitrieva, Yu.S. (2017), «Metodika adaptivnoy modernizatsii veb-interfeysov», Perspektivy razvitiya nauki v sovremennom mire, рр. 142–148.
Bikitimirov, R.R. and Dzhemaletdinov, A.B. (2016), «Sovremennye instrumenty front-end razrabotki», Informatsionno-komp'yuternye tekhnologii v ekonomike, obrazovanii i sotsial'noy sfere, рр. 63–69.
Bolagna, J. (2006), Shpargalka po Flexbox (CSS3 Flexible Box), [Online], available at: https://habr.com/ru/post/313938/
Can I Use, [Online], available at: https://caniuse.com/
Prakticheskoe primenenie FlexBox (2014), [Online], available at: https://habr.com/ru/post/242545/
Nazarova, O. (2014), CSS flexbox, [Online], available at: https://html5book.ru/css3-flexbox/#display-flex
Bagretsov, S. (2018), Kogda nuzhno ispol'zovat' Flexbox, [Online], available at: https://medium.com/@stasonmars/%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0%D0%BD%D1%83%D0%-B6%D0%BD%D0%BE%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-flexbox-1f02f7a1687c
Zea, R. (2015), Mastering Responsive Web Design, 312 р.
##submission.downloads##
Опубліковано
Як цитувати
Номер
Розділ
Ліцензія
Авторське право (c) 2019 Вікторія Василівна Болотіна, Олена Геннадіївна Чижмотря, Олексій Володимирович Чижмотря
Ця робота ліцензується відповідно до Creative Commons Attribution-NonCommercial 4.0 International License.
Автор, який подає матеріали до друку, зберігає за собою всі авторські права та надає відповідному виданню право першої публікації, дозволяючи розповсюджувати даний матеріал із зазначенням авторства та джерела первинної публікації, а також погоджується на розміщення її електронної версії на сайті Національної бібліотеки ім. В.І. Вернадського.