Перспективи використання технології Flexbox при адаптивній верстці вебсторінок

Автор(и)

  • Вікторія Василівна Болотіна Державний університет «Житомирська політехніка»
  • Олена Геннадіївна Чижмотря Державний університет «Житомирська політехніка»
  • Олексій Володимирович Чижмотря Державний університет «Житомирська політехніка»

DOI:

https://doi.org/10.26642/ten-2019-2(84)-70-76

Ключові слова:

веброзробка, адаптивна верстка, Flexbox, вебсторінка, вебсайт, адаптивність, фреймворк

Анотація

Правильна верстка сайту відповідає за коректне відображення контенту. Від верстальника вимагається таке відображення в браузері, яке буде найбільш близьким до попередньо створеного макета дизайну сайту, заздалегідь розробленого за допомогою графічних редакторів. Для цього існує багато інструментів: HTML, CSS, різного типу фреймворки. Розрізняють «жорстку» (фіксовану) і «гумову» (адаптивну) верстку сайту. При «жорсткій» верстці всі елементи вебсторінки мають завжди фіксовані розміри, незалежно від розміру монітора користувача й установленого дозволу екрана. Адаптивна верстка сайту дозволяє змінювати розміри елементів сторінки, підлаштовуючись під різні розміри й дозволи моніторів. Найбільш значущою і активно досліджуваною сферою веброзробки є адаптивна верстка. Зважаючи на велике різноманіття технологій, що дозволяють вирішувати ряд проблем, які постають перед розробником при верстці адаптивних вебсайтів, варто дослідити найбільш ефективні з них. Досліджено технологію адаптивної верстки вебсторінок Flexbox. Виокремлено основні особливості застосування Flexbox для вирішення основних завдань, таких як вирівнювання графічного контенту відповідно до ширини екрану, автоматичне визначення центру для точного вирівнювання контейнерів на сторінці. Вирізнено основні переваги та перспективи використання технології Flexbox при адаптивній верстці вебсторінок, які містять динамічний контент, що формує чітке уявлення про подальше впровадження цієї технології у процес веброзробки. Для коректного відображення використовують адаптивну верстку. Щоб реалізувати адаптивність сайту, прописуються додаткові стилі, що, крім більшого обсягу роботи, тягне за собою передбачення поведінки кожного з елементів.

Біографії авторів

Вікторія Василівна Болотіна, Державний університет «Житомирська політехніка»

V.V. Bolotina

Олена Геннадіївна Чижмотря, Державний університет «Житомирська політехніка»

O.G. Chyzmotria

Олексій Володимирович Чижмотря, Державний університет «Житомирська політехніка»

O.V. Chyzmotria

Посилання

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##

Опубліковано

2019-12-11

Як цитувати

Болотіна, В. В., Чижмотря, О. Г., & Чижмотря, О. В. (2019). Перспективи використання технології Flexbox при адаптивній верстці вебсторінок. Технічна інженерія, (2(84), 70–76. https://doi.org/10.26642/ten-2019-2(84)-70-76

Номер

Розділ

ІНЖЕНЕРІЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