Home

HTML page. Block

Зміст

Блокова модель

  1. Блокова модель box-sizing
  2. modern-normalize (border-box)
  3. Геометрія елемента padding margin border
  4. Горизонтальне центрування блокових елементів
  5. Рядкові елементи (inline)
  6. inline-block
  7. Ховаємо елементи display: none / .is-active (js)

Псевдокласи

  1. Псевдокласи :first-child і :last-child
  2. Псевдоклас :not(selector)
  3. Псевдоклас :nth-child(an+b)
  4. N-й елемент
  5. Парні і непарні елементи even odd
  6. Від N-го елемента
  7. Кожен N-й елемент
  8. Псевдоклас :nth-last-child(an+b) відлік ведеться з кінця колекції
  9. До N-го елемента .list-item:nth-last-child(-n + 3)

Flexbox

  1. Game Flexbox froggy
  2. Game Flexbox Playground
  3. Властивості Flex контейнера
  4. Властивості Flex елемента flex-basis: calc((100% - 20px) / 3);
  5. Гумовий контент SideBar. Приклад
  6. Гумовий контент Footer. Приклад

Блокова модель

  • box-sizing: content-box | border-box | inherit box В інструментах розробника, на вкладці Computed
  • modern-normalize (підключено тут)
  • Геометрія: верх (top), право (right), низ (bottom) і ліво (left)
  • padding: 10px 15px 20px 25px;
  • margin-bottom: 20px
  • border: 5px solid tomato;
  • border-radius: 10px;
  • Дізнатися тип будь-якого елемента можна в довіднику
  • display: block
  • Горизонтальне центрування блокових елементів
  • margin-right: auto; margin-left: auto;
  • or margin: 0 auto;
  • Рядкові елементи display: inline Їх ширина і висота залежать тільки від вмісту, явно задати їх не можна. Тобто властивості width і height не мають жодного ефекту. Тобто вони ігнорують значення верхніх і нижніх margin, padding і border Зате left right працюють
  • Картинкам надати примусово display: block;
  • inline-block/ a href="" class="link"/ display: inline-block;/ можна задати вертикальні поля та іншу геометрію.
  • Ховаємо елементи display: none / не можна анімувати / .is-active (js)

Псевдокласи

  • Псевдокласи :first-child і :last-child / Псевдоклас :last-child вибирає останній елемент в колекції сусідів. / .list-item {margin-bottom: 12px;} / .list-item:last-child {margin-bottom: 0; }
  • Аналогічно працює :first-child, застосовуючи стилі до першого елемента в колекції сусідів.
  • .list-item:not(:last-child) {}
  • Псевдоклас :nth-child(an+b)
  • Наприклад, якщо a = 2, а b = 1, то an+b = 2n+1. Ця формула вибере всі непарні елементи.
  • N-й елемент .list-item:nth-child(5) {}
  • Парні і непарні елементи .list-item:nth-child(2n) {}
  • Від N-го елемента .list-item:nth-child(n + 6) {}
  • Кожен N-й елемент .list-item:nth-child(3n + 1) {}
  • Псевдоклас :nth-last-child(an+b) відлік ведеться з кінця колекції .list-item:nth-last-child(3)
  • До N-го елемента .list-item:nth-last-child(-n + 3)

Flexbox

Властивості контейнера flex

  • Game Flexbox froggy
  • Game Flexbox Playground
  • display: flex | inline-flex
  • flex-direction: row | row-reverse | column | column-reverse;
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  • justify-content: flex-start justify-content: flex-end justify-content: center justify-content: space-between
  • align-items: stretch | flex-start | flex-end | center | baseline
  • flex-wrap: nowrap | wrap | wrap-reverse
  • wrap - дозволяє елементам перестрибувати на інші рядки, які за замовчуванням розташовуються зверху вниз (вздовж поперечної осі).
  • Сітка елементів

    • Lorem ipsum dolor

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro atque excepturi facilis molestias eius earum at officia.

    • Lorem ipsum dolor

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro atque excepturi facilis molestias eius earum at officia.

    • Lorem ipsum dolor

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro atque excepturi facilis molestias eius earum at officia.

    • Lorem ipsum dolor

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro atque excepturi facilis molestias eius earum at officia.

    • Lorem ipsum dolor

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro atque excepturi facilis molestias eius earum at officia.

    • Lorem ipsum dolor

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro atque excepturi facilis molestias eius earum at officia.

  • Set the width of the elements: flex-basis: calc((100% - 20px) / 3);
  • Властивість flex-basis - це заміна width для flex-елементі
  • gap. row-gap та column-gap
  • align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch align-content

Flex Приклад 1

  • Hello 1
  • Hello 2
  • Hello 3
  • Hello 4
  • Hello 5
  • Hello 6
  • Hello 7
  • Hello 8
  • Hello 9
                    display: flex; 
                    justify-content: space-around; 
                    align-items: center;

Flex Приклад 2

  • flex-wrap
  • wrap
  • gap
  • row-gap
  • column-gap
  • flex-basis
  • calc
  • Hello 8
  • Hello 9
                    display: flex; 
                    flex-wrap: wrap; 
                    gap: 10px;

Flexbox

Властивості flex елемента - дітей контейнера

  • Властивість flex-basis: auto | значення

    Визначає початковий розмір елемента перед розподілом вільного простору. Значенням може бути будь-яка валідна величина: пікселі, відсотки, rem тощо. Для flex-елементів - це заміна властивості width, але з деякими особливостями. У прикладах цього уроку для всіх flex-елементів задавався саме flex-basis, а не width

    Якщо вказані обидві властивості, flex-basis і width, то властивість width ігнорується Властивості min-width і max-width працюють як обмежувачі розміру елемента, навіть якщо у нього вказаний flex-basis, а не width Властивість flex-basis може визначати висоту, а не ширину елемента. Це відбувається у разі, якщо головна вісь - вертикальна.

  • Властивість flex-grow: частка

    За замовчуванню у всіх елементів flex-grow = 0

    flex-grow

    якщо у всіх елементів встановлено однакове значення цієї властивості, то вони займуть однакову кількість місця в контейнері. А ось, якщо всім задати значення 1, а одному елементу 2, то він спробує зайняти в два рази більше місця, ніж будь-який інший елемент.

  • Гумовий контент SideBar

    Приклад

    Main content

    Гумовий - flex-grow: 1;

  • Footer завжди внизу

    Приклад

    Тут контент. flex-grow: 1;

    Якщо контенту менше ніж може бути, контейнер не стягується. Він завжди рознянутий на весь екран. Nostrum reiciendis suscipit, culpa nam rem, libero delectus similique amet architecto qui deleniti expedita odio accusamus sint ratione nesciunt magni!
    «footer» Притиснутий до низу

  • Властивість flex-shrink

    Визначає здатність елемента, у разі потреби, займати менше місця (стискатися), ніж його початковий розмір. Значення задається як пропорція (частка). За замовчуванням у всіх елементів встановлено значення 1, тобто елементи будуть стискатися у разі потреби. Від'ємні значення задавати не можна. Використовується досить рідко

  • Властивість align-self

    align-self: auto | flex-start | flex-end | center | baseline | stretch

    Дозволяє елементу змінити своє положення на поперечній осі, перевизначивши для себе значення властивості align-items від контейнера. Аналогу для головної осі не існує, елемент може змістити себе тільки на поперечній осі.

  • Властивість order

    За замовчуванням елементи розташовуються у тому порядку, в якому вони вказані в HTML-файлі. Використовуючи властивість order можна візуально змінити порядок розташування елементів вздовж головної осі. При цьому, в HTML-коді нічого не зміниться.