Azərbaycanca
Беларускі
Dansk
Deutsch
Española
Français
Indonesia
Italiana
日本語
Қазақ
Lietuvos
Nederlands
Português
Русский
සිංහල
แบบไทย
Türkçe
Українська
中國人
United State
Afrikaans
Ця стаття має кілька недоліків. Будь ласка, допоможіть удосконалити її або обговоріть ці проблеми на .
|
CSS flexbox — це CSS3 веб модуль. Flex дозволяє автоматично організовувати відповідні елементи в контейнері залежно від розміру екрана (або пристрою) та дає змогу використовувати більш ефективний спосіб верстки, вирівнювання й розподілу вільного місця між елементами у контейнері, навіть коли їх розмір невідомий і/або динамічний.
Однією з найважливіших особливостей flexbox є його здатність формуватися на основі його середовища перегляду. Контейнери Flex можна регулювати за розміром, (як збільшувати, так і зменшувати) щоб уникнути надмірної монополізації простору. Більше того, цей лейаут краще обмежує потік контенту, ніж, наприклад, блокові та вбудовані типи дисплею, які, як правило, односпрямовані. Дійсно, можна не лише задати напрямок потоку флексу на рівні стилю, наприклад вправо, вліво, вгору або вниз; окремі елементи в такому контейнері також можуть бути автоматично перевпорядковані та перебудовані відповідно до наявного макета.
Історія
У 2000-і роки інтенсивний доступ до Інтернету мобільними агентами мотивував «рідкі макети» та чутливі елементи для зростаючої різноманітності розмірів екрана. У 2010-і роки інтенсивне використання JavaScript макетів, таких як Bootstrap, надихнуло специфікацію гнучкого коду CSS та макета сітки. • 2008 — CSS Working Group обговорює пропозицію"Flexible Box Model" на основі XUL (XML User Interface Language –мови розмітки в додатках Mozilla) і XAML (Extensible Application Markup Language – мови розмітки в додатках Microsoft). • 2009 — опубліковано чернетку «Flexible Box Layout Module». Chrome і Safari додає часткову підтримку, поки Mozilla починає підтримувати XUL-подібний синтаксис відомий як «Flexbox 2009». • 2011 — Tab Atkins береться за розвиток Flexbox і публікує 2 чернетки. В цих чернетках синтаксис сильно змінено. Chrome, Opera і IE 10 впроваджують підтримку цього синтаксису. Він відомий під назвою"flexbox 2011" • 2012 — Синтаксис знову дещо змінили та зробили більш точним. Специфікація переходить у статус Candidate Recommendation і відома під назвою"flexbox 2012". Opera впроваджує безпрефіксну, Chrome підтримує поточну специфікацію з префіксами, а Mozilla без них, IE10 додає підтримку синтаксису «flexbox 2011», що почав застарівати. • 2014 — всі нові браузери підтримують останню специфікацію (включно з IE 11)
Термінологія
Далі наведено декілька термінів, пов'язаних з CSS flexbox.
- Flex container
- Батьківський елемент, що містить всі фрагменти контенту. Використовуючи властивість CSS, контейнер можна визначити як flex або inline-flex.
- Flex item
- Будь-який дочірній елемент, що зберігається в флекс контейнері, вважається гнучким. Будь-який текст у межах контейнера загортається.
- Axes
- Кожна гнучка коробка містить дві осі: основну та поперечну. Основна вісь — вісь, на якій елементи вирівнюються відповідно до один з одного. Перехресна вісь перпендикулярна головній осі.
- Flex-direction
- Встановлює основну вісь. Можливі аргументи left, right, center, space-between, space-around.
- Justify-content
- Визначає, як вміст розміщується на основній осі на поточній лінії. Додаткові аргументи: вліво, вправо, в центрі, пробіл, простір навколо.
- Align-items
- Визначає за замовчуванням, як гнучкі елементи розміщуються по поперечній осі на кожній лінії.
- Align-content
- Визначає за замовчуванням вирівнювання ліній поперечної осі.
- Align-self
- Визначає, як розташовується один елемент уздовж осей. Це перевизначає будь-які значення за замовчуванням, встановлені командою «Align-items».
- Directions
- Інструмент визначає, з чого почати розміщення елементів у флекс контейнері, починаючи з "main-start"у та переходячи до "main-end"у. "Cross-start/cross-end інструмент визначає, де флекс лінії наповнюються контентом від "cross-start"у до "cross-end"у.
- Order
- Розміщує елементи по групах і визначає, у якому порядку вони повинні бути поміщені в контейнер.
- Flex-flow
- Поєднує flex-direction і flex-wrap.
- Lines
- Флексові елементи можуть бути розміщені на одинарній лінії або на кількох рядках, як це визначено властивістю гнучкого пакетування, яка контролює як напрямок поперечної осі, так і спосіб стягування ліній у контейнері.
- Dimensions
- «Main size» і «cross size» — це, по суті, висота і ширина флекс контейнера, і стосуються головної та поперечної осей відповідно.
- Flex-basis
- "Flex-basis" дозволяє визначати початкові ширину та висоту контейнера.
Створення флекс-контейнера
Переведення контейнера в стан «флекс» є досить простим. Все, що необхідно — це змінити властивість дисплею на flex чи inline-flex як показано: display: flex; чи: display: inline-flex;
Після зміни властивості дисплею на одну з вказаних вище, елемент стає флекс-контейнером, а вміст — флекс-контентом. Зміна властивості дисплею на «flex» перетворює контейнер на блоково-рівневий елемент, тоді як зміна на «inline-flex» перетворює контейнер на нелінійно-рівневий елемент.
Align to center
Одною з переваг флексбоксу є можливість легко вирівняти вміст у контейнері відносно центра сторінки як по вертикалі, так і по горизонталі.
display: flex; align-items: center; justify-content: center; Align Specific Child Elements Differently from its Siblings
Використовуючи «margin-left» (лівий зовнішній відступ) та «margin-right» (правий зовнішній відступ), обрані дочірні елементи у флекс-контейнері можуть бути вирівняні по основних осях порівняно з їхніми «двійниками», що вирівняні з використанням інструменту «justify-content».
У поданому нижче прикладі усі дочірні елементи вирівняно відносно початку флекс-контейнера, за винятком останнього елемента, який вирівняно відносно правого краю контейнера, за допомогою використання інструмента «margin-left: auto» (лівий зовнішній відступ.авто):
ul { list-style: none; padding: 10px; margin: 0; background: black; display: flex; justify-content: flex-start; } li { display: inline; background: white; text-align: center; font-weight: bold; font-size: 2em; width: 70px; height: 70px; } # three { margin-left: auto; /* right align this child and those that follow in the source */ } <ul> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> Даний приклад вирівнює весь контент відповідно до кінця контейнера, за винятком останнього елемента, який зміщено вліво завдяки інструменту «margin-right: auto» (правий зовнішній відступ.авто.):
ul { list-style: none; padding: 10px; margin: 0; background: green; display: flex; justify-content: flex-end; } li { display: inline; background: white; text-align: center; font-weight: bold; font-size: 2em; width: 70px; margin-right: 2px; height: 70px; } # one { margin-right: auto; /* left align this child and those that proceed it in the source */ } Примітки
Посилання
https://www.w3schools.com/css/css3_flexbox.asp [ 12 жовтня 2017 у Wayback Machine.]
- . www.w3schools.com (амер.). Архів оригіналу за 12 жовтня 2017. Процитовано 7 листопада 2018.
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Cya stattya maye kilka nedolikiv Bud laska dopomozhit udoskonaliti yiyi abo obgovorit ci problemi na Cya stattya ye sirim perekladom z anglijskoyi movi Mozhlivo vona stvorena za dopomogoyu mashinnogo perekladu abo perekladachem yakij nedostatno volodiye oboma movami Bud laska dopomozhit polipshiti pereklad 24 zhovtnya 2018 Cyu stattyu treba vikifikuvati dlya vidpovidnosti standartam yakosti Vikipediyi Bud laska dopomozhit dodavannyam dorechnih vnutrishnih posilan abo vdoskonalennyam rozmitki statti 24 zhovtnya 2018 Cya stattya ne mistit posilan na dzherela Vi mozhete dopomogti polipshiti cyu stattyu dodavshi posilannya na nadijni avtoritetni dzherela Material bez dzherel mozhe buti piddano sumnivu ta vilucheno 24 zhovtnya 2018 CSS flexbox ce CSS3 veb modul Flex dozvolyaye avtomatichno organizovuvati vidpovidni elementi v kontejneri zalezhno vid rozmiru ekrana abo pristroyu ta daye zmogu vikoristovuvati bilsh efektivnij sposib verstki virivnyuvannya j rozpodilu vilnogo miscya mizh elementami u kontejneri navit koli yih rozmir nevidomij i abo dinamichnij Odniyeyu z najvazhlivishih osoblivostej flexbox ye jogo zdatnist formuvatisya na osnovi jogo seredovisha pereglyadu Kontejneri Flex mozhna regulyuvati za rozmirom yak zbilshuvati tak i zmenshuvati shob uniknuti nadmirnoyi monopolizaciyi prostoru Bilshe togo cej lejaut krashe obmezhuye potik kontentu nizh napriklad blokovi ta vbudovani tipi displeyu yaki yak pravilo odnospryamovani Dijsno mozhna ne lishe zadati napryamok potoku fleksu na rivni stilyu napriklad vpravo vlivo vgoru abo vniz okremi elementi v takomu kontejneri takozh mozhut buti avtomatichno perevporyadkovani ta perebudovani vidpovidno do nayavnogo maketa IstoriyaU 2000 i roki intensivnij dostup do Internetu mobilnimi agentami motivuvav ridki maketi ta chutlivi elementi dlya zrostayuchoyi riznomanitnosti rozmiriv ekrana U 2010 i roki intensivne vikoristannya JavaScript maketiv takih yak Bootstrap nadihnulo specifikaciyu gnuchkogo kodu CSS ta maketa sitki 2008 CSS Working Group obgovoryuye propoziciyu Flexible Box Model na osnovi XUL XML User Interface Language movi rozmitki v dodatkah Mozilla i XAML Extensible Application Markup Language movi rozmitki v dodatkah Microsoft 2009 opublikovano chernetku Flexible Box Layout Module Chrome i Safari dodaye chastkovu pidtrimku poki Mozilla pochinaye pidtrimuvati XUL podibnij sintaksis vidomij yak Flexbox 2009 2011 Tab Atkins beretsya za rozvitok Flexbox i publikuye 2 chernetki V cih chernetkah sintaksis silno zmineno Chrome Opera i IE 10 vprovadzhuyut pidtrimku cogo sintaksisu Vin vidomij pid nazvoyu flexbox 2011 2012 Sintaksis znovu desho zminili ta zrobili bilsh tochnim Specifikaciya perehodit u status Candidate Recommendation i vidoma pid nazvoyu flexbox 2012 Opera vprovadzhuye bezprefiksnu Chrome pidtrimuye potochnu specifikaciyu z prefiksami a Mozilla bez nih IE10 dodaye pidtrimku sintaksisu flexbox 2011 sho pochav zastarivati 2014 vsi novi brauzeri pidtrimuyut ostannyu specifikaciyu vklyuchno z IE 11 TerminologiyaDali navedeno dekilka terminiv pov yazanih z CSS flexbox Flex container Batkivskij element sho mistit vsi fragmenti kontentu Vikoristovuyuchi vlastivist CSS kontejner mozhna viznachiti yak flex abo inline flex Flex item Bud yakij dochirnij element sho zberigayetsya v fleks kontejneri vvazhayetsya gnuchkim Bud yakij tekst u mezhah kontejnera zagortayetsya Axes Kozhna gnuchka korobka mistit dvi osi osnovnu ta poperechnu Osnovna vis vis na yakij elementi virivnyuyutsya vidpovidno do odin z odnogo Perehresna vis perpendikulyarna golovnij osi Flex direction Vstanovlyuye osnovnu vis Mozhlivi argumenti left right center space between space around Justify content Viznachaye yak vmist rozmishuyetsya na osnovnij osi na potochnij liniyi Dodatkovi argumenti vlivo vpravo v centri probil prostir navkolo Align items Viznachaye za zamovchuvannyam yak gnuchki elementi rozmishuyutsya po poperechnij osi na kozhnij liniyi Align content Viznachaye za zamovchuvannyam virivnyuvannya linij poperechnoyi osi Align self Viznachaye yak roztashovuyetsya odin element uzdovzh osej Ce pereviznachaye bud yaki znachennya za zamovchuvannyam vstanovleni komandoyu Align items Directions Instrument viznachaye z chogo pochati rozmishennya elementiv u fleks kontejneri pochinayuchi z main start u ta perehodyachi do main end u Cross start cross end instrument viznachaye de fleks liniyi napovnyuyutsya kontentom vid cross start u do cross end u Order Rozmishuye elementi po grupah i viznachaye u yakomu poryadku voni povinni buti pomisheni v kontejner Flex flow Poyednuye flex direction i flex wrap Lines Fleksovi elementi mozhut buti rozmisheni na odinarnij liniyi abo na kilkoh ryadkah yak ce viznacheno vlastivistyu gnuchkogo paketuvannya yaka kontrolyuye yak napryamok poperechnoyi osi tak i sposib styaguvannya linij u kontejneri Dimensions Main size i cross size ce po suti visota i shirina fleks kontejnera i stosuyutsya golovnoyi ta poperechnoyi osej vidpovidno Flex basis Flex basis dozvolyaye viznachati pochatkovi shirinu ta visotu kontejnera Stvorennya fleks kontejneraPerevedennya kontejnera v stan fleks ye dosit prostim Vse sho neobhidno ce zminiti vlastivist displeyu na flex chi inline flex yak pokazano span class nt display span span class o span span class w span span class nt flex span span class o span chi span class nt display span span class o span span class w span span class nt inline flex span span class o span Pislya zmini vlastivosti displeyu na odnu z vkazanih vishe element staye fleks kontejnerom a vmist fleks kontentom Zmina vlastivosti displeyu na flex peretvoryuye kontejner na blokovo rivnevij element todi yak zmina na inline flex peretvoryuye kontejner na nelinijno rivnevij element Align to center Odnoyu z perevag fleksboksu ye mozhlivist legko virivnyati vmist u kontejneri vidnosno centra storinki yak po vertikali tak i po gorizontali display flex align items center justify content center Align Specific Child Elements Differently from its Siblings Vikoristovuyuchi margin left livij zovnishnij vidstup ta margin right pravij zovnishnij vidstup obrani dochirni elementi u fleks kontejneri mozhut buti virivnyani po osnovnih osyah porivnyano z yihnimi dvijnikami sho virivnyani z vikoristannyam instrumentu justify content U podanomu nizhche prikladi usi dochirni elementi virivnyano vidnosno pochatku fleks kontejnera za vinyatkom ostannogo elementa yakij virivnyano vidnosno pravogo krayu kontejnera za dopomogoyu vikoristannya instrumenta margin left auto livij zovnishnij vidstup avto ul list style none padding 10 px margin 0 background black display flex justify content flex start li display inline background white text align center font weight bold font size 2 em width 70 px height 70 px three margin left auto right align this child and those that follow in the source lt ul gt lt li id one gt 1 lt li gt lt li id two gt 2 lt li gt lt li id three gt 3 lt li gt lt ul gt Danij priklad virivnyuye ves kontent vidpovidno do kincya kontejnera za vinyatkom ostannogo elementa yakij zmisheno vlivo zavdyaki instrumentu margin right auto pravij zovnishnij vidstup avto ul list style none padding 10 px margin 0 background green display flex justify content flex end li display inline background white text align center font weight bold font size 2 em width 70 px margin right 2 px height 70 px one margin right auto left align this child and those that proceed it in the source PrimitkiPosilannyahttps www w3schools com css css3 flexbox asp 12 zhovtnya 2017 u Wayback Machine www w3schools com amer Arhiv originalu za 12 zhovtnya 2017 Procitovano 7 listopada 2018