2021-02-04 12:05:01
Flexbox и CSS Grid: разрушение мифов
Мифы о том, что «Grid - убийца Flexbox», или например «Flexbox теперь как фолбэк для Grids», только вредят развитию технологий. Я надеюсь, мы сможем избавиться от таких стереотипов.
Так что, давайте разберемся с этими мифами, чтобы понять истинную силу двух технологий, работающих совместно, а не друг против друга.
Grid пришел, чтобы убить Flexbox.
Люди склонны сталкивать технологии (и людей) друг с другом. И даже если сравнение и соревнование зачастую ведет к развитию индустрии, это не тот случай.
Flexbox и Grids разрабатывались примерно в одном время, но для разных целей, о чем мы поговорим дальше в статье. Если у вас еще осталась толика сомнений, то у Grids и Flexbox одни и те же редакторы в черновике W3C. Они работают вместе, они не соревнуются.
Flexbox – это фолбек для Grids.
Цели Flexbox и Grids отличаются. Поэтому не стоит строго придерживаться мнения, что предыдущую технологию необходимо использовать как фолбек, особенно если ее поддержка в IE такая же плохая, как у Grids.»
Работа с layout
Одномерное макетирование.
Если контент необходимо расположить в одном измерении, будь-то горизонталь (ось Х) или вертикаль (ось У), вам необходимо, чтобы макет отвечал контенту элементов. Тогда вам нужен Flexbox. Он отлично подходит для компонентов (но не ограничен ими).
Двумерное макетирование.
Если контент необходимо расположить в двух осях, то есть в виде… сетки! Это свойство идеально подходит для макетов страниц и сложных, нелинейных компонентов.
В каждом правиле есть, конечно, исключения, но вам будет намного удобнее, если вы зарезервируете Grids для основных и визуально сложных макетов, а Flexbox для линейных макетов.
6.0K views09:05
S
