Форма входа

Unatka.ru

css3

Шпаргалка Модуль css Flexbox

Предисловие


Модуль css Flexbox Layout ( Flexible Box Layout Module ) на сегодня применим во всех  последних версиях популярных браузеров, кроме IE. В  IE применение ограничено.
Flexbox, модуль макета гибкого контейнера, позволяет аккуратно выполнять верстку, не заботясь о длине колонок. Что очень важно. Элементы контейнера могут пропорционально растягиваться и сжиматься. На мой взгляд — вещь приятная и весьма полезная адаптивному дизайну. Предыдущий шаблон этого сайта, а также шаблон моей cms - kalinka приспособлен к работе с разными устройствами и сделан на флексах.

Свойства  flexbox


    Свойства есть как для родительского элемента, так и для дочерних. Родительским элементом будет некий флекс-контейнер, дочерними — флекс - элементы.  Элементы вложены в контейнер.

Flexbox  на примерах:


Родительский элемент flex — контейнер


display : flex;
Например, для div id=“box“ в файл  css впишем

Код:


#box  { display:  flex; }


По умолчанию flex — flow: row, nowrap; justify — content: flex — start; align — items: stretch;


 К родительскому элементу, например, элементу  класса  container, применяются следующие свойства:


flex — flow


Объединенное свойство flex — direction и  flex — wrap.
По умолчанию:  row, nowrap.


flex — direction


.container {
flex — direction: row |  row — reverse  | column |  column — reverse;
}


flex — direction задает направление оси расположения флекс — элементов.
 По умолчанию:  row;
row — все флекс — элементы располагаются в одну строку, для русского - слева направо.
Reverse — это противоположное направление. Поэтому,  row — reverse флекс - элементы расположены справа налево.

column - флекс — элементы расположены вертикально, сверху вниз.
column — reverse — флекс — элементы расположены вертикально, снизу вверх.


Вид:

Свойства по умолчанию

1
2
.examplebox {display : flex;}

Вертикальное расположение

1
display : flex;
flex-direction: column;

Код:

<!DOCTYPE html>
<meta charset="utf-8";>
<style>
 .examplebox, .examplebox1  {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
}
 .examplebox div, .examplebox1 div {
    border: dotted 2px green;
    width: 80px;
}

  .box1 {
      flex-direction:  column;
}
</style>

<h4>Свойства по умолчанию</h4>

<div class="examplebox">

  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>2</strong>
  </div>

  <div>
    <code>.examplebox {display : flex;}</code>
  </div>

</div>

<h4>Вертикальное расположение</h4>

<div class = "examplebox box1" >

  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>
      <code>display : flex; </code>
    </strong>
  </div>

  <div>
    <code> flex-direction:  column;</code>
  </div>

</div>

<br> 

 

flex — wrap


.container {
flex — wrap: nowrap | wrap | wrap-reverse;
}
    Указывает расположение элементов в одну или несколько строк. Бывает, что число элементов нельзя разместить в контейнере в одну строку, тогда часть элементов переносится с помощью этого свойства, на следующую строку.
По умолчанию:  nowrap;
nowrap — все флекс — элементы расположены в одной строке.
wrap - флекс — элементы могут быть перенесены на другие строки, сверху вниз.
wrap — reverse - элементы могут быть перенесены на другие строки, снизу вверх.


Вид:

flex-wrap

1
display : flex;
flex-wrap: wrap;
4

Код:

<!DOCTYPE html>
<meta charset = "utf-8";>
<style>
 .examplebox2  {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
}

 .examplebox2 div {
    border: dotted 2px green;
    width: 33%;
}

 .box9 {
      flex-wrap:  wrap;
}
</style>


<h4>flex-wrap</h4>

<div class = "examplebox2 box9" >

  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>
      <code>display : flex; </code>
    </strong>
  </div>

  <div>
    <code> flex-wrap:  wrap;</code>
  </div>

  <div>
    <code> 4</code>
  </div>


</div>

<br>


justify — content


При необходимости определяет расположение элементов относительно горизонтальной оси контейнера.


