Теперь давайте поговорим про размещение объектов на сайте. Есть немало способов, чтобы разместить элементы на сайте. Самым простым, но не практичным методом является position: absolute;
Процесс поведения, который кажется наиболее понятным. На самом деле, мы просто задаем абсолютное позиционирование и при помощи свойств left, right, top, bottom и регулируем положение элемента. Такое позиционирование имеет ряд особенностей. Чтобы показать наглядно, посмотри на картинку снизу.
Հիմա եկեք խոսենք կայքում օբյեկտների տեղադրման մասին: Կայքում իրերը տեղադրելու մի քանի եղանակ կա: Ամենապարզ, բայց ոչ գործնական մեթոդը position: absolute;
Վարքագծի գործընթացը, որն առավել հասկանալի է թվում: Փաստորեն, մենք պարզապես սահմանում ենք բացարձակ դիրքավորում և օգտագործում ենք left, right, top,
bottom հատկությունները և կարգավորում տարրի դիրքը։ Այս դիրքավորումն ունի մի շարք առանձնահատկություններ. Այն հստակ ցույց տալու համար նայեք ստորև ներկայացված նկարին:
На картинке изображены квадраты двух цветов: Красный и Синий. Красные у нас будут без позиционирования, а синему мы зададим position: absolute;
Նկարում պատկերված են երկու գույների քառակուսիներ՝ կարմիր և կապույտ: Կարմիրները առանց դիրքավորման կլինեն, իսկ կապույտը կդնենք position: absolute;
Как вы видите теперь синий куб имеет абсолютное позиционирование. На самом деле, абсолютное позиционирование имеет две вещи: элемент исчезает с того места где он должен быть и позиционируется заново. А остальные элементы расположены так, как будто этого элемента никогда и не было. В настоящее время Абсолютное позиционирование используется достаточно часто. Оно, например, помогает сконцентрировать внимание пользователя на конкретном элементе. Лучше использовать метод с использованием margin либо padding. Но давайте предположим у нас будут много объектов. У нас будут 6 равномерных картинок которых нужно будет разместить на сайте. При добавлении они будут выглядеть так:
Ինչպես տեսնում եք, կապույտ խորանարդն ունի բացարձակ դիրքավորում: Իրականում բացարձակ դիրքավորումն անում է երկու բան՝ տարրը անհետանում է այնտեղից, որտեղ պետք է լիներ, և այն վերադիրքավորվում է։ Իսկ մնացած տարրերը դասավորված են այնպես, կարծես այս տարրը երբեք գոյություն չի ունեցել: Ներկայումս Բացարձակ դիրքավորումը բավականին հաճախ է օգտագործվում։ Այն, օրինակ, օգնում է օգտատիրոջ ուշադրությունը կենտրոնացնել որոշակի տարրի վրա: Ավելի լավ է օգտագործել մեթոդը՝ օգտագործելով margin կամ padding. Բայց ենթադրենք, որ մենք ունենք շատ օբյեկտներ։ Մենք կունենանք 6 իրար հավասար նկարներ, որոնք պետք է տեղադրվեն կայքում։ Երբ ավելացվեն, դրանք կունենան հետևյալ տեսքը.
Чтобы их упорядочить либо сделать в одну строку мы можем использовать css свойство flex либо grid. Flexbox – это общепринятое сокращение для Flexible Box Module (модуль гибкого контейнера), который представляет собой одномерную модель макета. Он не может одновременно работать со строкой или столбцом, но и с обоими сразу. Flexbox обеспечивает эффективное выравнивание, распределение и направление элементов страницы. Система CSS grid (сетка) представляет собой мощный двухмерный макет, который позволяет одновременно использовать строки и столбцы. На основе CSS grid лежит разделение экрана на сетку из 12 частей, в которую и будут вписываться элементы. Удобство этой технологии перед Flexbox и другими типами макетов заключается в возможности работать двухмерно. Это также упрощает позиционирование и позволяет размещать элементы контейнеров, не перекрывая друг друга. Сперва давайте рассмотрим вариант с flex. Чтобы всё работало нам нужно создать родительский блок в котором будут и находиться фотографии:
Դրանք դասավորելու կամ մեկ տողով դարձնելու համար կարող ենք օգտագործել css հատկությունը՝ flex կամ grid. Flexbox-ը Flexible Box Module-ի սովորական հապավումն է, որը միաչափ դասավորության մոդել է: Այն կարող է միաժամանակ գործել տողի կամ սյունակի վրա, բայց ոչ երկուսն էլ: Flexbox-ն ապահովում է էջի տարրերի արդյունավետ հավասարեցումը, բաշխումը և ուղղությունը: CSS grid համակարգը հզոր երկչափ դասավորություն է, որը թույլ է տալիս միաժամանակ օգտագործել տողեր և սյունակներ: CSS-ի հիման վրա grid-ը էկրանի բաժանումն է 12 մասից բաղկացած ցանցի, որի մեջ կտեղավորվեն տարրերը։ Այս տեխնոլոգիայի հարմարավետությունը Flexbox-ի և դասավորության այլ տեսակների նկատմամբ երկու հարթություններում աշխատելու ունակությունն է: Այն նաև պարզեցնում է դիրքավորումը և թույլ է տալիս բեռնարկղերի տարրերը տեղադրել առանց միմյանց համընկնելու։ Նախ, եկեք նայենք flex տարբերակին: Որպեսզի ամեն ինչ աշխատի, մենք պետք է ստեղծենք մայր բլոկ, որում կտեղակայվեն լուսանկարները.
Свойство display отвечает за вывод и визуальное представление элементов на странице. Кроме того, свойство display позволяет изменить тип генерируемого контейнера. То есть вы можете изменить его поведение с помощью display. Так будет выглядеть результат:
display հատկությունը պատասխանատու է էջի տարրերի ցուցադրման և տեսողական ներկայացման համար: Բացի այդ, display հատկությունը թույլ է տալիս փոխել ստեղծված կոնտեյների տեսակը։ Այսինքն, դուք կարող եք փոխել նրա վարքագիծը display-ով։ Արդյունքը կունենա հետևյալ տեսքը.
Давайте сделаем так, чтобы картинки располагались в центре и имели отступы между картинками. Также давайте сделаем так, чтобы при нехватке место они начали переноситься вниз:
Եկեք համոզվենք, որ նկարները կենտրոնացած են և նկարների միջև տարածություներ ունեն: Բացի այդ, եկեք այնպես անենք, որ երբ բավարար տարածք չկա, նրանք սկսեն տեղափոխվել ներքև.
Что по поводу grid можно попробовать показать примерами. Допустим у нас есть 30 мини кубиков. Мы хотим чтобы они были в 6 колонок по горизонтали и 5 колонок по вертикали. Для этого нам нужно использовать свойство grid-template-columns и grid-template-rows:
Ինչ վերաբերում է grid-ին, մենք կարող ենք փորձել ցույց տալ օրինակներով։ Ենթադրենք, մենք ունենք 30 մինի խորանարդ: Մենք ցանկանում ենք, որ դրանք լինեն 6 սյունակ հորիզոնական և 5 սյունակ՝ ուղղահայաց: Դա անելու համար մենք պետք է օգտագործենք grid-template-columns և grid-template-rows:
Например, в grid можно установить более гибкую единицу измерений: fr; Fr — дробная единица гибкости. 1fr равна 1 части доступного пространства. Благодаря fr вам больше не нужно пересчитывать ширину разделов. Единица гибкости fr берет 100% экрана и равномерно распределяет его между элементами сетки.
Օրինակ, grid-ում կարող եք սահմանել չափման ավելի ճկուն միավոր. fr; Fr-ը ճկունության կոտորակային միավոր է: 1fr-ը հավասար է առկա տարածության 1 մասի-ի շնորհիվ այլևս կարիք չկա վերահաշվարկել հատվածների լայնությունը: Ճկունության fr միավորը վերցնում է էկրանի 100%-ը և հավասարաչափ տարածում ցանցի տարրերի վրա:
Чтобы поближе ознакомиться со flex и gird, настоятельно рекомендую ознакомиться с играми которые очень быстро и интересно ознакомят со всеми атрибутами и свойствами. После прохождения уже будет проще обращаться с ними. Вот вам ссылка на игры которые помогут быстро научиться.
flex-ի և gird-ի մասին ավելին իմանալու համար ես խստորեն խորհուրդ եմ տալիս ծանոթանալ խաղերին, որոնք արագ և հետաքրքիր կերպով կներկայացնեն ձեզ բոլոր հատկանիշներն ու հատկությունները: Անցնելուց հետո ավելի հեշտ կլինի նրանց հետ գործ ունենալ։ Ահա խաղերի հղումը որը կօգնի ձեզ արագ սովորել:
Попробуйте воссоздать также как на видео: Вот ссылка на картинки: 1, 2, 3, 4, 5, 6; Обратите внимание картинки должны находиться от 1 до 6, но вы должны их поменять местами через свойство flex;
Փորձեք վերստեղծել նույնը, ինչ տեսանյութում. Ահա նկարների հղումը՝ 1, 2, 3, 4, 5, 6; Խնդրում ենք նկատի ունենալ, որ նկարները պետք է լինեն 1-ից 6-ը, բայց դուք պետք է դրանք փոխանակեք flex հատկության միջոցով;
