Flexbox — еще пара секретов отличной верстки

Представляем Вашему вниманию несколько секретов комфортной верстки на Flexbox! Тонкости работы с супер-механизмом CSS для настоящих гуру!

1. В чем разница между align-items и align-content?

   • В случае, если ряд флекс-элементов только один, тогда подходящее свойство — align-items;
   • В случае, если рядо флекс-элементов несколько, то стоит использовать align-content ;

2. Как расположить флекс-элемент строго по середине, сохранив при этом «гибкость» верстки?

   Необходимо сделать родительский элемент флекс-контейнером, а дочернему установить margin: auto;

3. Как сократить свойства flex?

   Действительно, у flexbox есть и сокращенное написание и оно состоит из 3 компонентов: flex-grow, flex-shrink, flex-basis. Обратите внимание: написание через пробел. Например: .flex {2 4 250px;}. К тому же существуют и несколько стандартизированных сокращенных свойств flexbox, когда один или несколько компонентов равны нулю или не нужны:
   flex: initial —> flex: 0 1 auto;
   flex: auto —> flex: 1 1 auto;
   flex: none —> flex: 0 0 auto;

4. Как создать блоки с одинаковой высотой с помощью Flexbox?

   Предположим, структура блока такая:
   <div class=»flexblock»>
   <section>
   …
   </section>
   </div>
   Тогда с помощью flexbox установим следующие свойства:
   .flexblock {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   }

5. Что такое flex-flow?

   Flex-flow позволяет сократить Ваше время, одновременно задав свойства и flex-direction, и flex-wrap. Это свойство не наследуется и его значение по умолчанию: row nowrap.

Как видно, всё довольно просто! Гибкая верстка еще никогда не была такой доступной:)