.container {
justify — content: flex — start |   flex — end | center | space — between | space — around;
}
По умолчанию  flex — start;
flex — start прижимает флекс -элементы к левому краю при письме слева направо.
flex — end прижимает флекс -элементы к правому краю при письме слева направо.
center располагает флекс — элементы по центру экрана;
space — between  флекс — элементы равномерно распределены по экрану. Левый прижат к левому краю, правый — к правому;
space — around крайние элементы расположены на равном расстоянии от краев экрана. Оставшееся пространство распределено между элементами.


Вид:

justify-content

1
display : flex;
justify-content: center;

1
display : flex;
justify-content: flex-end;

1
display : flex;
justify-content: space-between;

1
display : flex;
justify-content: space-around;
Код:

<!DOCTYPE html>
<meta charset="utf-8";>
<style>
 .examplebox, .examplebox1  {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
}
 .examplebox div, .examplebox1 div {
    border: dotted 2px green;
    width: 80px;
}
 .box2 {
       justify-content: center;
}
 .box3 {
       justify-content: flex-end;
}
 .box4 {
       justify-content: space-between;
}
 .box5 {
       justify-content: space-around;
}
</style>
 
<h4>justify-content</h4>

  <div class="examplebox box2">

    <div>
      <strong>1</strong>
    </div>

    <div>
      <strong>
        <code>display : flex; </code>
      </strong>
    </div>

    <div>
      <code>justify-content: center;</code>
    </div>

  </div>

<br>

<div class="examplebox box3">

  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>
      <code>display : flex; </code>
    </strong>
  </div>

  <div>
    <code>justify-content: flex-end;</code>
  </div>

</div>

<br>

<div class="examplebox box4">

  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>
      <code>display : flex; </code>
    </strong>
  </div>

  <div>
    <code>justify-content: space-between;</code>
  </div>

</div>

<br>

<div class="examplebox box5">

  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>
      <code>display : flex; </code>
    </strong>
  </div>

  <div>
    <code>justify-content: space-around;</code>
  </div>

</div>

<br>

 

align — items


При необходимости определяет расположение элементов относительно вертикальной оси контейнера


.container {
align — items: flex — start |   flex — end | center| baseline | stretch;
}


По умолчанию  stretch, элементы растягиваются так, чтобы заполнить весь контейнер.
flex — start прижимает элементы к верхней части контейнера;
flex — end прижимает элементы к нижней части контейнера;
center  выравнивает элементы по центру;
baseline  выравнивает элементы по базовой линии.


Вид:

align-items

1
display : flex;
align-items: flex-start;

1
display : flex;
align-items: flex-end;

1
display : flex;
align-items: stretch;
Код:

<!DOCTYPE html>
<meta charset = "utf - 8";>
<style>
 .examplebox, .examplebox1  {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
}
 .examplebox div, .examplebox1 div {
    border: dotted 2px green;
    width: 80px;
}
 .examplebox1 {
    height: 100px;
}

 .box6 {
       align-items: flex-start;
}
 .box7 {
       align-items: flex-end;
}
 .box8 {
       align-items: stretch;
}
</style>
<h4>align-items</h4>

<div class="examplebox1 box6">

  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>
      <code>display : flex; </code>
    </strong>
  </div>

  <div>
    <code>align-items: flex-start;</code>
  </div>

</div>

<br>

<div class="examplebox1 box7">

  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>
      <code>display : flex; </code>
    </strong>
  </div>

  <div>
    <code>align-items: flex-end;</code>
  </div>

</div>

<br>

<div class="examplebox1 box8">
  <div>
    <strong>1</strong>
  </div>

  <div>
    <strong>
      <code>display : flex; </code>
    </strong>
  </div>

  <div>
    <code>align-items: stretch;</code>
  </div>

</div>
<br>


Дочерние элементы — Флекс-элементы


Флекс — элементы по умолчанию располагаются в порядке натурального ряда. Например, если мы имеем 4 элемента, они расположатся в порядке 1, 2, 3, 4.


order


Свойство изменяет порядок флекс - элементов внутри контейнера. Класс присваивается элементу.
.item {
  order:  integer;
}


Вид:

Order

1
2
3
Код:

