[{"data":1,"prerenderedAt":1546},["ShallowReactive",2],{"$ffgxfUba5JLaZgjP5MVQ7G-h2Yf8uunUHhMRxYQNKxug":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":93,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":96,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":101,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":446,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":668,"mdc-jyc1x1-key":688,"mdc-qv9shw-key":700,"mdc--qun9vg-key":708,"mdc--f6n8ff-key":716,"mdc--rc3rb6-key":724,"mdc--6gcgwm-key":732,"mdc--nyh7yx-key":740,"mdc-dh7755-key":755,"mdc-b48plf-key":976,"mdc--a2xfi0-key":1000,"mdc-5381p-key":1156,"mdc--nfiiq4-key":1164,"mdc-vxc25t-key":1226,"mdc-ls2qp0-key":1353,"mdc--pi4xoq-key":1366,"mdc--1oq8xo-key":1374,"mdc-5dhfpn-key":1538},{"content":4,"quizQuestionContent":64,"type":83,"pageMeta":84},[5,9,13,16,20,24,27,30,34,37,41,44,48,51,54,58,61],{"id":6,"value":7,"isTypeH1":8},"1860","Flexbox и Grid: ключевые отличия и выбор подхода",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4224","Теория: что решает Flexbox","theory-what-flexbox-solves",{"id":14,"value":15,"isTypeParagraph":8},"9746","Flexbox (Flexible Box Layout) — это режим CSS-раскладки, который упрощает выравнивание элементов и распределение свободного пространства внутри контейнера.  \nВнутри flex-контейнера элементы могут располагаться по строке или по колонке (в зависимости от направления), растягиваться/сжиматься под доступное место, а при включённом переносе переходить на новые линии.\n\nКлючевая идея Flexbox — две оси:\n- Основная ось (main axis): направление, вдоль которого элементы раскладываются в первую очередь.\n- Поперечная ось (cross axis): направление, по которому выполняется выравнивание относительно основной оси.\n\nЧасто используемые свойства контейнера:\n- `display: flex` — включает Flexbox.\n- `flex-direction` — задаёт направление: `row`, `column` и варианты с `-reverse`.\n- `justify-content` — распределяет элементы вдоль основной оси.\n- `align-items` — выравнивает элементы по поперечной оси.\n- `flex-wrap` — разрешает перенос элементов на новые линии.\n\nПример: панель действий, где последняя кнопка прижата к правому краю\n\nHTML\n```\n\u003Cdiv class=\"toolbar\">\n  \u003Cbutton>Назад\u003C/button>\n  \u003Cbutton>Вперёд\u003C/button>\n  \u003Cbutton class=\"primary\">Сохранить\u003C/button>\n\u003C/div>\n```\n\nCSS\n```\n.toolbar {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n.primary {\n  margin-left: auto;\n}\n```\n\nОбъяснение по шагам:\n1) `display: flex` превращает `.toolbar` в flex-контейнер, элементы внутри становятся flex-элементами.  \n2) `align-items: center` выравнивает элементы по поперечной оси (обычно по вертикали, если направление `row`).  \n3) `margin-left: auto` забирает всё свободное место слева от `.primary`, из‑за чего кнопка «уезжает» к концу строки.",{"id":17,"description":18,"titleAlert":19,"isTypeAlertWarning":8},"649","Свойство `order` изменяет только визуальный порядок элементов, но не меняет их порядок в DOM, поэтому без необходимости не следует использовать `order` для смысловой перестановки важных частей интерфейса (например, пунктов навигации или полей формы).",null,{"id":21,"value":22,"anchor":23,"isTypeH2":8},"4225","Теория: что решает Grid","theory-what-grid-solves",{"id":25,"value":26,"isTypeParagraph":8},"9747","Grid (Grid Layout) — это двумерная система CSS-раскладки, предназначенная для построения сеток: одновременно задаются строки и колонки, формируя структуру, в которую размещаются элементы.  \nGrid удобен там, где требуется «каркас» страницы, галерея, сложная сетка карточек, области макета, а также точное размещение и контроль размеров строк/колонок.\n\nКлючевые понятия Grid:\n- Сетка (grid) состоит из строк и колонок.\n- Треки (tracks) — это строки и колонки.\n- Линии сетки (grid lines) — границы треков; по линиям можно размещать элементы.\n- Области (grid areas) — именованные прямоугольные участки сетки.\n- Явная сетка (explicit grid) — заданная через `grid-template-columns` и `grid-template-rows`.\n- Неявная сетка (implicit grid) — создаётся автоматически, когда элементов больше, чем ячеек явной сетки.\n\nПример: каркас страницы через области (header/sidebar/main/footer)\n\nHTML\n```\n\u003Cdiv class=\"page\">\n  \u003Cheader class=\"h\">Header\u003C/header>\n  \u003Caside class=\"s\">Sidebar\u003C/aside>\n  \u003Cmain class=\"m\">Main\u003C/main>\n  \u003Cfooter class=\"f\">Footer\u003C/footer>\n\u003C/div>\n```\n\nCSS\n```\n.page {\n  display: grid;\n  grid-template-columns: 260px 1fr;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas:\n    \"h h\"\n    \"s m\"\n    \"f f\";\n  gap: 16px;\n}\n.h { grid-area: h; }\n.s { grid-area: s; }\n.m { grid-area: m; }\n.f { grid-area: f; }\n```\n\nОбъяснение по шагам:\n1) `display: grid` включает Grid-контекст.  \n2) `grid-template-columns: 260px 1fr` создаёт две колонки: фиксированную и «резиновую», которая занимает остаток ширины.  \n3) `grid-template-rows: auto 1fr auto` создаёт три строки: высота по контенту, затем «резиновая», затем снова по контенту.  \n4) `grid-template-areas` описывает карту областей; отдельные элементы «прикрепляются» к областям через `grid-area`.",{"id":28,"description":29,"titleAlert":19,"isTypeAlertInfo":8},"591","В Grid проще заранее описать структуру макета (строки/колонки/области), а затем раскладывать элементы по этой структуре, что часто делает код макета более читаемым.",{"id":31,"value":32,"anchor":33,"isTypeH2":8},"4226","Ключевые различия и выбор","key-differences-and-choice",{"id":35,"value":36,"isTypeParagraph":8},"9748","Главное различие формулируется так:\n- Flexbox — про раскладку элементов вдоль одной ведущей оси и удобное выравнивание/распределение пространства.\n- Grid — про одновременный контроль строк и колонок, то есть про «сетку» как основу макета.\n\nВажно понимать нюанс: у Flexbox есть перенос (`flex-wrap`), и визуально может получиться несколько строк, но модель по-прежнему ориентирована на поток и выравнивание по осям, а не на управление единой двумерной сеткой.  \nУ Grid наоборот: сначала задаётся сетка, затем элементы размещаются по координатам/линиям/областям; это ближе к «планированию» макета.\n\nПрактическое правило выбора:\n- Если требуется ряд/колонка элементов, выравнивание, распределение свободного места, «прижатие» одного элемента к краю — чаще подходит Flexbox.\n- Если требуется макет с колонками и строками одновременно, «растянуть блок на 2 колонки», построить каркас страницы, задать области — чаще подходит Grid.\n- Если требуется и то и другое — обычно используется сочетание: внешняя сетка на Grid, внутренности компонентов на Flexbox.\n",{"id":38,"value":39,"anchor":40,"isTypeH3":8},"4263","Таблица отличий","comparison-table",{"id":42,"value":43,"isTypeParagraph":8},"9749","| Критерий | Flexbox | Grid |\n|---|---|---|\n| Измерения | Одна ведущая ось + выравнивание по второй; возможен перенос на линии | Две оси одновременно: строки и колонки |\n| Подход | «Элементы и их размеры» определяют распределение пространства | «Сетка» задаётся явно, элементы размещаются в неё |\n| Типичные задачи | Меню, панель кнопок, выравнивание в компоненте, центрирование | Каркас страницы, галерея, сложные сетки, области макета |\n| Размещение | В первую очередь поток вдоль оси и выравнивание | Явное/авто размещение по линиям, областям, координатам |\n| Сочетание | Часто используется внутри grid-элементов | Часто используется как внешний каркас страницы |\n",{"id":45,"value":46,"anchor":47,"isTypeH3":8},"4264","Схема для запоминания осей","axis-diagram",{"id":49,"value":50,"isTypeParagraph":8},"9750","```\nFlexbox (выбирается ведущая ось)\n[ item ][ item ][ item ]  -> main axis\n      |\n      v\n   cross axis (выравнивание)\n\nGrid (две оси одновременно)\ncolumns -> | 1 | 2 | 3 |\nrows     v |---|---|---|\n          |---|---|---|\n```",{"id":52,"description":53,"titleAlert":19,"isTypeAlertWarning":8},"650","Фраза «Flexbox — 1D, Grid — 2D» полезна на старте, но она не должна мешать анализу задачи: иногда «одномерная» часть (например, содержимое карточки) живёт внутри «двумерной» сетки карточек.",{"id":55,"value":56,"anchor":57,"isTypeH2":8},"4227","Практика: примеры и разбор","practice-examples-and-walkthrough",{"id":59,"value":60,"isTypeParagraph":8},"9751","Пример 1: сетка карточек (Grid) + внутренности карточки (Flexbox)\n\nHTML\n```\n\u003Cdiv class=\"cards\">\n  \u003Carticle class=\"card\">\n    \u003Ch3>Товар\u003C/h3>\n    \u003Cp>Описание может быть длиннее или короче.\u003C/p>\n    \u003Cbutton>Купить\u003C/button>\n  \u003C/article>\n  \u003Carticle class=\"card\">\n    \u003Ch3>Товар\u003C/h3>\n    \u003Cp>Короткое описание.\u003C/p>\n    \u003Cbutton>Купить\u003C/button>\n  \u003C/article>\n\u003C/div>\n```\n\nCSS\n```\n.cards {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n  border: 1px solid #ddd;\n}\n\n.card button {\n  margin-top: auto;\n}\n```\n\nПочему это логично:\n1) `.cards` — двумерная задача (ряды и колонки карточек), поэтому Grid.  \n2) `.card` — линейная задача (содержимое сверху вниз), поэтому Flexbox.  \n3) `margin-top: auto` прижимает кнопку к нижней части карточки, потому что свободное место «уходит» в автоматический отступ.\n\nПример 2: шапка сайта (Flexbox), где нужно распределить элементы по ширине\n\nHTML\n```\n\u003Cheader class=\"topbar\">\n  \u003Cdiv class=\"logo\">Logo\u003C/div>\n  \u003Cnav class=\"menu\">\n    \u003Ca href=\"#\">Главная\u003C/a>\n    \u003Ca href=\"#\">Каталог\u003C/a>\n    \u003Ca href=\"#\">Контакты\u003C/a>\n  \u003C/nav>\n  \u003Cdiv class=\"actions\">\n    \u003Cbutton>Войти\u003C/button>\n  \u003C/div>\n\u003C/header>\n```\n\nCSS\n```\n.topbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n}\n.menu {\n  display: flex;\n  gap: 12px;\n}\n```\n\nПочему это Flexbox:\n- Требуется один ряд элементов, выравнивание по вертикали и распределение по горизонтали, то есть типичная «линейная» раскладка.\n\nПример 3: элемент растягивается на несколько колонок и строк (Grid)\n\nHTML\n```\n\u003Cdiv class=\"grid\">\n  \u003Cdiv class=\"a\">A\u003C/div>\n  \u003Cdiv class=\"b\">B\u003C/div>\n  \u003Cdiv class=\"c\">C\u003C/div>\n  \u003Cdiv class=\"d\">D\u003C/div>\n\u003C/div>\n```\n\nCSS\n```\n.grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-auto-rows: 120px;\n  gap: 12px;\n}\n.a {\n  grid-column: 1 / 4;\n  grid-row: 1 / 3;\n}\n```\n\nПочему это Grid:\n- Требуется точное размещение «A» по линиям сетки: занять 3 колонки и 2 строки; это сильная сторона Grid.",{"id":62,"value":63,"isTypeParagraph":8},"9752","Итого: Flexbox предназначен для линейной раскладки и выравнивания элементов вдоль выбранной оси, Grid — для двумерной сетки со строками и колонками; на практике эти технологии часто комбинируются (каркас на Grid, компоненты на Flexbox).",{"id":65,"options":66,"hint":80,"solution":81,"description":82},"1107",[67,71,74,77],{"id":68,"label":69,"isCorrect":70},"4556","Flexbox поддерживает только вертикальную раскладку, а Grid — только горизонтальную",false,{"id":72,"label":73,"isCorrect":70},"4557","Grid нужен только для анимаций, а Flexbox — только для типографики",{"id":75,"label":76,"isCorrect":70},"4558","Flexbox работает только с фиксированными размерами, а Grid — только с процентами",{"id":78,"label":79,"isCorrect":8},"4559","Flexbox предназначен для одномерной раскладки (по одной оси), а Grid — для двумерной (строки и колонки одновременно)","Для ответа достаточно проверить одно условие: требуется ли управлять строками и колонками одновременно (тогда Grid) или достаточно распределить элементы вдоль одной оси с выравниванием (тогда Flexbox).","**Правильный вариант: 4** - Flexbox предназначен для одномерной раскладки (по одной оси), а Grid — для двумерной (строки и колонки одновременно)  ","Flexbox и Grid, чем отличаются друг от друга?","quizQuestion",{"title":82,"description":85,"ogTitle":7,"ogDescription":85,"ogImageUrl":86,"canonical":19,"ogLocale":87,"ogSiteName":88,"ogImageType":89,"ogImageWidth":90,"ogImageHeight":91,"ogType":92,"ogUrl":19},"Flexbox — одномерная раскладка, Grid — двумерная. Разбор осей, алгоритмов, кейсов, ограничений и практики выбора.","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":94,"siteUrl":95},"GOOD WEB JOB!","https://goodwebjob.ru",[97],{"label":98,"slug":99,"to":100},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":102,"navigationSublist":110},[103,106],{"path":100,"isActive":70,"name":104,"icon":105,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":107,"isActive":8,"name":108,"icon":109,"isNavbarMobileDisabled":70},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[111,120,146,158,164,305,329,338,344,407,428,434],{"title":112,"list":113,"isOpened":70},"Bash",[114,117],{"name":115,"path":116,"isActive":70},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":118,"path":119,"isActive":70},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":121,"list":122,"isOpened":70},"CSS",[123,126,129,132,135,138,140,143],{"name":124,"path":125,"isActive":70},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":127,"path":128,"isActive":70},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":130,"path":131,"isActive":70},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":133,"path":134,"isActive":70},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":136,"path":137,"isActive":70},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":82,"path":139,"isActive":70},"/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":141,"path":142,"isActive":70},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":144,"path":145,"isActive":70},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":147,"list":148,"isOpened":70},"Git",[149,152,155],{"name":150,"path":151,"isActive":70},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":153,"path":154,"isActive":70},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":156,"path":157,"isActive":70},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":159,"list":160,"isOpened":70},"HTML",[161],{"name":162,"path":163,"isActive":70},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":165,"list":166,"isOpened":70},"JavaScript",[167,170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302],{"name":168,"path":169,"isActive":70},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":171,"path":172,"isActive":70},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":174,"path":175,"isActive":70},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":177,"path":178,"isActive":70},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":180,"path":181,"isActive":70},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":183,"path":184,"isActive":70},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":186,"path":187,"isActive":70},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":189,"path":190,"isActive":70},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":192,"path":193,"isActive":70},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":195,"path":196,"isActive":70},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":198,"path":199,"isActive":70},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":201,"path":202,"isActive":70},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":204,"path":205,"isActive":70},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":207,"path":208,"isActive":70},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":210,"path":211,"isActive":70},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":213,"path":214,"isActive":70},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":216,"path":217,"isActive":70},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":219,"path":220,"isActive":70},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":222,"path":223,"isActive":70},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":225,"path":226,"isActive":70},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":228,"path":229,"isActive":70},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":231,"path":232,"isActive":70},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":234,"path":235,"isActive":70},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":237,"path":238,"isActive":70},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":240,"path":241,"isActive":70},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":243,"path":244,"isActive":70},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":246,"path":247,"isActive":70},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":249,"path":250,"isActive":70},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":252,"path":253,"isActive":70},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":255,"path":256,"isActive":70},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":258,"path":259,"isActive":70},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":261,"path":262,"isActive":70},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":264,"path":265,"isActive":70},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":267,"path":268,"isActive":70},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":270,"path":271,"isActive":70},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":273,"path":274,"isActive":70},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":276,"path":277,"isActive":70}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":279,"path":280,"isActive":70},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":282,"path":283,"isActive":70},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":285,"path":286,"isActive":70},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":288,"path":289,"isActive":70},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":291,"path":292,"isActive":70},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":294,"path":295,"isActive":70},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":297,"path":298,"isActive":70},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":300,"path":301,"isActive":70},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":303,"path":304,"isActive":70},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":306,"list":307,"isOpened":70},"React",[308,311,314,317,320,323,326],{"name":309,"path":310,"isActive":70},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":312,"path":313,"isActive":70},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":315,"path":316,"isActive":70},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":318,"path":319,"isActive":70},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":321,"path":322,"isActive":70},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":324,"path":325,"isActive":70},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":327,"path":328,"isActive":70},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":330,"list":331,"isOpened":70},"Алгоритмы",[332,335],{"name":333,"path":334,"isActive":70},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":336,"path":337,"isActive":70},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":339,"list":340,"isOpened":70},"Дебаггинг",[341],{"name":342,"path":343,"isActive":70},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":345,"list":346,"isOpened":70},"Компьютерные сети",[347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404],{"name":348,"path":349,"isActive":70},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":351,"path":352,"isActive":70},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":354,"path":355,"isActive":70},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":357,"path":358,"isActive":70},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":360,"path":361,"isActive":70},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":363,"path":364,"isActive":70},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":366,"path":367,"isActive":70},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":369,"path":370,"isActive":70},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":372,"path":373,"isActive":70},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":375,"path":376,"isActive":70},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":378,"path":379,"isActive":70},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":381,"path":382,"isActive":70},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":384,"path":385,"isActive":70},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":387,"path":388,"isActive":70},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":390,"path":391,"isActive":70},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":393,"path":394,"isActive":70},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":396,"path":397,"isActive":70},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":399,"path":400,"isActive":70},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":402,"path":403,"isActive":70},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":405,"path":406,"isActive":70},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":408,"list":409,"isOpened":70},"Отрисовка в браузере",[410,413,416,419,422,425],{"name":411,"path":412,"isActive":70},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":414,"path":415,"isActive":70},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":417,"path":418,"isActive":70},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":420,"path":421,"isActive":70},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":423,"path":424,"isActive":70},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":426,"path":427,"isActive":70},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":429,"list":430,"isOpened":70},"Ревью кода",[431],{"name":432,"path":433,"isActive":70},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":435,"list":436,"isOpened":70},"Теория вероятности",[437,440,443],{"name":438,"path":439,"isActive":70},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":441,"path":442,"isActive":70},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":444,"path":445,"isActive":70},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"slugs":447},[448,451,453,455,457,460,463,465,467,469,471,473,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611,613,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653,655,657,658,660,662,664,666],{"name":449,"value":450},"Теоретические задания","theoretical-tasks",{"name":204,"value":452},"what-this-code-will-return-typeof-function",{"name":104,"value":454},"where-to-begin",{"name":171,"value":456},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":458,"value":459},"Backend","backend",{"name":461,"value":462},"Frontend","frontend",{"name":168,"value":464},"prototype-what-logical-values-will-be-received-in-console-log",{"name":285,"value":466},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":276,"value":468},"find-non-repeating-numbers-in-an-array",{"name":249,"value":470},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":255,"value":472},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":474,"value":475},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":261,"value":477},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":177,"value":479},"what-value-will-the-console-output-with-object-property",{"name":180,"value":481},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":252,"value":483},"returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":282,"value":485},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":288,"value":487},"determines-whether-a-word-is-a-palindrome",{"name":267,"value":489},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":294,"value":491},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":258,"value":493},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":264,"value":495},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":270,"value":497},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":303,"value":499},"the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":273,"value":501},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":279,"value":503},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":183,"value":505},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":186,"value":507},"there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":198,"value":509},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":201,"value":511},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":300,"value":513},"unifying-values-in-an-array",{"name":291,"value":515},"flattening-the-array",{"name":189,"value":517},"what-will-the-book-get-upper-name-method-return",{"name":297,"value":519},"string-compression",{"name":195,"value":521},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":207,"value":523},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":348,"value":525},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":354,"value":527},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":357,"value":529},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":360,"value":531},"key-differences-between-tcp-and-udp",{"name":363,"value":533},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":366,"value":535},"what-is-http-and-what-does-it-consist-of",{"name":369,"value":537},"what-are-http-headers-and-why-do-we-need-them",{"name":372,"value":539},"what-are-http-parameters",{"name":375,"value":541},"where-is-the-html-code-located-in-the-http-response-structure",{"name":162,"value":543},"what-is-html",{"name":378,"value":545},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":381,"value":547},"the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":384,"value":549},"what-is-a-cookie",{"name":387,"value":551},"who-initiates-the-cookie-recording-in-the-browser",{"name":390,"value":553},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":555,"value":556},"Лайвкодинг","livecoding",{"name":174,"value":558},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":396,"value":560},"is-everything-that-goes-through-https-secure",{"name":399,"value":562},"all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":402,"value":564},"there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":414,"value":566},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":411,"value":568},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":417,"value":570},"what-is-blocking-the-page-rendering-in-the-browser",{"name":420,"value":572},"what-is-dom-in-a-browser-what-is-cssom",{"name":423,"value":574},"what-are-nodes-in-the-dom",{"name":426,"value":576},"what-does-cssom-consist-of",{"name":124,"value":578},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":127,"value":580},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":130,"value":582},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":133,"value":584},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":136,"value":586},"there-is-an-html-code-will-font-weight-affect-span",{"name":82,"value":588},"what-are-the-differences-between-flexbox-and-grid",{"name":141,"value":590},"do-flexbox-and-grid-replace-each-other",{"name":144,"value":592},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":108,"value":594},"tasks",{"name":210,"value":596},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":213,"value":598},"what-is-this-in-javascript",{"name":216,"value":600},"what-is-an-event-loop-and-how-does-it-work",{"name":219,"value":602},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":222,"value":604},"what-does-the-typeof-operator-show-in-javascript",{"name":225,"value":606},"what-types-of-data-exist-in-javascript",{"name":228,"value":608},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":231,"value":610},"what-will-typeof-return-for-an-array",{"name":234,"value":612},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":237,"value":614},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":240,"value":616},"what-does-typeof-return-for-new-set-in-javascript",{"name":309,"value":618},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":315,"value":620},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":318,"value":622},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":321,"value":624},"there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":324,"value":626},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":342,"value":628},"how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":150,"value":630},"developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":153,"value":632},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":156,"value":634},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":432,"value":636},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":115,"value":638},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":118,"value":640},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":333,"value":642},"what-is-algorithmic-complexity",{"name":336,"value":644},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":243,"value":646},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":405,"value":648},"how-can-a-user-be-authorized-on-a-website",{"name":246,"value":650},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":438,"value":652},"there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":441,"value":654},"there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":444,"value":656},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":98,"value":99},{"name":393,"value":659},"is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":351,"value":661},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":192,"value":663},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":312,"value":665},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":327,"value":667},"what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"cooperation":669,"copyright":672,"reportError":673,"socialNetwork":675},{"link":670,"title":671},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":674,"link":670},"Сообщить об ошибке",{"label":676,"socialNetworkList":677},"Мы в соцсетях:",[678,681,684],{"icon":19,"link":679,"title":680},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":682,"link":670,"title":683},"ic:baseline-telegram","Telegram",{"icon":685,"link":686,"title":687},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":689,"body":690},{},{"type":691,"children":692},"root",[693],{"type":694,"tag":695,"props":696,"children":697},"element","p",{},[698],{"type":699,"value":82},"text",{"data":701,"body":702},{},{"type":691,"children":703},[704],{"type":694,"tag":695,"props":705,"children":706},{},[707],{"type":699,"value":69},{"data":709,"body":710},{},{"type":691,"children":711},[712],{"type":694,"tag":695,"props":713,"children":714},{},[715],{"type":699,"value":73},{"data":717,"body":718},{},{"type":691,"children":719},[720],{"type":694,"tag":695,"props":721,"children":722},{},[723],{"type":699,"value":76},{"data":725,"body":726},{},{"type":691,"children":727},[728],{"type":694,"tag":695,"props":729,"children":730},{},[731],{"type":699,"value":79},{"data":733,"body":734},{},{"type":691,"children":735},[736],{"type":694,"tag":695,"props":737,"children":738},{},[739],{"type":699,"value":80},{"data":741,"body":742},{},{"type":691,"children":743},[744],{"type":694,"tag":695,"props":745,"children":746},{},[747,753],{"type":694,"tag":748,"props":749,"children":750},"strong",{},[751],{"type":699,"value":752},"Правильный вариант: 4",{"type":699,"value":754}," - Flexbox предназначен для одномерной раскладки (по одной оси), а Grid — для двумерной (строки и колонки одновременно)",{"data":756,"body":757},{},{"type":691,"children":758},[759,770,775,790,795,878,883,887,899,903,912,917],{"type":694,"tag":695,"props":760,"children":761},{},[762,764,768],{"type":699,"value":763},"Flexbox (Flexible Box Layout) — это режим CSS-раскладки, который упрощает выравнивание элементов и распределение свободного пространства внутри контейнера.",{"type":694,"tag":765,"props":766,"children":767},"br",{},[],{"type":699,"value":769},"\nВнутри flex-контейнера элементы могут располагаться по строке или по колонке (в зависимости от направления), растягиваться/сжиматься под доступное место, а при включённом переносе переходить на новые линии.",{"type":694,"tag":695,"props":771,"children":772},{},[773],{"type":699,"value":774},"Ключевая идея Flexbox — две оси:",{"type":694,"tag":776,"props":777,"children":778},"ul",{},[779,785],{"type":694,"tag":780,"props":781,"children":782},"li",{},[783],{"type":699,"value":784},"Основная ось (main axis): направление, вдоль которого элементы раскладываются в первую очередь.",{"type":694,"tag":780,"props":786,"children":787},{},[788],{"type":699,"value":789},"Поперечная ось (cross axis): направление, по которому выполняется выравнивание относительно основной оси.",{"type":694,"tag":695,"props":791,"children":792},{},[793],{"type":699,"value":794},"Часто используемые свойства контейнера:",{"type":694,"tag":776,"props":796,"children":797},{},[798,810,845,856,867],{"type":694,"tag":780,"props":799,"children":800},{},[801,808],{"type":694,"tag":802,"props":803,"children":805},"code",{"className":804},[],[806],{"type":699,"value":807},"display: flex",{"type":699,"value":809}," — включает Flexbox.",{"type":694,"tag":780,"props":811,"children":812},{},[813,819,821,827,829,835,837,843],{"type":694,"tag":802,"props":814,"children":816},{"className":815},[],[817],{"type":699,"value":818},"flex-direction",{"type":699,"value":820}," — задаёт направление: ",{"type":694,"tag":802,"props":822,"children":824},{"className":823},[],[825],{"type":699,"value":826},"row",{"type":699,"value":828},", ",{"type":694,"tag":802,"props":830,"children":832},{"className":831},[],[833],{"type":699,"value":834},"column",{"type":699,"value":836}," и варианты с ",{"type":694,"tag":802,"props":838,"children":840},{"className":839},[],[841],{"type":699,"value":842},"-reverse",{"type":699,"value":844},".",{"type":694,"tag":780,"props":846,"children":847},{},[848,854],{"type":694,"tag":802,"props":849,"children":851},{"className":850},[],[852],{"type":699,"value":853},"justify-content",{"type":699,"value":855}," — распределяет элементы вдоль основной оси.",{"type":694,"tag":780,"props":857,"children":858},{},[859,865],{"type":694,"tag":802,"props":860,"children":862},{"className":861},[],[863],{"type":699,"value":864},"align-items",{"type":699,"value":866}," — выравнивает элементы по поперечной оси.",{"type":694,"tag":780,"props":868,"children":869},{},[870,876],{"type":694,"tag":802,"props":871,"children":873},{"className":872},[],[874],{"type":699,"value":875},"flex-wrap",{"type":699,"value":877}," — разрешает перенос элементов на новые линии.",{"type":694,"tag":695,"props":879,"children":880},{},[881],{"type":699,"value":882},"Пример: панель действий, где последняя кнопка прижата к правому краю",{"type":694,"tag":695,"props":884,"children":885},{},[886],{"type":699,"value":159},{"type":694,"tag":888,"props":889,"children":893},"pre",{"className":890,"code":892,"language":699},[891],"language-text","\u003Cdiv class=\"toolbar\">\n  \u003Cbutton>Назад\u003C/button>\n  \u003Cbutton>Вперёд\u003C/button>\n  \u003Cbutton class=\"primary\">Сохранить\u003C/button>\n\u003C/div>\n",[894],{"type":694,"tag":802,"props":895,"children":897},{"__ignoreMap":896},"",[898],{"type":699,"value":892},{"type":694,"tag":695,"props":900,"children":901},{},[902],{"type":699,"value":121},{"type":694,"tag":888,"props":904,"children":907},{"className":905,"code":906,"language":699},[891],".toolbar {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n.primary {\n  margin-left: auto;\n}\n",[908],{"type":694,"tag":802,"props":909,"children":910},{"__ignoreMap":896},[911],{"type":699,"value":906},{"type":694,"tag":695,"props":913,"children":914},{},[915],{"type":699,"value":916},"Объяснение по шагам:",{"type":694,"tag":918,"props":919,"children":920},"ol",{},[921,939,957],{"type":694,"tag":780,"props":922,"children":923},{},[924,929,931,937],{"type":694,"tag":802,"props":925,"children":927},{"className":926},[],[928],{"type":699,"value":807},{"type":699,"value":930}," превращает ",{"type":694,"tag":802,"props":932,"children":934},{"className":933},[],[935],{"type":699,"value":936},".toolbar",{"type":699,"value":938}," в flex-контейнер, элементы внутри становятся flex-элементами.",{"type":694,"tag":780,"props":940,"children":941},{},[942,948,950,955],{"type":694,"tag":802,"props":943,"children":945},{"className":944},[],[946],{"type":699,"value":947},"align-items: center",{"type":699,"value":949}," выравнивает элементы по поперечной оси (обычно по вертикали, если направление ",{"type":694,"tag":802,"props":951,"children":953},{"className":952},[],[954],{"type":699,"value":826},{"type":699,"value":956},").",{"type":694,"tag":780,"props":958,"children":959},{},[960,966,968,974],{"type":694,"tag":802,"props":961,"children":963},{"className":962},[],[964],{"type":699,"value":965},"margin-left: auto",{"type":699,"value":967}," забирает всё свободное место слева от ",{"type":694,"tag":802,"props":969,"children":971},{"className":970},[],[972],{"type":699,"value":973},".primary",{"type":699,"value":975},", из‑за чего кнопка «уезжает» к концу строки.",{"data":977,"body":978},{},{"type":691,"children":979},[980],{"type":694,"tag":695,"props":981,"children":982},{},[983,985,991,993,998],{"type":699,"value":984},"Свойство ",{"type":694,"tag":802,"props":986,"children":988},{"className":987},[],[989],{"type":699,"value":990},"order",{"type":699,"value":992}," изменяет только визуальный порядок элементов, но не меняет их порядок в DOM, поэтому без необходимости не следует использовать ",{"type":694,"tag":802,"props":994,"children":996},{"className":995},[],[997],{"type":699,"value":990},{"type":699,"value":999}," для смысловой перестановки важных частей интерфейса (например, пунктов навигации или полей формы).",{"data":1001,"body":1002},{},{"type":691,"children":1003},[1004,1014,1019,1067,1072,1076,1085,1089,1098,1102],{"type":694,"tag":695,"props":1005,"children":1006},{},[1007,1009,1012],{"type":699,"value":1008},"Grid (Grid Layout) — это двумерная система CSS-раскладки, предназначенная для построения сеток: одновременно задаются строки и колонки, формируя структуру, в которую размещаются элементы.",{"type":694,"tag":765,"props":1010,"children":1011},{},[],{"type":699,"value":1013},"\nGrid удобен там, где требуется «каркас» страницы, галерея, сложная сетка карточек, области макета, а также точное размещение и контроль размеров строк/колонок.",{"type":694,"tag":695,"props":1015,"children":1016},{},[1017],{"type":699,"value":1018},"Ключевые понятия Grid:",{"type":694,"tag":776,"props":1020,"children":1021},{},[1022,1027,1032,1037,1042,1062],{"type":694,"tag":780,"props":1023,"children":1024},{},[1025],{"type":699,"value":1026},"Сетка (grid) состоит из строк и колонок.",{"type":694,"tag":780,"props":1028,"children":1029},{},[1030],{"type":699,"value":1031},"Треки (tracks) — это строки и колонки.",{"type":694,"tag":780,"props":1033,"children":1034},{},[1035],{"type":699,"value":1036},"Линии сетки (grid lines) — границы треков; по линиям можно размещать элементы.",{"type":694,"tag":780,"props":1038,"children":1039},{},[1040],{"type":699,"value":1041},"Области (grid areas) — именованные прямоугольные участки сетки.",{"type":694,"tag":780,"props":1043,"children":1044},{},[1045,1047,1053,1055,1061],{"type":699,"value":1046},"Явная сетка (explicit grid) — заданная через ",{"type":694,"tag":802,"props":1048,"children":1050},{"className":1049},[],[1051],{"type":699,"value":1052},"grid-template-columns",{"type":699,"value":1054}," и ",{"type":694,"tag":802,"props":1056,"children":1058},{"className":1057},[],[1059],{"type":699,"value":1060},"grid-template-rows",{"type":699,"value":844},{"type":694,"tag":780,"props":1063,"children":1064},{},[1065],{"type":699,"value":1066},"Неявная сетка (implicit grid) — создаётся автоматически, когда элементов больше, чем ячеек явной сетки.",{"type":694,"tag":695,"props":1068,"children":1069},{},[1070],{"type":699,"value":1071},"Пример: каркас страницы через области (header/sidebar/main/footer)",{"type":694,"tag":695,"props":1073,"children":1074},{},[1075],{"type":699,"value":159},{"type":694,"tag":888,"props":1077,"children":1080},{"className":1078,"code":1079,"language":699},[891],"\u003Cdiv class=\"page\">\n  \u003Cheader class=\"h\">Header\u003C/header>\n  \u003Caside class=\"s\">Sidebar\u003C/aside>\n  \u003Cmain class=\"m\">Main\u003C/main>\n  \u003Cfooter class=\"f\">Footer\u003C/footer>\n\u003C/div>\n",[1081],{"type":694,"tag":802,"props":1082,"children":1083},{"__ignoreMap":896},[1084],{"type":699,"value":1079},{"type":694,"tag":695,"props":1086,"children":1087},{},[1088],{"type":699,"value":121},{"type":694,"tag":888,"props":1090,"children":1093},{"className":1091,"code":1092,"language":699},[891],".page {\n  display: grid;\n  grid-template-columns: 260px 1fr;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas:\n    \"h h\"\n    \"s m\"\n    \"f f\";\n  gap: 16px;\n}\n.h { grid-area: h; }\n.s { grid-area: s; }\n.m { grid-area: m; }\n.f { grid-area: f; }\n",[1094],{"type":694,"tag":802,"props":1095,"children":1096},{"__ignoreMap":896},[1097],{"type":699,"value":1092},{"type":694,"tag":695,"props":1099,"children":1100},{},[1101],{"type":699,"value":916},{"type":694,"tag":918,"props":1103,"children":1104},{},[1105,1116,1127,1138],{"type":694,"tag":780,"props":1106,"children":1107},{},[1108,1114],{"type":694,"tag":802,"props":1109,"children":1111},{"className":1110},[],[1112],{"type":699,"value":1113},"display: grid",{"type":699,"value":1115}," включает Grid-контекст.",{"type":694,"tag":780,"props":1117,"children":1118},{},[1119,1125],{"type":694,"tag":802,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":699,"value":1124},"grid-template-columns: 260px 1fr",{"type":699,"value":1126}," создаёт две колонки: фиксированную и «резиновую», которая занимает остаток ширины.",{"type":694,"tag":780,"props":1128,"children":1129},{},[1130,1136],{"type":694,"tag":802,"props":1131,"children":1133},{"className":1132},[],[1134],{"type":699,"value":1135},"grid-template-rows: auto 1fr auto",{"type":699,"value":1137}," создаёт три строки: высота по контенту, затем «резиновая», затем снова по контенту.",{"type":694,"tag":780,"props":1139,"children":1140},{},[1141,1147,1149,1155],{"type":694,"tag":802,"props":1142,"children":1144},{"className":1143},[],[1145],{"type":699,"value":1146},"grid-template-areas",{"type":699,"value":1148}," описывает карту областей; отдельные элементы «прикрепляются» к областям через ",{"type":694,"tag":802,"props":1150,"children":1152},{"className":1151},[],[1153],{"type":699,"value":1154},"grid-area",{"type":699,"value":844},{"data":1157,"body":1158},{},{"type":691,"children":1159},[1160],{"type":694,"tag":695,"props":1161,"children":1162},{},[1163],{"type":699,"value":29},{"data":1165,"body":1166},{},{"type":691,"children":1167},[1168,1173,1186,1203,1208],{"type":694,"tag":695,"props":1169,"children":1170},{},[1171],{"type":699,"value":1172},"Главное различие формулируется так:",{"type":694,"tag":776,"props":1174,"children":1175},{},[1176,1181],{"type":694,"tag":780,"props":1177,"children":1178},{},[1179],{"type":699,"value":1180},"Flexbox — про раскладку элементов вдоль одной ведущей оси и удобное выравнивание/распределение пространства.",{"type":694,"tag":780,"props":1182,"children":1183},{},[1184],{"type":699,"value":1185},"Grid — про одновременный контроль строк и колонок, то есть про «сетку» как основу макета.",{"type":694,"tag":695,"props":1187,"children":1188},{},[1189,1191,1196,1198,1201],{"type":699,"value":1190},"Важно понимать нюанс: у Flexbox есть перенос (",{"type":694,"tag":802,"props":1192,"children":1194},{"className":1193},[],[1195],{"type":699,"value":875},{"type":699,"value":1197},"), и визуально может получиться несколько строк, но модель по-прежнему ориентирована на поток и выравнивание по осям, а не на управление единой двумерной сеткой.",{"type":694,"tag":765,"props":1199,"children":1200},{},[],{"type":699,"value":1202},"\nУ Grid наоборот: сначала задаётся сетка, затем элементы размещаются по координатам/линиям/областям; это ближе к «планированию» макета.",{"type":694,"tag":695,"props":1204,"children":1205},{},[1206],{"type":699,"value":1207},"Практическое правило выбора:",{"type":694,"tag":776,"props":1209,"children":1210},{},[1211,1216,1221],{"type":694,"tag":780,"props":1212,"children":1213},{},[1214],{"type":699,"value":1215},"Если требуется ряд/колонка элементов, выравнивание, распределение свободного места, «прижатие» одного элемента к краю — чаще подходит Flexbox.",{"type":694,"tag":780,"props":1217,"children":1218},{},[1219],{"type":699,"value":1220},"Если требуется макет с колонками и строками одновременно, «растянуть блок на 2 колонки», построить каркас страницы, задать области — чаще подходит Grid.",{"type":694,"tag":780,"props":1222,"children":1223},{},[1224],{"type":699,"value":1225},"Если требуется и то и другое — обычно используется сочетание: внешняя сетка на Grid, внутренности компонентов на Flexbox.",{"data":1227,"body":1228},{},{"type":691,"children":1229},[1230],{"type":694,"tag":1231,"props":1232,"children":1233},"table",{},[1234,1258],{"type":694,"tag":1235,"props":1236,"children":1237},"thead",{},[1238],{"type":694,"tag":1239,"props":1240,"children":1241},"tr",{},[1242,1248,1253],{"type":694,"tag":1243,"props":1244,"children":1245},"th",{},[1246],{"type":699,"value":1247},"Критерий",{"type":694,"tag":1243,"props":1249,"children":1250},{},[1251],{"type":699,"value":1252},"Flexbox",{"type":694,"tag":1243,"props":1254,"children":1255},{},[1256],{"type":699,"value":1257},"Grid",{"type":694,"tag":1259,"props":1260,"children":1261},"tbody",{},[1262,1281,1299,1317,1335],{"type":694,"tag":1239,"props":1263,"children":1264},{},[1265,1271,1276],{"type":694,"tag":1266,"props":1267,"children":1268},"td",{},[1269],{"type":699,"value":1270},"Измерения",{"type":694,"tag":1266,"props":1272,"children":1273},{},[1274],{"type":699,"value":1275},"Одна ведущая ось + выравнивание по второй; возможен перенос на линии",{"type":694,"tag":1266,"props":1277,"children":1278},{},[1279],{"type":699,"value":1280},"Две оси одновременно: строки и колонки",{"type":694,"tag":1239,"props":1282,"children":1283},{},[1284,1289,1294],{"type":694,"tag":1266,"props":1285,"children":1286},{},[1287],{"type":699,"value":1288},"Подход",{"type":694,"tag":1266,"props":1290,"children":1291},{},[1292],{"type":699,"value":1293},"«Элементы и их размеры» определяют распределение пространства",{"type":694,"tag":1266,"props":1295,"children":1296},{},[1297],{"type":699,"value":1298},"«Сетка» задаётся явно, элементы размещаются в неё",{"type":694,"tag":1239,"props":1300,"children":1301},{},[1302,1307,1312],{"type":694,"tag":1266,"props":1303,"children":1304},{},[1305],{"type":699,"value":1306},"Типичные задачи",{"type":694,"tag":1266,"props":1308,"children":1309},{},[1310],{"type":699,"value":1311},"Меню, панель кнопок, выравнивание в компоненте, центрирование",{"type":694,"tag":1266,"props":1313,"children":1314},{},[1315],{"type":699,"value":1316},"Каркас страницы, галерея, сложные сетки, области макета",{"type":694,"tag":1239,"props":1318,"children":1319},{},[1320,1325,1330],{"type":694,"tag":1266,"props":1321,"children":1322},{},[1323],{"type":699,"value":1324},"Размещение",{"type":694,"tag":1266,"props":1326,"children":1327},{},[1328],{"type":699,"value":1329},"В первую очередь поток вдоль оси и выравнивание",{"type":694,"tag":1266,"props":1331,"children":1332},{},[1333],{"type":699,"value":1334},"Явное/авто размещение по линиям, областям, координатам",{"type":694,"tag":1239,"props":1336,"children":1337},{},[1338,1343,1348],{"type":694,"tag":1266,"props":1339,"children":1340},{},[1341],{"type":699,"value":1342},"Сочетание",{"type":694,"tag":1266,"props":1344,"children":1345},{},[1346],{"type":699,"value":1347},"Часто используется внутри grid-элементов",{"type":694,"tag":1266,"props":1349,"children":1350},{},[1351],{"type":699,"value":1352},"Часто используется как внешний каркас страницы",{"data":1354,"body":1355},{},{"type":691,"children":1356},[1357],{"type":694,"tag":888,"props":1358,"children":1361},{"className":1359,"code":1360,"language":699},[891],"Flexbox (выбирается ведущая ось)\n[ item ][ item ][ item ]  -> main axis\n      |\n      v\n   cross axis (выравнивание)\n\nGrid (две оси одновременно)\ncolumns -> | 1 | 2 | 3 |\nrows     v |---|---|---|\n          |---|---|---|\n",[1362],{"type":694,"tag":802,"props":1363,"children":1364},{"__ignoreMap":896},[1365],{"type":699,"value":1360},{"data":1367,"body":1368},{},{"type":691,"children":1369},[1370],{"type":694,"tag":695,"props":1371,"children":1372},{},[1373],{"type":699,"value":53},{"data":1375,"body":1376},{},{"type":691,"children":1377},[1378,1383,1387,1396,1400,1409,1414,1450,1455,1459,1468,1472,1481,1486,1494,1499,1503,1512,1516,1525,1530],{"type":694,"tag":695,"props":1379,"children":1380},{},[1381],{"type":699,"value":1382},"Пример 1: сетка карточек (Grid) + внутренности карточки (Flexbox)",{"type":694,"tag":695,"props":1384,"children":1385},{},[1386],{"type":699,"value":159},{"type":694,"tag":888,"props":1388,"children":1391},{"className":1389,"code":1390,"language":699},[891],"\u003Cdiv class=\"cards\">\n  \u003Carticle class=\"card\">\n    \u003Ch3>Товар\u003C/h3>\n    \u003Cp>Описание может быть длиннее или короче.\u003C/p>\n    \u003Cbutton>Купить\u003C/button>\n  \u003C/article>\n  \u003Carticle class=\"card\">\n    \u003Ch3>Товар\u003C/h3>\n    \u003Cp>Короткое описание.\u003C/p>\n    \u003Cbutton>Купить\u003C/button>\n  \u003C/article>\n\u003C/div>\n",[1392],{"type":694,"tag":802,"props":1393,"children":1394},{"__ignoreMap":896},[1395],{"type":699,"value":1390},{"type":694,"tag":695,"props":1397,"children":1398},{},[1399],{"type":699,"value":121},{"type":694,"tag":888,"props":1401,"children":1404},{"className":1402,"code":1403,"language":699},[891],".cards {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n  border: 1px solid #ddd;\n}\n\n.card button {\n  margin-top: auto;\n}\n",[1405],{"type":694,"tag":802,"props":1406,"children":1407},{"__ignoreMap":896},[1408],{"type":699,"value":1403},{"type":694,"tag":695,"props":1410,"children":1411},{},[1412],{"type":699,"value":1413},"Почему это логично:",{"type":694,"tag":918,"props":1415,"children":1416},{},[1417,1428,1439],{"type":694,"tag":780,"props":1418,"children":1419},{},[1420,1426],{"type":694,"tag":802,"props":1421,"children":1423},{"className":1422},[],[1424],{"type":699,"value":1425},".cards",{"type":699,"value":1427}," — двумерная задача (ряды и колонки карточек), поэтому Grid.",{"type":694,"tag":780,"props":1429,"children":1430},{},[1431,1437],{"type":694,"tag":802,"props":1432,"children":1434},{"className":1433},[],[1435],{"type":699,"value":1436},".card",{"type":699,"value":1438}," — линейная задача (содержимое сверху вниз), поэтому Flexbox.",{"type":694,"tag":780,"props":1440,"children":1441},{},[1442,1448],{"type":694,"tag":802,"props":1443,"children":1445},{"className":1444},[],[1446],{"type":699,"value":1447},"margin-top: auto",{"type":699,"value":1449}," прижимает кнопку к нижней части карточки, потому что свободное место «уходит» в автоматический отступ.",{"type":694,"tag":695,"props":1451,"children":1452},{},[1453],{"type":699,"value":1454},"Пример 2: шапка сайта (Flexbox), где нужно распределить элементы по ширине",{"type":694,"tag":695,"props":1456,"children":1457},{},[1458],{"type":699,"value":159},{"type":694,"tag":888,"props":1460,"children":1463},{"className":1461,"code":1462,"language":699},[891],"\u003Cheader class=\"topbar\">\n  \u003Cdiv class=\"logo\">Logo\u003C/div>\n  \u003Cnav class=\"menu\">\n    \u003Ca href=\"#\">Главная\u003C/a>\n    \u003Ca href=\"#\">Каталог\u003C/a>\n    \u003Ca href=\"#\">Контакты\u003C/a>\n  \u003C/nav>\n  \u003Cdiv class=\"actions\">\n    \u003Cbutton>Войти\u003C/button>\n  \u003C/div>\n\u003C/header>\n",[1464],{"type":694,"tag":802,"props":1465,"children":1466},{"__ignoreMap":896},[1467],{"type":699,"value":1462},{"type":694,"tag":695,"props":1469,"children":1470},{},[1471],{"type":699,"value":121},{"type":694,"tag":888,"props":1473,"children":1476},{"className":1474,"code":1475,"language":699},[891],".topbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n}\n.menu {\n  display: flex;\n  gap: 12px;\n}\n",[1477],{"type":694,"tag":802,"props":1478,"children":1479},{"__ignoreMap":896},[1480],{"type":699,"value":1475},{"type":694,"tag":695,"props":1482,"children":1483},{},[1484],{"type":699,"value":1485},"Почему это Flexbox:",{"type":694,"tag":776,"props":1487,"children":1488},{},[1489],{"type":694,"tag":780,"props":1490,"children":1491},{},[1492],{"type":699,"value":1493},"Требуется один ряд элементов, выравнивание по вертикали и распределение по горизонтали, то есть типичная «линейная» раскладка.",{"type":694,"tag":695,"props":1495,"children":1496},{},[1497],{"type":699,"value":1498},"Пример 3: элемент растягивается на несколько колонок и строк (Grid)",{"type":694,"tag":695,"props":1500,"children":1501},{},[1502],{"type":699,"value":159},{"type":694,"tag":888,"props":1504,"children":1507},{"className":1505,"code":1506,"language":699},[891],"\u003Cdiv class=\"grid\">\n  \u003Cdiv class=\"a\">A\u003C/div>\n  \u003Cdiv class=\"b\">B\u003C/div>\n  \u003Cdiv class=\"c\">C\u003C/div>\n  \u003Cdiv class=\"d\">D\u003C/div>\n\u003C/div>\n",[1508],{"type":694,"tag":802,"props":1509,"children":1510},{"__ignoreMap":896},[1511],{"type":699,"value":1506},{"type":694,"tag":695,"props":1513,"children":1514},{},[1515],{"type":699,"value":121},{"type":694,"tag":888,"props":1517,"children":1520},{"className":1518,"code":1519,"language":699},[891],".grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-auto-rows: 120px;\n  gap: 12px;\n}\n.a {\n  grid-column: 1 / 4;\n  grid-row: 1 / 3;\n}\n",[1521],{"type":694,"tag":802,"props":1522,"children":1523},{"__ignoreMap":896},[1524],{"type":699,"value":1519},{"type":694,"tag":695,"props":1526,"children":1527},{},[1528],{"type":699,"value":1529},"Почему это Grid:",{"type":694,"tag":776,"props":1531,"children":1532},{},[1533],{"type":694,"tag":780,"props":1534,"children":1535},{},[1536],{"type":699,"value":1537},"Требуется точное размещение «A» по линиям сетки: занять 3 колонки и 2 строки; это сильная сторона Grid.",{"data":1539,"body":1540},{},{"type":691,"children":1541},[1542],{"type":694,"tag":695,"props":1543,"children":1544},{},[1545],{"type":699,"value":63},1775735658965]