Головна‎ > ‎HTML+CSS‎ > ‎

Блоки

CSS3 Flexbox


Блоки в одну лінію

Контейтнер: 
display:flex;


Стрибки

Контейтнер: 
display:flex; 
flex-wrap:wrap;

box1, box2, box3:
width:300px;


Адаптація

@media (min-width:640px){
     .container{
      display:
flex;
   }
}


Вирівнювання едементів

justify-content: 
  • flex-start - вирівняти по лівому краю
  • space-end - зправа
  • center - по центру
  • space-between - крайні елементи торкаються кутів
  • space-around - рівномірно
  • space-evenly - рівномірно (з більшими відступами по краях)

flex-direction: column; - по вертикалі  // row
flex-direction: column-reverse; - по вертикалі, в зворотньому порядку  // row-reverse

align-items: 
    • flex-start; - різна висота для блоків і притиснуті догори
    • center - різна висота для блоків і по центру
    • flex-end - різна висота для блоків і притиснуті донизу
    • stretch - розтягнути до найбільшого елемента

align-content:



Елемент:

flex: 1 - займати простір для одного елементу
order: 2 - порядок блоків (на 2-гу позицію)  // може бути -1, -2
flex-grow: 10; flex-basis: 100px;


Приклад

<style>
   .container1{
      display: flex;
      flex-wrap: wrap;    
   }
   .container1 div{
      padding:10px;
      border: 1px solid silver;
   }
   .box1{
      flex: 1;
   }
   .box2{
      flex: 2;
   }
   .box3{
      flex: 3;
   }
</style>


<div class="container1">
   <div class="box1">
      <h1>Box 1</h1>
      Тарас Шевченко народився в сім’ї кріпосного селянина 9 березня 1814 року
   </div>
   <div class="box2">
      <h1>Box 2</h1>
      Тарас Шевченко народився в сім’ї кріпосного селянина 9 березня 1814 року
   </div>
   <div class="box3">
      <h1>Box 3</h1>
      Тарас Шевченко народився в сім’ї кріпосного селянина 9 березня 1814 року
   </div>
</div>


Блоки з відступами 5% між ними

Контейтнер: 
display: flex;
justify-content: flex-between;

box1, box2, box3:
box-sizing: bordr-box;
flex-basis: 30%;


Текст вцентрі по горизонталі і по вертикалі

Контейтнер: 
display: flex;

box1, box2, box3:
margin: 0 auto; - по горизонталі
margin: auto; в чотирьох напрямках






* Chrom, Safary - можуть потребувати префікс -webkit-



CSS2
(Якщо в головного контейгера пропала висота то clearfix)



position - працює з додатковими властивостями (left 5px; ...) і має такі параметри:

static

Елементи відображаються як зазвичай. Використання властивостей lefttoprightbottom та z-index не призводить до будь-яких результатів. Без задання.

absolute

Над усіма (місце, що звільнив елемент заповнюється іншими елементами) і вставляється відносно свого батьківського, не статично позиційованого елемента, якщо такого елемента немає, то їм вважається вікно браузера (При цьому ширина елемента, без задання, встановлюється за його вмістом). Нове місце розраховується за допомогою властивостей lefttopright та bottom

На положення впливає значення властивості position батьківського елемента. Так, якщо у батька значення position встановлено як static або батька немає, то відлік координат ведеться від краю вікна браузера.

Якщо у батька значення position задано як relative, то відлік координат ведеться від краю батьківського елементу.

fixed

За своєю дією це значення близьке до absolute, але на відміну від нього позиціонує елемент відносно вікна браузера, а не документа та не змінює свого положення при прокручуванні веб-сторінки.

relative

Відносне позиціювання. Положення елемента встановлюється відносно його поточного положення. Додавання властивостей lefttopright і bottom змінює позицію елемента і зрушує його в ту чи іншу сторону. Ця властивість дозволяє змінюва ти позицію елемента без зміни макету.

sticky

Це поєднання відносного і фіксованого позиціонування. Елемент розглядається як відносно позиційований і прокручується разом з вмістом сторінки до тих під, поки він не перетинає певний поріг, після чого він стає фіксованим. Зазвичай застосовується для фіксації заголовка на одному місці, доки вміст, до якого належить заголовок, прокручується на сторінці.

initial

Встановлює властивість у значення без задання.

inherit

Вказує на спадковість властивостей від свого батьківського елемента.