<!DOCTYPE html>
<meta charset = "utf-8";>
<style>
 .examplebox  {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
}
 .examplebox div {
    border: dotted 2px green;
    width: 80px;
}
  .item {
     order: 2;
}
</style>
<h4>Order</h4>

<div class = "examplebox" >

  <div class="item">
    <strong>
        1    
    </strong>
  </div>

  <div>
    <strong>
          2
    </strong>
  </div>

  <div>
           3
  </div>

</div>

<br>


flex-grow


    Определяет возможность элемента растягиваться в заданном порядке.
По умолчанию: 0. Если все элементы имеют значение 1, то свободное пространство равномерно распределяется в контейнере. Если один из элементов будет иметь значение 2, то указанный элемент будет растянут на вдвое большую ширину.


Вид:

flex - grow

1
2
3
Код:

<!DOCTYPE html>
<meta charset = "utf-8";>
<style>
 .examplebox  {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
}
 .examplebox div {
    border: dotted 2px green;
    width: 80px;
}
 
 .item4 {
     flex-grow: 2;
}
</style>

<h4>flex - grow</h4>
<div class = "examplebox" >

  <div class="item3">
    <strong>
        1    
    </strong>
  </div>

  <div class="item4">
    <strong>
          2
    </strong>
  </div>

  <div class="item5">
           3
  </div>

</div>
<br>


flex-basis


    Определяет размер элемента по умолчанию. Размер может быть указан как размерная единица (пкс, мм, %), 0 или auto.
По умолчанию: auto.


Вид:

flex - basis

1
2: flex-basis: 120px
3

1
2: flex-basis: 0
3

1
2: flex-basis: auto
3
Код:

<!DOCTYPE html>
<meta charset = "utf-8";>
<style>
 .examplebox  {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
}
 .examplebox div {
    border: dotted 2px green;
    width: 80px;
}
 
 .item7 {
     flex-basis: 120px;
}

 .item10 {
     flex-basis: 0;
}

 .item13 {
     flex-basis: auto;
}
</style>
<h4>flex - basis</h4>
<div class = "examplebox" >

  <div class="item6">
    <strong>
        1    
    </strong>
  </div>

  <div class="item7">
    <strong>
          2: <code>flex-basis: 120px</code>
    </strong>
  </div>

  <div class="item8">
           3
  </div>

</div>

<br>

<div class = "examplebox" >

  <div class="item9">
    <strong>
        1    
    </strong>
  </div>

  <div class="item10">
    <strong>
          2: <code>flex-basis: 0</code>
    </strong>
  </div>

  <div class="item11">
           3
  </div>

</div>


<br>

<div class = "examplebox" >

  <div class="item12">
    <strong>
        1    
    </strong>
  </div>

  <div class="item13">
    <strong>
          2: <code>flex-basis: auto</code>
    </strong>
  </div>

  <div class="item14">
           3
  </div>

</div>


<br>

 

flex


.item {
flex: none | flex — grow  (flex — shrink || flex — basis )
}
    Сокращенная запись. Рекомендуется к применению.
По умолчанию: 0 1  auto;
При задании свойств, отличных от свойств по умолчанию, flex — grow  указывать обязательно, остальные можно не указывать.


Вид:

1
flex: 1;
.examplebox {display : flex;}
Код:

<!DOCTYPE html>
<meta charset = "utf-8";>
<style>
 .examplebox  {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
}
 .examplebox div {
    border: dotted 2px green;
    width: 80px;
}
 
.it {
    flex: 1;
}
</style>

<div class="examplebox">

  <div class="it">
    <strong>1</strong>
  </div>

  <div class="it">
    <strong><code>flex: 1;</code></strong>
  </div>

  <div class="it">
    <code>.examplebox {display : flex;}</code>
  </div>

</div>

<br>

Итоги

В этой статье я изложила основные свойства модуля css Flexbox. Модуль удобно использовать для отдельных элементов страницы. Вместе со свойством grid Flexbox позволяет делать оптимальную адаптивную верстку.

Родионова Галина Евгеньевна

2019-02-06


◄ Назад 

 Вперед ►

Поделитесь с друзьями!

Закрыть
Форма входа

Я согласен(на) на обработку моих персональных данных