В чем разница между flexbox и сеточной системой?
В чем разница между системами Flexbox и grid? При каких обстоятельствах я должен использовать каждую систему?
Уточнен язык вопроса; это не дубликат stackoverflow.com/questions/44377343/css-only-masonry-layout
вкратце flex имеет размерность 1, тогда как сетка имеет размерность 2. Я написал статью здесь, исследуя варианты использования для каждого, если вам интересно узнать больше
Ответы 2
Разница между Сетка и Flexbox
- Flexbox лучше всего подходит для одномерного макета (например, строки или столбца)
- Сетка CSS лучше всего подходит для 2D-разметки (строка и столбец)
- Flexbox One Dimension бывший:
- CSS-сетка 2D бывший:
- Grid может делать то, что Flexbox не может, Flexbox может делать то, что Grid не может.
- Они могут работать вместе: элемент сетки может быть контейнером Flexbox. Гибкий элемент может быть контейнером сетка.
С помощью CSS Grid мы можем устанавливать отношения по горизонтали и вертикали, но в то же время. Flexbox, с другой стороны, застревает в вертикальной или горизонтальной компоновке.
Flexbox является одномерным и позволяет всем его прямым дочерним элементам («гибким элементам») располагаться вдоль его основной определенной оси, и контекст может потенциально измениться, если ширина еще не определена.
Принимая во внимание, что сетки CSS разработаны как двухмерная система макета: сетки CSS могут обрабатывать как столбцы, так и строки.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
Прочтите Flexbox vs CSS Grid: пример реального мира.