Page 62 - 6108
P. 62

flex-end  –  рядки  flex-елементів  вирівнюються  по  лівому  краю  flex-
               контейнера щодо нижнього краю блоку-контейнера.
                      center – рядки flex-елементів вирівнюються по висоті по середині flex-
               контейнера щодо його лівого краю.
                      space-between  –  рядки  flex-елементів  вирівнюються  по  висоті  по
               середині  flex-контейнера  щодо  його  лівого  краю.  Вільний  простір
               розподіляється між ними. Перший ряд flex-елементів притискається до початку
               flex-контейнера, останній ряд – до нижнього краю.
                      space-around  –  рядки  flex-елементів  рівномірно  розподіляються  по
               висоті, вільний простір додається зверху і знизу рядки.
                      Властивості flex-елементів
                      Властивість       order     визначає       порядок,      в    якому      flex-елементи
               відображаються всередині flex-контейнера.
                      order: число;
                      число  –  властивість  задається  цілим  числом,  що  відповідає  за  порядок
               відображення  flex-елементів.  Значення  за  замовчуванням  0.  В  цьому  випадку
               вони слідують  один за одним  у міру додавання  у  flex-контейнер.  Найперший
               flex-елемент за замовчуванням розташований зліва.
                      Значення -1 ставить елемент на початок рядка, а 1 в кінець рядка.
                      Властивість  flex-basis  дозволяє  задати  базову  ширину  flex-елемента,

               щодо  якої  буде  відбуватися  розтягнення  flex-grow  або  звуження  flex-
               shrink елемента.
                      flex-basis: auto | число | initial  | inherit

                      auto  –  значення  за  замовчуванням.  Елемент  отримує  базову  ширину,
               відповідну ширині контенту всередині нього, коли її не вказано явно.
                      число – ширина елемента задається в px,%, em і інших одиницях виміру.
                      Властивість  flex-grow  визначає  коефіцієнт  збільшення  ширини  flex-
               елемента щодо інших flex-елементів. Властивість не успадковується.

                      flex-grow: число | initial  | inherit

                      число  –  позитивне  ціле  або  дробове  число,  яке  встановлює  коефіцієнт
               збільшення flex-елемента. Значення за замовчуванням 0.
                      Властивість  flex-shrink  вказує  коефіцієнт  зменшення  ширини  flex-
               елемента щодо інших flex-елементів. Працює тільки якщо для елемента задана
               ширина  за  допомогою  властивості  flex-basis  або  width.  Властивість  не
               успадковується.

                      flex-shrink: число | initial  | inherit

                      число  –  позитивне  ціле  або  дробове  число,  яке  встановлює  коефіцієнт
               зменшення flex-елемента. Значення за замовчуванням 1.
                      Властивість flex є скороченим записом властивостей flex-grow, flex-
               shrink і flex-basis.

                      flex: grow | shrink | basis
                      Значення за замовчуванням:

                      flex: 0 1 auto;
   57   58   59   60   61   62   63   64   65   66   67