Свойство Flexbox в CSS3.
Всем привет! Сегодня мы поговорим об очень интересном свойстве flexbox, появившемся в CSS3.
Свойство flexbox было создано для того, чтобы нам было удобно располагать элементы, когда мы не знаем их количество и/или размеры.
Свойство flexbox - это новый подход к верстке, который вы, наверняка, будете использовать в будущем. Сейчас уже большая часть современных браузеров поддерживает данное свойство, но, т.к. нам все еще приходится поддерживать старые браузеры, то сейчас это свойство не так полезно, как хотелось бы. Однако, знать его нужно, так что давайте приступать к изучению.
Joni Bologna - девушка-дизайнер уже сделала прекрасную шпаргалку по этой теме, и мы будем использовать ее, чтобы лучше понять данное свойство. Перейдите по ссылке Flexbox Cheatsheet, и здесь вы найдете PDF файл с наглядным описанием.
Тут все очень понятно, так что вы и сами разберетесь, но я сделаю несколько пояснений.
Во-первых, у нас есть flex-контейнер - контейнер, который содержит flex-элементы.
Во-вторых, у нас есть главная направляющая(по горизонтали) и пересекающая ее перпендикулярная ось(по вертикали). У каждой из этих осей есть начало и конец.
Чтобы активировать свойство, просто создайте контейнер и пропишите ему свойство
.container {
display: flex;
}
Дальше вы можете выбрать нужное вам направление: горизонтально(row) или вертикально(column)
Для первого:
flex-direction: row;
Для второго:
flex-direction: column;
Чтобы поменять порядок расположения элементов(т.е. первый станет последним, а последний первым), вам нужно добавить приставку -reverse
flex-direction: row-reverse;
или
flex-direction: column-reverse;
Помимо этого, вы можете выбрать, как должны располагаться элементы на прямой: в начале, середине или конце.
justify-content: flex-start; // в начале
justify-content: center; // в центре
justify-content: flex-end; // в конце
Кроме этих значений, есть также space-between и space-around. Первое означает, что элементы будут располагаться с равными отступами между собой, второй означает, что будет взята половина отступа в начале, конце и между элементами.
Еще одна сильная вещь в свойстве flexbox - flex-wrap. Т.е. вы можете указать, как вести себя элементам при изменении области просмотра. К примеру, вы можете указать
flex-wrap: wrap;
И тогда, при уменьшении области просмотра, элементы будут становиться в ряды. Т.е. вести себя так, будто бы у нас есть сетка. Это может быть очень удобно для галереи, как пример.
Итак, мы разобрали самые основные свойства flexbox модели, зная которые, вы уже можете начать верстать по-новому. Остальные свойства и картинки, наглядно поясняющие материал, вы можете найти в шпаргалке, перейдя по ссылке в начале статьи.
Спасибо за внимание и удачи!
-
Создано 23.12.2014 19:00:08
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.