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

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.

 

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

0
Подписаться на новости

Отправить ответ

Оставьте первый комментарий!

  Subscribe  
Уведомить о