Что такое Flexbox CSS?
Это отзывчивый дизайн-макет, который распределяет элементы внутри их родительского контейнера, даже если размер элементов неизвестен или динамичен (отсюда и термин «flex»).

В предыдущей заметке я рассказал обо всех свойствах, которые применяются к родительскому элементу гибкого контейнера.

Повторю, что эти свойства применяются к гибкому контейнеру (родителю):

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Для более подробного объяснения обратитесь к этой статье.

В этом посте мы рассмотрим свойства, применяемые к элементам flex (дочерним элементам родительского контейнера flex).

Полностью демонстрацию можно посмотреть здесь: https://demo-flexbox.netlify.app/.

СВОЙСТВА, ПРИМЕНЯЕМЫЕ К ГИБКИМ ЭЛЕМЕНТАМ (ДОЧЕРНИМ)
Ниже перечислены свойства, применяемые к гибким элементам:

• order
• flex-basis
• flex-grow
• flex-shrink
• flex
• align-self

Для демонстрации работы каждого из этих свойств воспользуемся следующим кодом:

	 

    
1
    
2
    
3
    
4
    
5
 

1. Order

• По умолчанию все flex-элементы отображаются в порядке следования исходного кода HTML.
• Порядок отображения flex-элементов внутри контейнера может быть изменен с помощью свойства order.
• По умолчанию порядок для всех flex-элементов следующий: 0.
• Это свойство принимает число, задающее порядок, и элементы располагаются в соответствии с ним, начиная с элементов, имеющих наименьшее значение порядка.
• Order может быть и отрицательным значением, что удобно, когда один элемент необходимо разместить перед другими.
• Если нескольким элементам присвоено одно и то же значение порядка, то внутри этой группы элементы размещаются в соответствии с порядком HTML-источника.

 
.flex-item {
       order: 0; // default
   }
   #item1 {
       order: 4;  
   }

2. flex-basis

• Это свойство задает начальный размер гибкого элемента перед распределением положительного пространства в контейнере между элементами.
• По умолчанию это свойство имеет значение auto, то есть браузер при распределении пространства использует высоту/ширину гибкого элемента или максимальный размер содержимого (в поддерживающих браузерах).
• Оно также принимает значение content, которое указывает, что гибкий элемент должен занимать место в контейнере на основе его содержимого.
• Это более новая реализация и имеет меньшую поддержку в браузерах.
• Свойство также принимает абсолютное значение для своей длины. Например, 1rem, 200px, 15% и т.д.
• flex-basis можно также установить в значение 0: Это то же самое, что указать width: 0;. Таким образом, гибкий элемент будет свернут до минимально возможного размера, основанного на содержимом.

 
.flex-item {
       flex-basis: auto; // default is auto
   }
   #item3 {
       flex-basis: 200px;
   }

3. flex-grow

• Это свойство определяет коэффициент, на который увеличивается гибкий элемент относительно других элементов в контейнере при заполнении положительного пространства.
• По умолчанию значение flex-grow равно 0. Дополнительное пространство остается незанятым.
• Если для всех элементов задано одинаковое значение flex-grow, то положительное пространство в контейнере распределяется поровну.
• Она принимает положительное значение, определяющее относительный коэффициент роста.
• Положительное значение представляет собой коэффициент и может быть любым числом: 2, 200, 50 или 1,5.

 
#container2 > .flex-item {
          flex-grow: 1;
      }
      #container3 > #item1 {
          flex-grow: 3; 
      }

4. flex-shrink

• Это свойство указывает относительный коэффициент, на который уменьшается гибкий элемент при распределении отрицательного пространства между элементами в контейнере.
• По умолчанию значение этого свойства равно 1, что указывает браузеру на сжатие элемента в коэффициент, равный его flex-basis.
• При положительном значении этого свойства гибкие элементы сжимаются соответствующим образом и не переполняют контейнер.
• Если всем flex-элементам задан одинаковый коэффициент flex-shrink, они сжимаются, а отрицательное пространство равномерно распределяется между ними.
• Если flex-shrink равен 0, то ни один из элементов не сжимается и не переполняется, если размер контейнера меньше всех элементов.
• Аналогично flex-grow, flex-shrink принимает значение, которое является относительным коэффициентом и может быть любым положительным числом: 2, 200, 50 или 1,5.

 
 #container2 > .flex-item {
       flex-shrink: 0;   // default is 1
   }
   #container3 > #item5 {
       flex-shrink: 2.5; 
   }

6. flex

• Это сокращенное свойство, объединяющее flex-grow, flex-shrink и flex-basis.
• Значения flex-shrink и flex-basis в этом свойстве необязательны.
• Это свойство может принимать значения следующим образом: flex-initial: flex: 0 1 auto | 0 auto; //default
• Это делает элемент flex частично гибким.
• flex-basis имеет значение auto, и элементы имеют автоматический размер, если не задан основной размер (ширина/высота).
• Элемент уменьшается в 1 раз, если контейнер не может вместить гибкий элемент, но не увеличивается, если есть положительное пространство для заполнения flex-auto: flex: auto | 1 1 auto;
• Это свойство устанавливает flex-основу на основе начальных свойств высоты/ширины, но элемент является гибким и увеличивается или уменьшается, когда это необходимо.
• Это свойство может принимать положительные значения, отличные от 1.
• flex-none: flex: none| 0 0 auto;
• Это свойство устанавливает flex-основу на основе начальных свойств высоты/ширины, но элемент является негибким и не увеличивается и не уменьшается.
• В результате элементы переполняются, если размер контейнера недостаточен для их размещения.
• flex может также принимать значения, принимаемые отдельными свойствами.

 
#container1 > .flex-item {
        flex: 0 1 auto;  // default is flex-initial
   }
   #container2 > .flex-item {
        flex: 1 1 auto;   
   }
   #container3 > .flex-item {
        flex: 0 0 auto;   
   }

 
#container4 > .flex-item {
        flex: ;
        flex: ;
        flex:  ;
        flex:  ;
        flex:   ;
   }

6. align-self

• Это свойство управляет выравниванием гибкого элемента по поперечной оси.
• Оно переопределяет значение align-items для конкретного гибкого элемента.
• align-self принимает все значения, присвоенные align-items, плюс значение auto, которое используется по умолчанию.
• Ниже перечислены значения, принимаемые этим свойством
  • auto: (по умолчанию) наследует значение align-items родительского свойства.
  • stretch: растягивает поперечный размер гибкого элемента до полного соответствия поперечной оси контейнера
  • flex-start: гибкий элемент размещается в начале поперечной оси (cross-start)
  • flex-end: гибкий элемент размещается в конце поперечной оси (cross-end)
  • center: гибкий элемент размещается в центре поперечной оси
  • baseline: гибкий элемент выравнивается таким образом, чтобы базовые линии элементов, отображаемых как align-self: baseline, были выровнены.
• Ознакомьтесь с этой статьей, чтобы понять, что такое align-items, cross-axis, cross-size и baselines

 
  #item1 {
      align-self: auto; // default
  }
  #item2 {
      align-self: flex-start;
  }
  #item3 {
      align-self: flex-end;
  }
  #item4 {
      align-self: center;
  }
  #item5, #item6 {
      align-self: baseline;
  }

Надеюсь, теперь вы сможете использовать эти концепции для создания лучших макетов.