{"id":103796,"date":"2025-03-30T09:03:50","date_gmt":"2025-03-30T04:33:50","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/"},"modified":"2025-03-30T09:03:50","modified_gmt":"2025-03-30T04:33:50","slug":"flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/","title":{"rendered":"Flexbox Hand-on: \u06cc\u06a9 \u0632\u0645\u06cc\u0646 \u0628\u0627\u0632\u06cc \u0628\u0635\u0631\u06cc \u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 CSS"},"content":{"rendered":"<div data-article-id=\"2352574\" id=\"article-body\">\n<p>\u0622\u06cc\u0627 \u0627\u0632 \u06a9\u0634\u062a\u06cc \u0628\u0627 \u0686\u06cc\u062f\u0645\u0627\u0646 CSS \u062e\u0633\u062a\u0647 \u0634\u062f\u0647 \u0627\u06cc\u062f\u061f Flexbox \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u060c \u0627\u0645\u0627 \u062a\u0641\u0627\u0648\u062a \u0632\u06cc\u0627\u062f\u06cc \u0628\u06cc\u0646 \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0648 \u062f\u06cc\u062f\u0646 \u0622\u0646 \u062f\u0631 \u0639\u0645\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0645\u0646 \u06cc\u06a9 \u0627\u06a9\u0633\u067e\u0644\u0648\u0631\u0631 Flexbox Interactive \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0632\u0645\u0627\u06cc\u0634 \u062f\u0633\u062a\u06cc \u060c \u0627\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9 \u0627\u0633\u0627\u0633\u06cc \u0631\u0627 \u062a\u0633\u0644\u0637 \u062f\u0647\u06cc\u062f. \ud83e\uddea<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%DA%86%D8%B1%D8%A7_%DB%8C%DA%A9_%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1_Flexbox_%D8%AF%DB%8C%DA%AF%D8%B1%D8%9F\" >\u0686\u0631\u0627 \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 Flexbox \u062f\u06cc\u06af\u0631\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%B1%D8%A7%D8%A8%D8%B7_%D8%A7%DA%A9%D8%B3%D9%BE%D9%84%D9%88%D8%B1%D8%B1\" >\u0631\u0627\u0628\u0637 \u0627\u06a9\u0633\u067e\u0644\u0648\u0631\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%A7%DA%A9%D8%B3%D9%BE%D9%84%D9%88%D8%B1%D8%B1_%DA%86%DA%AF%D9%88%D9%86%D9%87_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\" >\u0627\u06cc\u062c\u0627\u062f \u0627\u06a9\u0633\u067e\u0644\u0648\u0631\u0631: \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_HTML\" >\u0633\u0627\u062e\u062a\u0627\u0631 HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#Container_Properties_class%22control-group%22%3E_for%22display%22%3EDisplay_id%22display%22%3E_value%22flex%22%3Eflex_value%22inline-flex%22%3Einline-flex_class%22control-group%22%3E_for%22flexDirection%22%3EFlex_Direction_id%22flexDirection%22%3E_value%22row%22%3Erow_value%22row-reverse%22%3Erow-reverse_value%22column%22%3Ecolumn_value%22column-reverse%22%3Ecolumn-reverse_class%22control-group%22%3E_for%22justifyContent%22%3EJustify_Content_id%22justifyContent%22%3E_value%22flex-start%22%3Eflex-start_value%22flex-end%22%3Eflex-end_value%22center%22%3Ecenter_value%22space-between%22%3Espace-between_value%22space-around%22%3Espace-around_value%22space-evenly%22%3Espace-evenly_class%22control-group%22%3E_for%22alignItems%22%3EAlign_Items_id%22alignItems%22%3E_value%22stretch%22%3Estretch_value%22flex-start%22%3Eflex-start_value%22flex-end%22%3Eflex-end_value%22center%22%3Ecenter_value%22baseline%22%3Ebaseline_class%22control-group%22%3E_for%22flexWrap%22%3EFlex_Wrap_id%22flexWrap%22%3E_value%22nowrap%22%3Enowrap_value%22wrap%22%3Ewrap_value%22wrap-reverse%22%3Ewrap-reverse_Item_Properties_class%22control-group%22%3E_for%22itemSelector%22%3ESelect_Item_id%22itemSelector%22%3E_class%22control-group%22%3E_for%22itemBackground%22%3EBackground_Color_type%22color%22_id%22itemBackground%22_value%22007bff%22%3E_class%22control-group%22%3E_for%22itemText%22%3EText_Content_type%22text%22_id%22itemText%22_value%22Item%22%3E_class%22playground%22%3E_class%22flex-container%22_id%22flexContainer%22%3E_class%22flex-item%22_draggable%22true%22%3E_1_class%22remove-icon%22%3E%E2%9C%95_class%22flex-item%22_draggable%22true%22%3E_2_class%22remove-icon%22%3E%E2%9C%95_class%22flex-item%22_draggable%22true%22%3E_3_class%22remove-icon%22%3E%E2%9C%95_class%22code-panel%22%3E_class%22code-section%22%3E_HTML_id%22htmlCode%22%3E_class%22code-section%22%3E_CSS_id%22cssCode%22%3E_%22scriptjs%22%3E_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%B1%D8%A7_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF_%D8%A7%D8%B2_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%B4%D9%88%DB%8C%D8%AF_%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B4%D8%AF%D9%87\" >Container Properties\n                 class=\"control-group\"&gt;\n                     for=\"display\"&gt;Display\n                     id=\"display\"&gt;\n                         value=\"flex\"&gt;flex\n                         value=\"inline-flex\"&gt;inline-flex\n                    \n                \n                 class=\"control-group\"&gt;\n                     for=\"flexDirection\"&gt;Flex Direction\n                     id=\"flexDirection\"&gt;\n                         value=\"row\"&gt;row\n                         value=\"row-reverse\"&gt;row-reverse\n                         value=\"column\"&gt;column\n                         value=\"column-reverse\"&gt;column-reverse\n                    \n                \n                 class=\"control-group\"&gt;\n                     for=\"justifyContent\"&gt;Justify Content\n                     id=\"justifyContent\"&gt;\n                         value=\"flex-start\"&gt;flex-start\n                         value=\"flex-end\"&gt;flex-end\n                         value=\"center\"&gt;center\n                         value=\"space-between\"&gt;space-between\n                         value=\"space-around\"&gt;space-around\n                         value=\"space-evenly\"&gt;space-evenly\n                    \n                \n                 class=\"control-group\"&gt;\n                     for=\"alignItems\"&gt;Align Items\n                     id=\"alignItems\"&gt;\n                         value=\"stretch\"&gt;stretch\n                         value=\"flex-start\"&gt;flex-start\n                         value=\"flex-end\"&gt;flex-end\n                         value=\"center\"&gt;center\n                         value=\"baseline\"&gt;baseline\n                    \n                \n                 class=\"control-group\"&gt;\n                     for=\"flexWrap\"&gt;Flex Wrap\n                     id=\"flexWrap\"&gt;\n                         value=\"nowrap\"&gt;nowrap\n                         value=\"wrap\"&gt;wrap\n                         value=\"wrap-reverse\"&gt;wrap-reverse\n                    \n                \n                Item Properties\n                 class=\"control-group\"&gt;\n                     for=\"itemSelector\"&gt;Select Item\n                     id=\"itemSelector\"&gt;\n                \n                 class=\"control-group\"&gt;\n                     for=\"itemBackground\"&gt;Background Color\n                     type=\"color\" id=\"itemBackground\" value=\"#007bff\"&gt;\n                \n                 class=\"control-group\"&gt;\n                     for=\"itemText\"&gt;Text Content\n                     type=\"text\" id=\"itemText\" value=\"Item\"&gt;\n                \n            \n        \n         class=\"playground\"&gt;\n             class=\"flex-container\" id=\"flexContainer\"&gt;\n                 class=\"flex-item\" draggable=\"true\"&gt;\n                    1\n                     class=\"remove-icon\"&gt;\u2715\n                \n                 class=\"flex-item\" draggable=\"true\"&gt;\n                    2\n                     class=\"remove-icon\"&gt;\u2715\n                \n                 class=\"flex-item\" draggable=\"true\"&gt;\n                    3\n                     class=\"remove-icon\"&gt;\u2715\n                \n            \n        \n         class=\"code-panel\"&gt;\n             class=\"code-section\"&gt;\n                HTML\n                 id=\"htmlCode\"&gt;\n \n            \n \n            \n class=\"code-section\"&gt; \n                \nCSS \n                \n id=\"cssCode\"&gt;\n \n            \n \n        \n \n    \n \n    \"script.js\"&gt; \n \n \n\n\n\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\n    \n\n    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f\n    \n\n\n\n\n\n  \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA_%D8%AA%D8%B9%D8%A7%D9%85%D9%84%DB%8C\" >\u0642\u0627\u0628\u0644\u06cc\u062a \u062a\u0639\u0627\u0645\u0644\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%AE%D8%B5%D9%88%D8%B5%DB%8C%D8%A7%D8%AA_%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1_Flexbox_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%D8%AF%D8%A7%D8%AF%D9%87_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA\" >\u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Flexbox \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D9%86%D9%88%D8%B9_%D9%86%D9%85%D8%A7%DB%8C%D8%B4\" >\u0646\u0648\u0639 \u0646\u0645\u0627\u06cc\u0634<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%AC%D9%87%D8%AA_%D8%A7%D8%B5%D9%84%DB%8C_%D9%85%D8%AD%D9%88%D8%B1\" >\u062c\u0647\u062a \u0627\u0635\u0644\u06cc \u0645\u062d\u0648\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%AA%D8%B1%D8%A7%D8%B2_%D8%A7%D8%B5%D9%84%DB%8C_%D9%85%D8%AD%D9%88%D8%B1_%D8%AA%D9%88%D8%AC%DB%8C%D9%87_%DA%A9%D9%86%D9%86%D8%AF%D9%87-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C\" >\u062a\u0631\u0627\u0632 \u0627\u0635\u0644\u06cc \u0645\u062d\u0648\u0631 (\u062a\u0648\u062c\u06cc\u0647 \u06a9\u0646\u0646\u062f\u0647-\u0645\u062d\u062a\u0648\u0627\u06cc)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%AA%D8%B1%D8%A7%D8%B2_Axis_Cross_Align-Atems\" >\u062a\u0631\u0627\u0632 Axis Cross (Align-Atems)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%B1%D9%81%D8%AA%D8%A7%D8%B1_%D8%B3%D8%B1%D8%B1%DB%8C%D8%B2_Flex-Wrap\" >\u0631\u0641\u062a\u0627\u0631 \u0633\u0631\u0631\u06cc\u0632 (Flex-Wrap)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B3%D8%B7%D8%AD_%D9%85%D9%88%D8%B1%D8%AF\" >\u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0633\u0637\u062d \u0645\u0648\u0631\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D9%81%D8%B1%D8%A7%D8%AA%D8%B1_%D8%A7%D8%B2_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D9%87%D8%A7%DB%8C_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\" >\u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%DA%A9%D8%B4%DB%8C%D8%AF%D9%86_%D9%88_%D8%B1%D9%87%D8%A7_%DA%A9%D8%B1%D8%AF%D9%86_%D8%A8%D8%B5%D8%B1%DB%8C\" >\u06a9\u0634\u06cc\u062f\u0646 \u0648 \u0631\u0647\u0627 \u06a9\u0631\u062f\u0646 \u0628\u0635\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%A2%DB%8C%D8%AA%D9%85_%D9%BE%D9%88%DB%8C%D8%A7\" >\u0645\u062f\u06cc\u0631\u06cc\u062a \u0622\u06cc\u062a\u0645 \u067e\u0648\u06cc\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%AD%D8%A7%D9%84%D8%AA_%D9%86%D9%88%D8%B1%D8%AA%D8%A7%D8%B1%DB%8C%DA%A9\" >\u062d\u0627\u0644\u062a \u0646\u0648\u0631\/\u062a\u0627\u0631\u06cc\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%B5%D8%A7%D8%AF%D8%B1%D8%A7%D8%AA_%DA%A9%D8%AF\" >\u0635\u0627\u062f\u0631\u0627\u062a \u06a9\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%85%D8%AA%D8%AD%D8%A7%D9%86_%DA%A9%D8%B1%D8%AF%D9%86\" >\u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0631\u062f\u0646<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D9%85%D8%B1%DA%A9%D8%B2_%D8%B9%D8%A7%D9%84%DB%8C\" >\u0645\u0631\u06a9\u0632 \u0639\u0627\u0644\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D9%86%D9%88%D8%A7%D8%B1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%D9%BE%D8%A7%D8%B3%D8%AE%DA%AF%D9%88\" >\u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u067e\u0627\u0633\u062e\u06af\u0648<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%B4%D8%A8%DA%A9%D9%87_%DA%A9%D8%A7%D8%B1%D8%AA_%D8%A8%D8%A7_%D8%A8%D8%B3%D8%AA%D9%87_%D8%A8%D9%86%D8%AF%DB%8C\" >\u0634\u0628\u06a9\u0647 \u06a9\u0627\u0631\u062a \u0628\u0627 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D8%AF%D9%86%DB%8C%D8%A7%DB%8C_%D9%88%D8%A7%D9%82%D8%B9%DB%8C\" >\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/nabfollower.com\/blog\/flexbox-hands-on-a-visual-playground-for-learning-css-layout-1dh9\/#%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C_%D8%A7%D8%B2_%D8%B7%D8%B1%DB%8C%D9%82_%D8%A7%D9%86%D8%AC%D8%A7%D9%85\" >\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0646\u062c\u0627\u0645<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%D8%B1%D8%A7_%DB%8C%DA%A9_%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1_Flexbox_%D8%AF%DB%8C%DA%AF%D8%B1%D8%9F\"><\/span>\n<p>  \u0686\u0631\u0627 \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 Flexbox \u062f\u06cc\u06af\u0631\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0648\u0642\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0646\u062a\u0627\u06cc\u062c \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u06a9\u062f \u062e\u0648\u062f \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f \u060c \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0648\u062c\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u062a\u0626\u0648\u0631\u06cc \u0648 \u062a\u0645\u0631\u06cc\u0646 \u0645\u0646 Flexbox Explorer \u0628\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0634\u0645\u0627:<\/p>\n<ul>\n<li>\u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0631\u0627 \u062a\u0631\u0641\u0646\u062f \u06a9\u0646\u06cc\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0641\u0648\u0631\u06cc \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f<\/li>\n<li>\u0633\u0628\u06a9 \u0647\u0627\u06cc \u0641\u0644\u06a9\u0633 \u0641\u0631\u062f\u06cc \u0628\u0627 \u0631\u0646\u06af \u0647\u0627 \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc\n<\/li>\n<li>\u0628\u0647 \u06a9\u062f HTML\/CSS \u062f\u0642\u06cc\u0642 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0622\u0646\u0686\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f<\/li>\n<li>\u0627\u0632 \u0646\u0638\u0631 \u062c\u0633\u0645\u06cc \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u0627 \u06a9\u0634\u06cc\u062f\u0646 \u0648 \u0631\u0647\u0627 \u06a9\u0631\u062f\u0646 \u062f\u0648\u0628\u0627\u0631\u0647 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u06a9\u062f \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<p>\u062e\u0648\u062f\u062a\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f: https:\/\/playground.learncomputer.in\/css-flexbox-playground\/<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D8%A8%D8%B7_%D8%A7%DA%A9%D8%B3%D9%BE%D9%84%D9%88%D8%B1%D8%B1\"><\/span>\n<p>  \u0631\u0627\u0628\u0637 \u0627\u06a9\u0633\u067e\u0644\u0648\u0631\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u0633\u0647 \u0642\u0633\u0645\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ol>\n<li>\n<strong>\u0627\u06cc\u0633\u062a\u06af\u0627\u0647 \u06a9\u0646\u062a\u0631\u0644<\/strong> &#8211; \u062a\u0645\u0627\u0645 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a Flexbox \u0634\u0645\u0627 \u062f\u0631 \u0645\u0646\u0648\u0647\u0627\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0633\u0627\u062f\u0647<\/li>\n<li>\n<strong>\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0632\u0646\u062f\u0647<\/strong> &#8211; \u06cc\u06a9 \u0645\u0627\u0633\u0647\u0628\u0627\u0632\u06cc \u0628\u0635\u0631\u06cc \u06a9\u0647 \u0637\u0631\u062d \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f<\/li>\n<li>\n<strong>\u0646\u0645\u0627\u06cc\u0634 \u06a9\u062f<\/strong> &#8211; HTML \u0648 CSS \u0648\u0627\u0642\u0639\u06cc \u06a9\u0647 \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<\/ol>\n<p>\u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0639\u0627\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f: \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u060c \u0628\u0628\u06cc\u0646\u06cc\u062f \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0635\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06a9\u062f \u0627\u0633\u0627\u0633\u06cc \u0631\u0627 \u0647\u0645\u0632\u0645\u0627\u0646 \u0645\u06cc \u0641\u0647\u0645\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%A7%DA%A9%D8%B3%D9%BE%D9%84%D9%88%D8%B1%D8%B1_%DA%86%DA%AF%D9%88%D9%86%D9%87_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u0627\u06a9\u0633\u067e\u0644\u0648\u0631\u0631: \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_HTML\"><\/span>\n<p>  \u0633\u0627\u062e\u062a\u0627\u0631 HTML<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0632 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 HTML \u062a\u0645\u06cc\u0632 \u0648 \u0645\u0639\u0646\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0631\u0627\u0628\u0637 \u0631\u0627 \u0628\u0647 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u0646\u0637\u0642\u06cc \u062c\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\"\/>\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n    <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><title\/><\/span>CSS Flexbox Playground<span class=\"nt\"\/>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"styles.css\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n    <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"header\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\"\/>CSS Flexbox Playground<span class=\"nt\"\/>\n        <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"header-buttons\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><button> <span class=\"na\">id=<\/span><span class=\"s\">\"darkModeBtn\"<\/span><span class=\"nt\">&gt;<\/span>Dark Mode<span class=\"nt\"\/><\/button><\/span>\n            <span class=\"nt\"><button> <span class=\"na\">id=<\/span><span class=\"s\">\"copyHtmlBtn\"<\/span><span class=\"nt\">&gt;<\/span>Copy HTML<span class=\"nt\"\/><\/button><\/span>\n            <span class=\"nt\"><button> <span class=\"na\">id=<\/span><span class=\"s\">\"copyCssBtn\"<\/span><span class=\"nt\">&gt;<\/span>Copy CSS<span class=\"nt\"\/><\/button><\/span>\n            <span class=\"nt\"><button> <span class=\"na\">id=<\/span><span class=\"s\">\"addItemBtn\"<\/span><span class=\"nt\">&gt;<\/span>Add Item<span class=\"nt\"\/><\/button><\/span>\n        <span class=\"nt\"\/><\/p><\/span>\n    <span class=\"nt\"\/><\/div><\/span>\n    <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"container\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"sidebar\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"controls\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><h3\/><\/span>Container Properties<span class=\"nt\"\/>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"control-group\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><label> <span class=\"na\">for=<\/span><span class=\"s\">\"display\"<\/span><span class=\"nt\">&gt;<\/span>Display<span class=\"nt\"\/><\/label><\/span>\n                    <span class=\"nt\"><select> <span class=\"na\">id=<\/span><span class=\"s\">\"display\"<\/span><span class=\"nt\">&gt;<\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"flex\"<\/span><span class=\"nt\">&gt;<\/span>flex<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"inline-flex\"<\/span><span class=\"nt\">&gt;<\/span>inline-flex<span class=\"nt\"\/><\/option><\/span>\n                    <span class=\"nt\"\/><\/select><\/span>\n                <span class=\"nt\"\/><\/p><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"control-group\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><label> <span class=\"na\">for=<\/span><span class=\"s\">\"flexDirection\"<\/span><span class=\"nt\">&gt;<\/span>Flex Direction<span class=\"nt\"\/><\/label><\/span>\n                    <span class=\"nt\"><select> <span class=\"na\">id=<\/span><span class=\"s\">\"flexDirection\"<\/span><span class=\"nt\">&gt;<\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"row\"<\/span><span class=\"nt\">&gt;<\/span>row<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"row-reverse\"<\/span><span class=\"nt\">&gt;<\/span>row-reverse<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"column\"<\/span><span class=\"nt\">&gt;<\/span>column<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"column-reverse\"<\/span><span class=\"nt\">&gt;<\/span>column-reverse<span class=\"nt\"\/><\/option><\/span>\n                    <span class=\"nt\"\/><\/select><\/span>\n                <span class=\"nt\"\/><\/p><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"control-group\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><label> <span class=\"na\">for=<\/span><span class=\"s\">\"justifyContent\"<\/span><span class=\"nt\">&gt;<\/span>Justify Content<span class=\"nt\"\/><\/label><\/span>\n                    <span class=\"nt\"><select> <span class=\"na\">id=<\/span><span class=\"s\">\"justifyContent\"<\/span><span class=\"nt\">&gt;<\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"flex-start\"<\/span><span class=\"nt\">&gt;<\/span>flex-start<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"flex-end\"<\/span><span class=\"nt\">&gt;<\/span>flex-end<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"center\"<\/span><span class=\"nt\">&gt;<\/span>center<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"space-between\"<\/span><span class=\"nt\">&gt;<\/span>space-between<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"space-around\"<\/span><span class=\"nt\">&gt;<\/span>space-around<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"space-evenly\"<\/span><span class=\"nt\">&gt;<\/span>space-evenly<span class=\"nt\"\/><\/option><\/span>\n                    <span class=\"nt\"\/><\/select><\/span>\n                <span class=\"nt\"\/><\/p><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"control-group\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><label> <span class=\"na\">for=<\/span><span class=\"s\">\"alignItems\"<\/span><span class=\"nt\">&gt;<\/span>Align Items<span class=\"nt\"\/><\/label><\/span>\n                    <span class=\"nt\"><select> <span class=\"na\">id=<\/span><span class=\"s\">\"alignItems\"<\/span><span class=\"nt\">&gt;<\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"stretch\"<\/span><span class=\"nt\">&gt;<\/span>stretch<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"flex-start\"<\/span><span class=\"nt\">&gt;<\/span>flex-start<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"flex-end\"<\/span><span class=\"nt\">&gt;<\/span>flex-end<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"center\"<\/span><span class=\"nt\">&gt;<\/span>center<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"baseline\"<\/span><span class=\"nt\">&gt;<\/span>baseline<span class=\"nt\"\/><\/option><\/span>\n                    <span class=\"nt\"\/><\/select><\/span>\n                <span class=\"nt\"\/><\/p><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"control-group\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><label> <span class=\"na\">for=<\/span><span class=\"s\">\"flexWrap\"<\/span><span class=\"nt\">&gt;<\/span>Flex Wrap<span class=\"nt\"\/><\/label><\/span>\n                    <span class=\"nt\"><select> <span class=\"na\">id=<\/span><span class=\"s\">\"flexWrap\"<\/span><span class=\"nt\">&gt;<\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"nowrap\"<\/span><span class=\"nt\">&gt;<\/span>nowrap<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"wrap\"<\/span><span class=\"nt\">&gt;<\/span>wrap<span class=\"nt\"\/><\/option><\/span>\n                        <span class=\"nt\"><option> <span class=\"na\">value=<\/span><span class=\"s\">\"wrap-reverse\"<\/span><span class=\"nt\">&gt;<\/span>wrap-reverse<span class=\"nt\"\/><\/option><\/span>\n                    <span class=\"nt\"\/><\/select><\/span>\n                <span class=\"nt\"\/><\/p><\/span>\n                <span class=\"nt\"><h3\/><\/span>Item Properties<span class=\"nt\"\/>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"control-group\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><label> <span class=\"na\">for=<\/span><span class=\"s\">\"itemSelector\"<\/span><span class=\"nt\">&gt;<\/span>Select Item<span class=\"nt\"\/><\/label><\/span>\n                    <span class=\"nt\"><select> <span class=\"na\">id=<\/span><span class=\"s\">\"itemSelector\"<\/span><span class=\"nt\">&gt;<\/span><\/select><\/span>\n                <span class=\"nt\"\/><\/p><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"control-group\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><label> <span class=\"na\">for=<\/span><span class=\"s\">\"itemBackground\"<\/span><span class=\"nt\">&gt;<\/span>Background Color<span class=\"nt\"\/><\/label><\/span>\n                    <span class=\"nt\"><input\/> <span class=\"na\">type=<\/span><span class=\"s\">\"color\"<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"itemBackground\"<\/span> <span class=\"na\">value=<\/span><span class=\"s\">\"#007bff\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"\/><\/span><\/p><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"control-group\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><label> <span class=\"na\">for=<\/span><span class=\"s\">\"itemText\"<\/span><span class=\"nt\">&gt;<\/span>Text Content<span class=\"nt\"\/><\/label><\/span>\n                    <span class=\"nt\"><input\/> <span class=\"na\">type=<\/span><span class=\"s\">\"text\"<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"itemText\"<\/span> <span class=\"na\">value=<\/span><span class=\"s\">\"Item\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"\/><\/span><\/p><\/span>\n            <span class=\"nt\"\/><\/div><\/span>\n        <span class=\"nt\"\/><\/div><\/span>\n        <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"playground\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"flex-container\"<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"flexContainer\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"flex-item\"<\/span> <span class=\"na\">draggable=<\/span><span class=\"s\">\"true\"<\/span><span class=\"nt\">&gt;<\/span>\n                    1\n                    <span class=\"nt\"><span> <span class=\"na\">class=<\/span><span class=\"s\">\"remove-icon\"<\/span><span class=\"nt\">&gt;<\/span>\u2715<span class=\"nt\"\/><\/span>\n                <span class=\"nt\"\/><\/span><\/p><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"flex-item\"<\/span> <span class=\"na\">draggable=<\/span><span class=\"s\">\"true\"<\/span><span class=\"nt\">&gt;<\/span>\n                    2\n                    <span class=\"nt\"><span> <span class=\"na\">class=<\/span><span class=\"s\">\"remove-icon\"<\/span><span class=\"nt\">&gt;<\/span>\u2715<span class=\"nt\"\/><\/span>\n                <span class=\"nt\"\/><\/span><\/p><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"flex-item\"<\/span> <span class=\"na\">draggable=<\/span><span class=\"s\">\"true\"<\/span><span class=\"nt\">&gt;<\/span>\n                    3\n                    <span class=\"nt\"><span> <span class=\"na\">class=<\/span><span class=\"s\">\"remove-icon\"<\/span><span class=\"nt\">&gt;<\/span>\u2715<span class=\"nt\"\/><\/span>\n                <span class=\"nt\"\/><\/span><\/p><\/span>\n            <span class=\"nt\"\/><\/div><\/span>\n        <span class=\"nt\"\/><\/div><\/span>\n        <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"code-panel\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"code-section\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><h3\/><\/span>HTML<span class=\"nt\"\/>\n                <span class=\"nt\"><pre> <span class=\"na\">id=<\/span><span class=\"s\">\"htmlCode\"<\/span><span class=\"nt\">&gt;<\/span><\/pre>\n<p><\/span><br \/>\n            <span class=\"nt\"\/><\/div>\n<p><\/span><br \/>\n            <span class=\"nt\"><\/p>\n<div> <span class=\"na\">class=<\/span><span class=\"s\">\"code-section\"<\/span><span class=\"nt\">&gt;<\/span><br \/>\n                <span class=\"nt\"><\/p>\n<h3\/><\/span>CSS<span class=\"nt\"\/><br \/>\n                <span class=\"nt\"><\/p>\n<pre> <span class=\"na\">id=<\/span><span class=\"s\">\"cssCode\"<\/span><span class=\"nt\">&gt;<\/span><\/pre>\n<p><\/span><br \/>\n            <span class=\"nt\"\/><\/div>\n<p><\/span><br \/>\n        <span class=\"nt\"\/><\/div>\n<p><\/span><br \/>\n    <span class=\"nt\"\/><\/div>\n<p><\/span><br \/>\n    <span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"script.js\"<\/span><span class=\"nt\">&gt;<\/span><br \/>\n<span class=\"nt\"\/><br \/>\n<span class=\"nt\"\/><br \/>\n<\/span><\/span><\/span><\/span><\/code><\/p>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3>\n<p>  \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647<br \/>\n<\/h3>\n<p>CSS \u0646\u0647 \u062a\u0646\u0647\u0627 \u0631\u0627\u0628\u0637 \u0645\u0627 \u0631\u0627 \u0633\u0628\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0628\u0644\u06a9\u0647 \u0631\u0641\u062a\u0627\u0631\u0647\u0627\u06cc Flexbox \u0631\u0627 \u06a9\u0647 \u0645\u0627 \u0628\u0627 \u0622\u0646\u0647\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"o\">*<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span> <span class=\"s2\">'Segoe UI'<\/span><span class=\"p\">,<\/span> <span class=\"nb\">sans-serif<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f0f2f5<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#333<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.6<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">100vh<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span><span class=\"nc\">.dark-mode<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1a1a1a<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#fff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">flex<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.header<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"n\">space-between<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.header-buttons<\/span> <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">8px<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#fff<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.3s<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.header-buttons<\/span> <span class=\"nt\">button<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#e9ecef<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#fff<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">0<\/span> <span class=\"m\">5px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0.1<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">overflow-y<\/span><span class=\"p\">:<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span><span class=\"nc\">.dark-mode<\/span> <span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#2d2d2d<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.playground<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">flex<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#fff<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">0<\/span> <span class=\"m\">15px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0.1<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span><span class=\"nc\">.dark-mode<\/span> <span class=\"nc\">.playground<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#2d2d2d<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.controls<\/span> <span class=\"nt\">h3<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.control-group<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">label<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">block<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"m\">500<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#555<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span><span class=\"nc\">.dark-mode<\/span> <span class=\"nt\">label<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#ddd<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">select<\/span><span class=\"o\">,<\/span> <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"text\"<\/span><span class=\"o\">],<\/span> <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"color\"<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">8px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">#ddd<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f9f9f9<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"color\"<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">40px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span><span class=\"nc\">.dark-mode<\/span> <span class=\"nt\">select<\/span><span class=\"o\">,<\/span>\n<span class=\"nt\">body<\/span><span class=\"nc\">.dark-mode<\/span> <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"text\"<\/span><span class=\"o\">],<\/span>\n<span class=\"nt\">body<\/span><span class=\"nc\">.dark-mode<\/span> <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"color\"<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#3a3a3a<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#fff<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#555<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.flex-container<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">min-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">200px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"m\">2px<\/span> <span class=\"nb\">dashed<\/span> <span class=\"m\">#666<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f8f9fa<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">body<\/span><span class=\"nc\">.dark-mode<\/span> <span class=\"nc\">.flex-container<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#333<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#888<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.flex-item<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"n\">move<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.2s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">user-select<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.flex-item<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"m\">5px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span><span class=\"m\">0.2<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.flex-item<\/span> <span class=\"nc\">.remove-icon<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">absolute<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">top<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">right<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">255<\/span><span class=\"p\">,<\/span> <span class=\"m\">255<\/span><span class=\"p\">,<\/span> <span class=\"m\">255<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.8<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#333<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">50%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">12px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.2s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.flex-item<\/span><span class=\"nd\">:hover<\/span> <span class=\"nc\">.remove-icon<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">block<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.flex-item<\/span> <span class=\"nc\">.remove-icon<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#ff4444<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.flex-item.dragging<\/span> <span class=\"nc\">.remove-icon<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.flex-item.dragging<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.5<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.code-panel<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1a1a1a<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#fff<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">overflow-y<\/span><span class=\"p\">:<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span> <span class=\"s2\">'Courier New'<\/span><span class=\"p\">,<\/span> <span class=\"nb\">monospace<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">14px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.code-section<\/span> <span class=\"nt\">h3<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA_%D8%AA%D8%B9%D8%A7%D9%85%D9%84%DB%8C\"><\/span>\n<p>  \u0642\u0627\u0628\u0644\u06cc\u062a \u062a\u0639\u0627\u0645\u0644\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0647 \u0632\u0646\u062f\u06af\u06cc \u0645\u06cc \u0631\u0633\u0627\u0646\u062f \u060c \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062e\u0627\u0635\u06cc\u062a \u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0634\u06cc\u062f\u0646 \u0648 \u0631\u0647\u0627 \u06a9\u0631\u062f\u0646 \u0648 \u062a\u0648\u0644\u06cc\u062f \u06a9\u062f \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">DOMContentLoaded<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">flexContainer<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">flexContainer<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">htmlCode<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">htmlCode<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">cssCode<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">cssCode<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">controls<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.controls select<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">darkModeBtn<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">darkModeBtn<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">copyHtmlBtn<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">copyHtmlBtn<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">copyCssBtn<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">copyCssBtn<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">addItemBtn<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">addItemBtn<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">itemSelector<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">itemSelector<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">itemBackground<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">itemBackground<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">itemText<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">itemText<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">let<\/span> <span class=\"nx\">itemCount<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">3<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Populate item selector<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">updateItemSelector<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">itemSelector<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">items<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.flex-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">item<\/span><span class=\"p\">,<\/span> <span class=\"nx\">index<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">option<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">option<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n            <span class=\"nx\">option<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">index<\/span><span class=\"p\">;<\/span>\n            <span class=\"nx\">option<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`Item <\/span><span class=\"p\">${<\/span><span class=\"nx\">index<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>\n            <span class=\"nx\">itemSelector<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">option<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">});<\/span>\n        <span class=\"c1\">\/\/ Ensure controls reflect the currently selected item<\/span>\n        <span class=\"nf\">updateItemControls<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Update item controls based on selected item<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">updateItemControls<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">selectedIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">parseInt<\/span><span class=\"p\">(<\/span><span class=\"nx\">itemSelector<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span> <span class=\"mi\">10<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Ensure it's an integer<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">selectedItem<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">[<\/span><span class=\"nx\">selectedIndex<\/span><span class=\"p\">];<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">selectedItem<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">itemBackground<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">rgbToHex<\/span><span class=\"p\">(<\/span><span class=\"nx\">selectedItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundColor<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#007bff<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n            <span class=\"nx\">itemText<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">selectedItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">firstChild<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Item<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n            <span class=\"nf\">updateTextColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">selectedItem<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Convert RGB to Hex<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">rgbToHex<\/span><span class=\"p\">(<\/span><span class=\"nx\">rgb<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">rgb<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">rgb<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">''<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#007bff<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">match<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">rgb<\/span><span class=\"p\">.<\/span><span class=\"nf\">match<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/<\/span><span class=\"se\">\\d<\/span><span class=\"sr\">+\/g<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">match<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#007bff<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">r<\/span><span class=\"p\">,<\/span> <span class=\"nx\">g<\/span><span class=\"p\">,<\/span> <span class=\"nx\">b<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">match<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nb\">Number<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"s2\">`#<\/span><span class=\"p\">${((<\/span><span class=\"mi\">1<\/span> <span class=\"o\">&lt;&lt;<\/span> <span class=\"mi\">24<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"p\">(<\/span><span class=\"nx\">r<\/span> <span class=\"o\">&lt;&lt;<\/span> <span class=\"mi\">16<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"p\">(<\/span><span class=\"nx\">g<\/span> <span class=\"o\">&lt;&lt;<\/span> <span class=\"mi\">8<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">b<\/span><span class=\"p\">).<\/span><span class=\"nf\">toString<\/span><span class=\"p\">(<\/span><span class=\"mi\">16<\/span><span class=\"p\">).<\/span><span class=\"nf\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nf\">toUpperCase<\/span><span class=\"p\">()}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Calculate luminance and set text color<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">updateTextColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">bgColor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundColor<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#007bff<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">match<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">bgColor<\/span><span class=\"p\">.<\/span><span class=\"nf\">match<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/<\/span><span class=\"se\">\\d<\/span><span class=\"sr\">+\/g<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">match<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ If no valid color, skip<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">r<\/span><span class=\"p\">,<\/span> <span class=\"nx\">g<\/span><span class=\"p\">,<\/span> <span class=\"nx\">b<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">match<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nb\">Number<\/span><span class=\"p\">);<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">luminance<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"mf\">0.299<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">r<\/span> <span class=\"o\">+<\/span> <span class=\"mf\">0.587<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">g<\/span> <span class=\"o\">+<\/span> <span class=\"mf\">0.114<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">b<\/span><span class=\"p\">)<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">255<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">color<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">luminance<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mf\">0.5<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#000000<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#FFFFFF<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Update Flexbox properties and both code displays<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">updateFlexbox<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">styles<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">flexDirection<\/span><span class=\"p\">:<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">flexDirection<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">justifyContent<\/span><span class=\"p\">:<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">justifyContent<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">alignItems<\/span><span class=\"p\">:<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">alignItems<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">flexWrap<\/span><span class=\"p\">:<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">flexWrap<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">value<\/span>\n        <span class=\"p\">};<\/span>\n\n        <span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">assign<\/span><span class=\"p\">(<\/span><span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">,<\/span> <span class=\"nx\">styles<\/span><span class=\"p\">);<\/span>\n        <span class=\"nf\">updateHTMLCode<\/span><span class=\"p\">();<\/span>\n        <span class=\"nf\">updateCSSCode<\/span><span class=\"p\">(<\/span><span class=\"nx\">styles<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Update HTML code display<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">updateHTMLCode<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">itemsHTML<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span><span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">`    <p>${<span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundColor<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#007bff<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span><span class=\"s2\">; color: <\/span><span class=\"p\">${<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">color<\/span><span class=\"p\">}<\/span><span class=\"s2\">\"&gt;<\/span><span class=\"p\">${<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">firstChild<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span><span class=\"p\">}<\/span><span class=\"s2\"\/><\/p>`<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"se\">\\n<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">htmlCode<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`<p>\\n<span class=\"p\">${<\/span><span class=\"nx\">itemsHTML<\/span><span class=\"p\">}<\/span><span class=\"s2\">\\n<\/span><\/p>`<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Update CSS code display<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">updateCSSCode<\/span><span class=\"p\">(<\/span><span class=\"nx\">styles<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">cssCode<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`.flex-container {\n    display: <\/span><span class=\"p\">${<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">display<\/span><span class=\"p\">}<\/span><span class=\"s2\">;\n    flex-direction: <\/span><span class=\"p\">${<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">flexDirection<\/span><span class=\"p\">}<\/span><span class=\"s2\">;\n    justify-content: <\/span><span class=\"p\">${<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">justifyContent<\/span><span class=\"p\">}<\/span><span class=\"s2\">;\n    align-items: <\/span><span class=\"p\">${<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">alignItems<\/span><span class=\"p\">}<\/span><span class=\"s2\">;\n    flex-wrap: <\/span><span class=\"p\">${<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">flexWrap<\/span><span class=\"p\">}<\/span><span class=\"s2\">;\n}\n\n.flex-item {\n    padding: 20px;\n    margin: 5px;\n    border-radius: 5px;\n    text-align: center;\n}`<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Update selected item's properties<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">updateItemProperties<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">selectedIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">parseInt<\/span><span class=\"p\">(<\/span><span class=\"nx\">itemSelector<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span> <span class=\"mi\">10<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Ensure integer<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">selectedItem<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">[<\/span><span class=\"nx\">selectedIndex<\/span><span class=\"p\">];<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">selectedItem<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">selectedItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundColor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">itemBackground<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">;<\/span>\n            <span class=\"nx\">selectedItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">firstChild<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">itemText<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">;<\/span>\n            <span class=\"nf\">updateTextColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">selectedItem<\/span><span class=\"p\">);<\/span>\n            <span class=\"nf\">updateHTMLCode<\/span><span class=\"p\">();<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Drag and Drop functionality<\/span>\n    <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dragstart<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">flex-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dragging<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dragend<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">flex-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">remove<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dragging<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dragover<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">drop<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">dragging<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.dragging<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">afterElement<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">getDragAfterElement<\/span><span class=\"p\">(<\/span><span class=\"nx\">flexContainer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">clientX<\/span><span class=\"p\">,<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">clientY<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">afterElement<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">dragging<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">insertBefore<\/span><span class=\"p\">(<\/span><span class=\"nx\">dragging<\/span><span class=\"p\">,<\/span> <span class=\"nx\">afterElement<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"nf\">updateHTMLCode<\/span><span class=\"p\">();<\/span>\n        <span class=\"nf\">updateItemSelector<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"kd\">function<\/span> <span class=\"nf\">getDragAfterElement<\/span><span class=\"p\">(<\/span><span class=\"nx\">container<\/span><span class=\"p\">,<\/span> <span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">draggableElements<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[...<\/span><span class=\"nx\">container<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.flex-item:not(.dragging)<\/span><span class=\"dl\">'<\/span><span class=\"p\">)];<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">draggableElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">reduce<\/span><span class=\"p\">((<\/span><span class=\"nx\">closest<\/span><span class=\"p\">,<\/span> <span class=\"nx\">child<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">box<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">child<\/span><span class=\"p\">.<\/span><span class=\"nf\">getBoundingClientRect<\/span><span class=\"p\">();<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">offsetX<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">x<\/span> <span class=\"o\">-<\/span> <span class=\"p\">(<\/span><span class=\"nx\">box<\/span><span class=\"p\">.<\/span><span class=\"nx\">left<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">box<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">2<\/span><span class=\"p\">);<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">offsetY<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">y<\/span> <span class=\"o\">-<\/span> <span class=\"p\">(<\/span><span class=\"nx\">box<\/span><span class=\"p\">.<\/span><span class=\"nx\">top<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">box<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">2<\/span><span class=\"p\">);<\/span>\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">offsetX<\/span> <span class=\"o\">&lt;<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">offsetX<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nx\">closest<\/span><span class=\"p\">.<\/span><span class=\"nx\">offset<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"na\">offset<\/span><span class=\"p\">:<\/span> <span class=\"nx\">offsetX<\/span><span class=\"p\">,<\/span> <span class=\"na\">element<\/span><span class=\"p\">:<\/span> <span class=\"nx\">child<\/span> <span class=\"p\">};<\/span>\n            <span class=\"p\">}<\/span>\n            <span class=\"k\">return<\/span> <span class=\"nx\">closest<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">},<\/span> <span class=\"p\">{<\/span> <span class=\"na\">offset<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Number<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEGATIVE_INFINITY<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">element<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Remove Item functionality<\/span>\n    <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">remove-icon<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">item<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">parentElement<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nf\">remove<\/span><span class=\"p\">();<\/span>\n                <span class=\"nf\">updateItemNumbers<\/span><span class=\"p\">();<\/span>\n                <span class=\"nf\">updateHTMLCode<\/span><span class=\"p\">();<\/span>\n                <span class=\"nf\">updateItemSelector<\/span><span class=\"p\">();<\/span>\n            <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n                <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Cannot remove the last item!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Update item numbers after removal<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nf\">updateItemNumbers<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">items<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.flex-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">item<\/span><span class=\"p\">,<\/span> <span class=\"nx\">index<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">firstChild<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">firstChild<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span><span class=\"p\">.<\/span><span class=\"nf\">match<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/<\/span><span class=\"se\">\\d<\/span><span class=\"sr\">+\/<\/span><span class=\"p\">)<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">index<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">firstChild<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">});<\/span>\n        <span class=\"nx\">itemCount<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Dark Mode Toggle<\/span>\n    <span class=\"nx\">darkModeBtn<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dark-mode<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">darkModeBtn<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dark-mode<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> \n            <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Light Mode<\/span><span class=\"dl\">'<\/span> \n            <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Dark Mode<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Copy HTML<\/span>\n    <span class=\"nx\">copyHtmlBtn<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">code<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">htmlCode<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span><span class=\"p\">;<\/span>\n        <span class=\"nb\">navigator<\/span><span class=\"p\">.<\/span><span class=\"nx\">clipboard<\/span><span class=\"p\">.<\/span><span class=\"nf\">writeText<\/span><span class=\"p\">(<\/span><span class=\"nx\">code<\/span><span class=\"p\">).<\/span><span class=\"nf\">then<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">HTML code copied to clipboard!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">});<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Copy CSS<\/span>\n    <span class=\"nx\">copyCssBtn<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">code<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cssCode<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span><span class=\"p\">;<\/span>\n        <span class=\"nb\">navigator<\/span><span class=\"p\">.<\/span><span class=\"nx\">clipboard<\/span><span class=\"p\">.<\/span><span class=\"nf\">writeText<\/span><span class=\"p\">(<\/span><span class=\"nx\">code<\/span><span class=\"p\">).<\/span><span class=\"nf\">then<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">CSS code copied to clipboard!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">});<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Add New Item<\/span>\n    <span class=\"nx\">addItemBtn<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">itemCount<\/span><span class=\"o\">++<\/span><span class=\"p\">;<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">newItem<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">div<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">newItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">newItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">draggable<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">newItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundColor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">itemBackground<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">newItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">itemText<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">}<\/span><span class=\"s2\"><span class=\"remove-icon\">\u2715<\/span>`<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">newItem<\/span><span class=\"p\">);<\/span>\n        <span class=\"nf\">updateTextColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">newItem<\/span><span class=\"p\">);<\/span>\n        <span class=\"nf\">updateHTMLCode<\/span><span class=\"p\">();<\/span>\n        <span class=\"nf\">updateItemSelector<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Event Listeners for controls<\/span>\n    <span class=\"nx\">controls<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">control<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">control<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">change<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateFlexbox<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">itemSelector<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">change<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateItemControls<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">itemBackground<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">input<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateItemProperties<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">itemText<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">input<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateItemProperties<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Initial setup<\/span>\n    <span class=\"nf\">updateFlexbox<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">flexContainer<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.flex-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">backgroundColor<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#007bff<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Set initial background<\/span>\n        <span class=\"nf\">updateTextColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n    <span class=\"nf\">updateItemSelector<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AE%D8%B5%D9%88%D8%B5%DB%8C%D8%A7%D8%AA_%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1_Flexbox_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%D8%AF%D8%A7%D8%AF%D9%87_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA\"><\/span>\n<p>  \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Flexbox \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u0627\u0646\u0644 \u0633\u0645\u062a \u0686\u067e \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0644\u06cc\u0647 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0627\u0635\u0644\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Flexbox \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D9%88%D8%B9_%D9%86%D9%85%D8%A7%DB%8C%D8%B4\"><\/span>\n<p>  \u0646\u0648\u0639 \u0646\u0645\u0627\u06cc\u0634<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0646:<\/p>\n<ul>\n<li>\n<code>flex<\/code>  &#8211; \u06cc\u06a9 \u0638\u0631\u0641 \u0641\u0644\u06a9\u0633 \u0633\u0637\u062d \u0628\u0644\u0648\u06a9 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\n<code>inline-flex<\/code>  &#8211; \u06cc\u06a9 \u0638\u0631\u0641 \u0641\u0644\u06a9\u0633 \u0633\u0637\u062d \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AC%D9%87%D8%AA_%D8%A7%D8%B5%D9%84%DB%8C_%D9%85%D8%AD%D9%88%D8%B1\"><\/span>\n<p>  \u062c\u0647\u062a \u0627\u0635\u0644\u06cc \u0645\u062d\u0648\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062c\u0631\u06cc\u0627\u0646 \u0637\u0631\u062d \u062e\u0648\u062f \u0631\u0627 \u0628\u0627:<\/p>\n<ul>\n<li>\n<code>row<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0641\u0642\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0646\u062f (\u067e\u06cc\u0634 \u0641\u0631\u0636)<\/li>\n<li>\n<code>row-reverse<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0641\u0642\u06cc \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0639\u06a9\u0648\u0633 \u0645\u0631\u062a\u0628 \u0634\u062f\u0647 \u0627\u0646\u062f<\/li>\n<li>\n<code>column<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0639\u0645\u0648\u062f\u06cc \u0627\u0646\u0628\u0627\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f<\/li>\n<li>\n<code>column-reverse<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0639\u0645\u0648\u062f\u06cc \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0639\u06a9\u0648\u0633 \u062c\u0645\u0639 \u0634\u062f\u0647 \u0627\u0646\u062f<\/li>\n<\/ul>\n<p>\u0627\u06cc\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0631 \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0627\u06cc\u0631 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u062a\u0623\u062b\u06cc\u0631 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f! \ud83e\udded<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D8%B1%D8%A7%D8%B2_%D8%A7%D8%B5%D9%84%DB%8C_%D9%85%D8%AD%D9%88%D8%B1_%D8%AA%D9%88%D8%AC%DB%8C%D9%87_%DA%A9%D9%86%D9%86%D8%AF%D9%87-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C\"><\/span>\n<p>  \u062a\u0631\u0627\u0632 \u0627\u0635\u0644\u06cc \u0645\u062d\u0648\u0631 (\u062a\u0648\u062c\u06cc\u0647 \u06a9\u0646\u0646\u062f\u0647-\u0645\u062d\u062a\u0648\u0627\u06cc)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0648\u0627\u0631\u062f \u0645\u0648\u0642\u0639\u06cc\u062a \u062f\u0631 \u0627\u0645\u062a\u062f\u0627\u062f \u0645\u062d\u0648\u0631 \u0627\u0635\u0644\u06cc:<\/p>\n<ul>\n<li>\n<code>flex-start<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639<\/li>\n<li>\n<code>flex-end<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u062a\u0627 \u067e\u0627\u06cc\u0627\u0646<\/li>\n<li>\n<code>center<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u0645\u062a\u062f\u0627\u062f \u0645\u062d\u0648\u0631 \u0627\u0635\u0644\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u0646\u062f<\/li>\n<li>\n<code>space-between<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u0627\u0648\u06cc \u0628\u0627 \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u062a\u0648\u0632\u06cc\u0639 \u0645\u06cc \u0634\u0648\u0646\u062f \u060c \u0622\u062e\u0631\u06cc\u0646 \u0628\u0627\u0631 \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646<\/li>\n<li>\n<code>space-around<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u0628\u0627 \u0641\u0636\u0627\u06cc \u0645\u0633\u0627\u0648\u06cc \u062f\u0631 \u0627\u0637\u0631\u0627\u0641 \u0622\u0646\u0647\u0627<\/li>\n<li>\n<code>space-evenly<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u0628\u0627 \u0641\u0636\u0627\u06cc \u0645\u0633\u0627\u0648\u06cc \u0628\u06cc\u0646 \u0622\u0646\u0647\u0627<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D8%B1%D8%A7%D8%B2_Axis_Cross_Align-Atems\"><\/span>\n<p>  \u062a\u0631\u0627\u0632 Axis Cross (Align-Atems)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0648\u0642\u0639\u06cc\u062a \u06a9\u0646\u062a\u0631\u0644 \u0639\u0645\u0648\u062f \u0628\u0631 \u0645\u062d\u0648\u0631 \u0627\u0635\u0644\u06cc:<\/p>\n<ul>\n<li>\n<code>stretch<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f \u0628\u0631\u0627\u06cc \u067e\u0631 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 (\u067e\u06cc\u0634 \u0641\u0631\u0636) \u06af\u0633\u062a\u0631\u0634 \u0645\u06cc \u06cc\u0627\u0628\u062f<\/li>\n<li>\n<code>flex-start<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u062d\u0648\u0631 \u0645\u062a\u0642\u0627\u0628\u0644 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u0646\u062f<\/li>\n<li>\n<code>flex-end<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u0645\u062d\u0648\u0631 \u0645\u062a\u0642\u0627\u0637\u0639 \u062a\u0631\u0627\u0632 \u0634\u062f\u0647 \u0627\u0646\u062f<\/li>\n<li>\n<code>center<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f \u0645\u062d\u0648\u0631 \u062f\u0631 \u0645\u062d\u0648\u0631 \u0645\u062a\u0642\u0627\u0637\u0639<\/li>\n<li>\n<code>baseline<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u062a\u0648\u0633\u0637 \u062e\u0637\u0648\u0637 \u0645\u062a\u0646 \u062a\u0631\u0627\u0632 \u0634\u062f\u0647 \u0627\u0646\u062f<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D9%81%D8%AA%D8%A7%D8%B1_%D8%B3%D8%B1%D8%B1%DB%8C%D8%B2_Flex-Wrap\"><\/span>\n<p>  \u0631\u0641\u062a\u0627\u0631 \u0633\u0631\u0631\u06cc\u0632 (Flex-Wrap)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06a9\u0646\u062a\u0631\u0644 \u0622\u0646\u0686\u0647 \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc \u0627\u0641\u062a\u062f \u0648\u0642\u062a\u06cc \u0645\u0648\u0627\u0631\u062f \u0633\u0631\u0631\u06cc\u0632 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<ul>\n<li>\n<code>nowrap<\/code>  &#8211; \u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0645\u062c\u0628\u0648\u0631 \u0628\u0647 \u062a\u06a9 \u062e\u0637 \u0647\u0633\u062a\u0646\u062f (\u067e\u06cc\u0634 \u0641\u0631\u0636)<\/li>\n<li>\n<code>wrap<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062e\u0637\u0648\u0637 \u0627\u0636\u0627\u0641\u06cc \u0628\u0633\u062a\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f<\/li>\n<li>\n<code>wrap-reverse<\/code>  &#8211; \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u062f\u0631 \u062c\u0647\u062a \u0645\u0639\u06a9\u0648\u0633 \u0628\u0647 \u062e\u0637\u0648\u0637 \u0627\u0636\u0627\u0641\u06cc \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B3%D8%B7%D8%AD_%D9%85%D9%88%D8%B1%D8%AF\"><\/span>\n<p>  \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0633\u0637\u062d \u0645\u0648\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u062e\u0648\u0627\u0635 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u060c \u0634\u0645\u0627 \u0646\u06cc\u0632 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\u0628\u0631\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0645\u0648\u0627\u0631\u062f \u062e\u0627\u0635 Flex \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u0647\u0627\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0627 \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0635\u0631\u06cc<\/li>\n<li>\u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u062a\u0646 \u0647\u0631 \u0645\u0648\u0631\u062f \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<p>\u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u062d\u062a\u06cc \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0631\u0646\u06af \u0645\u062a\u0646 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0631\u0648\u0634\u0646\u0627\u06cc\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0628\u0647\u06cc\u0646\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f! \ud83c\udfa8<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D8%B1%D8%A7%D8%AA%D8%B1_%D8%A7%D8%B2_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D9%87%D8%A7%DB%8C_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\"><\/span>\n<p>  \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0622\u0646\u0686\u0647 \u0627\u06cc\u0646 Explorer \u0631\u0627 \u0627\u0632 \u0647\u0645 \u062c\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0622\u0646 \u0627\u0633\u062a:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%B4%DB%8C%D8%AF%D9%86_%D9%88_%D8%B1%D9%87%D8%A7_%DA%A9%D8%B1%D8%AF%D9%86_%D8%A8%D8%B5%D8%B1%DB%8C\"><\/span>\n<p>  \u06a9\u0634\u06cc\u062f\u0646 \u0648 \u0631\u0647\u0627 \u06a9\u0631\u062f\u0646 \u0628\u0635\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0622\u0646\u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0638\u0631\u0641 \u060c \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u06a9\u0634\u06cc\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<ul>\n<li>\u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f Flexbox \u0631\u0627 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0631\u0648\u0627\u0628\u0637 \u0645\u06a9\u0627\u0646\u06cc \u0628\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%A2%DB%8C%D8%AA%D9%85_%D9%BE%D9%88%DB%8C%D8%A7\"><\/span>\n<p>  \u0645\u062f\u06cc\u0631\u06cc\u062a \u0622\u06cc\u062a\u0645 \u067e\u0648\u06cc\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u0645\u0648\u0627\u0631\u062f \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0627 \u062f\u06a9\u0645\u0647 &#8220;\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u0648\u0631\u062f&#8221; \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0645\u0648\u0627\u0631\u062f \u0646\u0627\u062e\u0648\u0627\u0633\u062a\u0647 \u0631\u0627 \u0628\u0627 \u0634\u0646\u0627\u0648\u0631 \u0648 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0646\u0645\u0627\u062f &#8220;\u2715&#8221; \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<p>\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 Flexbox \u0628\u0627 \u062a\u0639\u062f\u0627\u062f \u0645\u062e\u062a\u0644\u0641 \u0645\u0648\u0627\u0631\u062f \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AD%D8%A7%D9%84%D8%AA_%D9%86%D9%88%D8%B1%D8%AA%D8%A7%D8%B1%DB%8C%DA%A9\"><\/span>\n<p>  \u062d\u0627\u0644\u062a \u0646\u0648\u0631\/\u062a\u0627\u0631\u06cc\u06a9<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0646 \u062a\u0645 \u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u0628\u0627 \u06cc\u06a9 \u06a9\u0644\u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f &#8211; \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0645\u062d\u06cc\u0637 \u06a9\u0627\u0631 \u06cc\u0627 \u0632\u0645\u0627\u0646 \u0631\u0648\u0632. \ud83c\udf13<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B5%D8%A7%D8%AF%D8%B1%D8%A7%D8%AA_%DA%A9%D8%AF\"><\/span>\n<p>  \u0635\u0627\u062f\u0631\u0627\u062a \u06a9\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0637\u0631\u062d \u06a9\u0627\u0645\u0644:<\/p>\n<ul>\n<li>HTML \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u06a9\u0644\u06cc\u06a9 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<li>CSS \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u06a9\u0644\u06cc\u06a9 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<p>\u0622\u0632\u0645\u0627\u06cc\u0634\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u0641\u0648\u0631\u0627\u064b \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%85%D8%AA%D8%AD%D8%A7%D9%86_%DA%A9%D8%B1%D8%AF%D9%86\"><\/span>\n<p>  \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0631\u062f\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0627:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%DA%A9%D8%B2_%D8%B9%D8%A7%D9%84%DB%8C\"><\/span>\n<p>  \u0645\u0631\u06a9\u0632 \u0639\u0627\u0644\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0634\u06a9\u0644 \u0628\u062f\u0646\u0627\u0645 \u0645\u0631\u06a9\u0632 \u060c \u0641\u0642\u0637 \u0628\u0627 \u062f\u0648 \u062e\u0627\u0635\u06cc\u062a \u062d\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ul>\n<li><code>justify-content: center<\/code><\/li>\n<li><code>align-items: center<\/code><\/li>\n<\/ul>\n<p>\u0622\u0646 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f \u0648 \u062a\u0645\u0627\u0634\u0627\u06cc \u0645\u0637\u0627\u0644\u0628 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0645\u0631\u06a9\u0632 \u0638\u0631\u0641 \u062a\u0645\u0627\u0634\u0627 \u06a9\u0646\u06cc\u062f! \ud83c\udfaf<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D9%88%D8%A7%D8%B1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%D9%BE%D8%A7%D8%B3%D8%AE%DA%AF%D9%88\"><\/span>\n<p>  \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u067e\u0627\u0633\u062e\u06af\u0648<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li><code>display: flex<\/code><\/li>\n<li>\n<code>justify-content: space-between<\/code>  (\u06cc\u0627 <code>space-around<\/code>)<\/li>\n<\/ul>\n<p>\u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u0648\u0627\u0631\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u0627\u0648\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u067e\u0646\u062c\u0631\u0647 \u060c \u0641\u0627\u0635\u0644\u0647 \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B4%D8%A8%DA%A9%D9%87_%DA%A9%D8%A7%D8%B1%D8%AA_%D8%A8%D8%A7_%D8%A8%D8%B3%D8%AA%D9%87_%D8%A8%D9%86%D8%AF%DB%8C\"><\/span>\n<p>  \u0634\u0628\u06a9\u0647 \u06a9\u0627\u0631\u062a \u0628\u0627 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u067e\u0627\u0633\u062e\u06af\u0648 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u0646 <code>flex-wrap: wrap<\/code>\n<\/li>\n<li>\u0686\u0646\u062f\u06cc\u0646 \u0645\u0648\u0631\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0645\u062a\u0641\u0627\u0648\u062a \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f <code>justify-content<\/code> \u0627\u0631\u0632\u0634 \u0647\u0627<\/li>\n<\/ul>\n<p>\u062a\u0645\u0627\u0634\u0627 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u0648\u0627\u0631\u062f \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645 \u0628\u0647 \u0631\u062f\u06cc\u0641 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u060c \u0641\u0627\u0635\u0644\u0647 \u0647\u0627\u06cc \u0645\u062f\u0627\u0648\u0645 \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D8%AF%D9%86%DB%8C%D8%A7%DB%8C_%D9%88%D8%A7%D9%82%D8%B9%DB%8C\"><\/span>\n<p>  \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06a9\u062a\u0634\u0627\u0641 \u060c Flexbox Excels \u0631\u0627 \u062f\u0631:<\/p>\n<ul>\n<li>\u0686\u06cc\u062f\u0645\u0627\u0646 \u0647\u062f\u0631 \u0628\u0627 \u0622\u0631\u0645 \u0648 \u0646\u0627\u0648\u0628\u0631\u06cc<\/li>\n<li>\u06af\u0627\u0644\u0631\u06cc \u0647\u0627\u06cc \u0639\u06a9\u0633 \u0628\u0627 \u0641\u0627\u0635\u0644\u0647 \u0633\u0627\u0632\u06af\u0627\u0631<\/li>\n<li>\u0631\u0633\u0627\u0646\u0647 \u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0628\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u062a\u063a\u0630\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f<\/li>\n<li>\u0639\u0646\u0627\u0635\u0631 \u0628\u0627 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627 \u0648 \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u062a\u0631\u0627\u0632<\/li>\n<li>\u062c\u062f\u0627\u0648\u0644 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0648 \u067e\u0627\u0646\u0644 \u0647\u0627\u06cc \u0642\u06cc\u0645\u062a \u06af\u0630\u0627\u0631\u06cc<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C_%D8%A7%D8%B2_%D8%B7%D8%B1%DB%8C%D9%82_%D8%A7%D9%86%D8%AC%D8%A7%D9%85\"><\/span>\n<p>  \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0646\u062c\u0627\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0627\u06a9\u0633\u067e\u0644\u0648\u0631\u0631 Flexbox \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0646\u062a\u0632\u0627\u0639\u06cc CSS \u0631\u0627 \u0628\u0647 \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0645\u0644\u0645\u0648\u0633 \u0648 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u062c\u0627\u06cc \u0628\u0647 \u06cc\u0627\u062f \u0622\u0648\u0631\u062f\u0646 \u062e\u0648\u0627\u0635 \u060c \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0648 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0641\u0648\u0631\u06cc \u06cc\u06a9 \u0634\u0647\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n<p>\u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc \u06a9\u0646\u0645:<\/p>\n<ul>\n<li>\u0645\u0642\u0627\u062f\u06cc\u0631 \u0634\u062f\u06cc\u062f \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0686\u06af\u0648\u0646\u0647 \u0637\u0631\u062d \u0647\u0627 \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u0646\u062f<\/li>\n<li>\u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0627\u063a\u0644\u0628 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0628\u0627 \u062a\u0639\u062f\u0627\u062f \u0645\u062e\u062a\u0644\u0641 \u0645\u0648\u0627\u0631\u062f \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0686\u06cc\u062f\u0645\u0627\u0646 \u0647\u0627 \u0631\u0627 \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u062e\u0648\u062f \u0628\u0627\u0632\u0622\u0641\u0631\u06cc\u0646\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<p>\u0628\u0627 \u0647\u0631 \u0622\u0632\u0645\u0627\u06cc\u0634 \u060c Flexbox \u06a9\u0645\u062a\u0631 \u0645\u0631\u0645\u0648\u0632 \u0648 \u0628\u0635\u0631\u06cc \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f &#8211; \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646\u0686\u0647 \u06a9\u0647 \u06cc\u06a9 \u0628\u0627\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u06cc\u062f \u062c\u0627\u062f\u0648\u06af\u0631\u06cc CSS \u0628\u0647 \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u062f\u06cc\u06af\u0631 \u062f\u0631 \u06a9\u06cc\u062a \u0634\u0645\u0627 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f. \u2728<\/p>\n<p>\u0628\u0627 \u0686\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 Flexbox \u062f\u0633\u062a \u0648 \u067e\u0646\u062c\u0647 \u0646\u0631\u0645 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u061f \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 Explorer \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0646\u062a\u0627\u06cc\u062c \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0622\u06cc\u0627 \u0627\u0632 \u06a9\u0634\u062a\u06cc \u0628\u0627 \u0686\u06cc\u062f\u0645\u0627\u0646 CSS \u062e\u0633\u062a\u0647 \u0634\u062f\u0647 \u0627\u06cc\u062f\u061f Flexbox \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u060c \u0627\u0645\u0627 \u062a\u0641\u0627\u0648\u062a \u0632\u06cc\u0627\u062f\u06cc \u0628\u06cc\u0646 \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0648 \u062f\u06cc\u062f\u0646 \u0622\u0646 \u062f\u0631 \u0639\u0645\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0645\u0646 \u06cc\u06a9 \u0627\u06a9\u0633\u067e\u0644\u0648\u0631\u0631 Flexbox Interactive \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0632\u0645\u0627\u06cc\u0634 \u062f\u0633\u062a\u06cc \u060c \u0627\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":103797,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-103796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/103796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=103796"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/103796\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/103797"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=103796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=103796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=103796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}