Блоки

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 - вирівняти по лівому краю

  • flex-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;

flex-shrink: 1

Приклад

<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; ...) і має такі параметри: