Робота з flexbox

CSS3 flex-бокс, або flexbox, це режим розмітки створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.  В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і  його контенту (margins collapse).



Flex-контейнер
Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається flex або inline-flex значеннями display властивості.
Flex-айтем
Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.
Осі



Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (main axis) - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (cross axis) вісь, що перпендикулярна до main axis.

Display: Flex

Приклад сторінки:
Є 4 разнокольорових div’а різних розмірів, які знаходяться всередині сірого div’а. У кожного div’а євластивість display: block. Тому кожний квадрат займає всю ширину рядка.
Що  перетворити звичайні div’и у flexbox, потрібно  для блоку контейнеру примінити  властивость  display із значенням flex:
#container {
  display: flex;
}

Flex-direction


У flex-контейнера є дві осі: головна вісь і перпендикулярна їй.
По замовчуванню  всі предмети розташовуються вздовж  головної вісі: зліва направо. Тому вкладені блоки у контейнер  вирівнюються в лінію, коли застосовується властивість  display: flex
Напрямок  розкладки блоків керується властивістю flex-direction.
flex-direction дозволяє обертати головну вісь.
Значения властивості flex-direction::
row — рядок (значення по замовчуванню); row-reverse — рядок з елементами в зворотньому порядку; column — колонка; column-reverse — колонка з елементами в зворотньому порядку.

#container {
  display: flex;
  flex-direction: column;
}
Важливо! flex-direction: column не вирівнює квадрати по осі, яка перпендикулярна головній. Головна вісь сама змінює своє розташування і тепер направлена зверху вниз.
Значення властивості flex-direction: row-reverse і column-reverse.


Justify Content

Justify-content відповідає за вирівнювання елементів  по главній осі.
Властивість flex-direction: row.
#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
Justify-content може приймати 5 значень:
  1. flex-start;
  2. flex-end;
  3. center;
  4. space-between;
  5. space-around.
Space-between задає однакову відстань між квадратами, але не  між  контейнером і квадратами. Space-around також задає  однакову відстань між квадратами, але тепер відстань між контейнером  і квадратами  дорівнює половині відстані між квадратами.

Align Items

Якщо  justify-content працює з головною віссю, то align-items працює з віссю, перпендикулярною главній осі.
Отже, якщо  flex-direction: row , то блоки в контейнері відносно перпендикудярної осі при різних значеннях   align-items  будуть  поводити себе таким чином:
  1. flex-start;
  2. flex-end;
  3. center;
  4. stretch;
  5. baseline.
Щоб  проілюструвати як працюють осі можна побачити, якщо  для контейнера вказати такі властивості: justify-content , align-items ,  flex-direction:

Align Self

Align-self  дозволяє вирівнювати елементи  кожен окремо.
#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// Only this square will be centered.
Наприклад,  якщо для  двох квадратів застосувати align-self, а для інших align-items: center і flex-direction: row., то результат буде таким:

Flex-Basis

Flex-basis  відповідає  за початковий розмір елементів до того, як вони будуть змінені  іншими властивостями  Flexbox:
Flex-basis впливає на розмір елементів вздовж головної осі.
Якщо  змінити напрямок головної осі, результат буде таким:
Flex Grow
Якщо задати блокам однакову ширину в 120 рх :
По замовчуванню flex-grow дорівнює 0. Це означає, що квадратам заборонено рости (займати вільне місце  в контейнері).
Якщо  задати flex-grow =1 для кожного блока:
Блоки займуть  вільне місце в контейнері. Значенняflex-grow анулює значення ширини.
Это значит, что не важно, какое значение у flex-grow, важно, какое оно по отношению к другим квадратам:
Вначале flex-grow каждого квадрата равен 1, в сумме получится 6. Значит, наш контейнер поделен на 6 частей. Каждый квадрат будет занимать 1/6 часть доступного пространства а контейнере.
Когда flex-grow третьего квадрата становится равным 2, контейнер делится на 7 частей (1 + 1 + 2 + 1 + 1 + 1).
Теперь третий квадрат занимает 2/7 пространства, остальные — по 1/7.
И так далее.
Стоит помнить, что flex-grow работает только для главной оси (пока мы не поменяем ее направление).

Flex Shrink

Flex-shrink —   визначає на скільки блоку можна зменшитись в розмірі.
Flex-shrink  використовується, коли елементи  не поміщаються  в контейнер.
По замовчуванню значення flex-shrink для кожного квадрата дорівнює 1. Це означає, що квадрати будуть стискатися, коли контейнер буде зменшуватись.
Якщо  flex-grow і flex-shrink =1:
Якщо встановити, наприклад,  для властивості  flex-shrink   значення для третього блока=0, то цей блок стискатись не буде і  його ширина залишиться 120px:

Приклад для вивчення CSS - властивостей flexbox:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flaxbox</title>
<style>
ul {
  display: flex; 
  margin: 0;
  padding: 0;
  background: #ea8c8c;
  list-style: none;
  flex-wrap: wrap;
  height: 500px;
 }
li {
  margin: 5px; 
  background: #c3e2d2;
  border-radius: 3px;
}
ul li:last-of-type {
  }
</style>
</head>
<body>
<div class="container-thingy">
  <ul>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/pear.svg" alt="Pear graphic" /></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/grapes_copy.svg" alt="Grapes graphic" /></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/orange.svg" alt="Orange graphic" /></li>  
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/pear.svg" alt="Pear graphic" /></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/grapes_copy.svg" alt="Grapes graphic" /></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/orange.svg" alt="Orange graphic" /></li> 
  </ul>
</div>
</body>
</html>














2 коментарі:

  1. Я надзвичайно задоволений послугою кредитування містера Педро, і ваші пропозиції допомогли мені отримати дуже хорошу позику на житло. Я буду радий порекомендувати ваші послуги своїм друзям, які шукають позику.” не йдіть нікуди більше, якщо шукаєте позику. містер Педро найкращий. дуже рекомендую його послуги. Найкраще, з чим я коли-небудь мав задоволення працювати, це його кредит із низькою ставкою. ” це зв’язок з містером Педро на всяк випадок, якщо хтось тут шукає позику. WhatsApp: +18632310632. & електронна адреса: pedroloanss@gmail.com

    ВідповістиВидалити