Верстка flexbox`ами

Алексей Будагов,
Очень доступно объясняется в серии видео тут: https://www.youtube.com/watch?v=RNjnRA0QSug Все свойства по flexbox`ам (на htmlbook пока их нет)
Для контейнера:
display: flex; 
flex-direction: row; /*row-reverse column column-reverse Направление главной оси*/  
justify-content: flex-start; /*center flex-end space-around space-between Выравнивание по главной ости*/  
align-items: stretch; /*baseline center flex-end flex-start Выравнивание по пореречной оси*/  
flex-wrap: nowrap; /*wrap wrap-reverse Задает многострочную расстановку блоков по главной оси*/  
align-content: stretch; /*center flex-end flex-start space-around space-beetween Выравнивает строки flex-контейнера при наличии свободного места на поперечной оси аналогично тому, как это делает justify-content на главной оси*/  
flex-flow: row nowrap; /*Сокращенное написание для flex-direction + flex-wrap*/
Для элементов
flex-basis: auto; /*px em % etc. Задает начальный размер элемента относительно главной оси*/
flex-grow: 0; /*1 - inf. Определяет, какую часть свободного пространства может занять контейнер, в соотношении с другими контейнерами*/ 
flex-shrink: 1; /*1 - inf. Указывает фактор гибкого растягивания, который определяет, насколько будет сужен flex-элемент относительно оставшихся*/  
flex: 0 1 auto; /*Сокращенное написание для flex-grow + flex-shrink + flex-basis*/
Опубликовано 19 Марта 2016 | Обновлено 3 Марта 2018
верстка, flexbox

Возврат к списку

Комментарии