{"id":88595,"date":"2025-06-29T17:44:08","date_gmt":"2025-06-29T10:44:08","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=88595"},"modified":"2025-07-10T11:25:11","modified_gmt":"2025-07-10T04:25:11","slug":"huong-dan-su-dung-flexbox-bootstrap","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/","title":{"rendered":"Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/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=\"Toggle Table of Content\"><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:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Flexbox_trong_Bootstrap_la_gi\" >Flexbox trong Bootstrap l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Kich_hoat_Flex_voi_d-flex_va_d-inline-flex\" >K\u00edch ho\u1ea1t Flex v\u1edbi d-flex v\u00e0 d-inline-flex<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Dieu_chinh_huong_hien_thi_voi_flex-direction\" >\u0110i\u1ec1u ch\u1ec9nh h\u01b0\u1edbng hi\u1ec3n th\u1ecb v\u1edbi flex-direction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Canh_chinh_theo_truc_chinh_justify-content\" >Canh ch\u1ec9nh theo tr\u1ee5c ch\u00ednh: justify-content-*<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Canh_chinh_theo_truc_phu_align-items\" >Canh ch\u1ec9nh theo tr\u1ee5c ph\u1ee5: align-items-*<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Su_dung_align-self-_cho_tung_phan_tu\" >S\u1eed d\u1ee5ng align-self-* cho t\u1eebng ph\u1ea7n t\u1eed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Tu_dong_mo_rongthu_hep_voi_flex-grow_flex-shrink_flex-fill\" >T\u1ef1 \u0111\u1ed9ng m\u1edf r\u1ed9ng\/thu h\u1eb9p v\u1edbi flex-grow, flex-shrink, flex-fill<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Dieu_khien_xuong_dong_voi_flex-wrap\" >\u0110i\u1ec1u khi\u1ec3n xu\u1ed1ng d\u00f2ng v\u1edbi flex-wrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Thay_doi_thu_tu_phan_tu_voi_order\" >Thay \u0111\u1ed5i th\u1ee9 t\u1ef1 ph\u1ea7n t\u1eed v\u1edbi order-*<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Su_dung_align-content-_khi_co_nhieu_dong\" >S\u1eed d\u1ee5ng align-content-* khi c\u00f3 nhi\u1ec1u d\u00f2ng<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Flex_Responsive_trong_Bootstrap\" >Flex Responsive trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#So_sanh_Flexbox_va_Grid_trong_Bootstrap\" >So s\u00e1nh Flexbox v\u00e0 Grid trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Loi_su_dung_Flex_trong_Bootstrap_pho_bien_va_cach_khac_phuc\" >L\u1ed7i s\u1eed d\u1ee5ng Flex trong Bootstrap ph\u1ed5 bi\u1ebfn v\u00e0 c\u00e1ch kh\u1eafc ph\u1ee5c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Bai_tap_luyen_tap_su_dung_Flexbox_Bootstrap\" >B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Flexbox Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Cau_hoi_thuong_gap_ve_Flexbox_Bootstrap\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Flexbox Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Khi x\u00e2y d\u1ef1ng giao di\u1ec7n web, vi\u1ec7c c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c, ph\u00e2n ph\u1ed1i kho\u1ea3ng c\u00e1ch v\u00e0 s\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed sao cho h\u1ee3p l\u00fd l\u00e0 m\u1ed9t th\u1eed th\u00e1ch m\u00e0 front-end developer th\u01b0\u1eddng xuy\u00ean g\u1eb7p ph\u1ea3i. Bootstrap \u0111\u00e3 \u0111\u01a1n gi\u1ea3n h\u00f3a to\u00e0n b\u1ed9 qu\u00e1 tr\u00ecnh n\u00e0y v\u1edbi h\u1ec7 th\u1ed1ng Flexbox ti\u1ec7n \u00edch t\u00edch h\u1ee3p s\u1eb5n. \u0110\u00e2y l\u00e0 ph\u01b0\u01a1ng ph\u00e1p t\u1ed5 ch\u1ee9c giao di\u1ec7n linh ho\u1ea1t, d\u1ec5 d\u00f9ng v\u00e0 c\u1ef1c k\u1ef3 hi\u1ec7u qu\u1ea3, \u0111\u1eb7c bi\u1ec7t khi b\u1ea1n c\u1ea7n t\u1ea1o layout nhanh ch\u00f3ng m\u00e0 v\u1eabn \u0111\u1ea3m b\u1ea3o responsive.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u h\u01a1n v\u1ec1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flexbox trong Bootstrap l\u00e0 g\u00ec?<\/li>\n\n\n\n<li>C\u00e1ch s\u1eed d\u1ee5ng c\u00e1c class Flex c\u01a1 b\u1ea3n v\u00e0 n\u00e2ng cao<\/li>\n\n\n\n<li>K\u1ef9 thu\u1eadt responsive v\u1edbi Flex<\/li>\n\n\n\n<li>C\u00e1ch kh\u1eafc ph\u1ee5c l\u1ed7i th\u01b0\u1eddng g\u1eb7p khi s\u1eed d\u1ee5ng Flexbox trong Bootstrap<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-flexbox-trong-bootstrap-la-gi\"><span class=\"ez-toc-section\" id=\"Flexbox_trong_Bootstrap_la_gi\"><\/span><strong>Flexbox trong Bootstrap l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flexbox-la-gi\"><strong>Flexbox l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Flexbox (vi\u1ebft t\u1eaft c\u1ee7a Flexible Box Layout) l\u00e0 m\u1ed9t m\u00f4 h\u00ecnh b\u1ed1 c\u1ee5c \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 qu\u1ea3n l\u00fd vi\u1ec7c s\u1eafp x\u1ebfp, c\u0103n ch\u1ec9nh v\u00e0 ph\u00e2n chia kh\u00f4ng gian gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed trong m\u1ed9t container. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi b\u1ea1n c\u1ea7n t\u1ea1o giao di\u1ec7n linh ho\u1ea1t, responsive v\u00e0 d\u1ec5 ki\u1ec3m so\u00e1t v\u1ec1 chi\u1ec1u ngang l\u1eabn chi\u1ec1u d\u1ecdc.<\/p>\n\n\n\n<p>Trong <strong><a href=\"https:\/\/itviec.com\/blog\/bootstrap-5-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap 5<\/a><\/strong>, Flexbox \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p th\u00f4ng qua m\u1ed9t b\u1ed9 ti\u1ec7n \u00edch class (utility classes), gi\u00fap b\u1ea1n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bi\u1ebfn m\u1ed9t ph\u1ea7n t\u1eed th\u00e0nh flex container v\u1edbi <strong>d-flex<\/strong> ho\u1eb7c <strong>d-inline-flex<\/strong><\/li>\n\n\n\n<li>C\u0103n ch\u1ec9nh con theo tr\u1ee5c ch\u00ednh ho\u1eb7c tr\u1ee5c ph\u1ee5 (<strong>justify-content-*<\/strong>, <strong>align-items-*<\/strong>)<\/li>\n\n\n\n<li>Ki\u1ec3m so\u00e1t th\u1ee9 t\u1ef1 (<strong>order-*<\/strong>), kh\u1ea3 n\u0103ng co gi\u00e3n (<strong>flex-grow<\/strong>, <strong>flex-shrink<\/strong>)<\/li>\n\n\n\n<li>H\u1ed7 tr\u1ee3 responsive theo breakpoint (<strong>d-flex<\/strong>, <strong>flex-row<\/strong>, <strong>flex-column<\/strong> theo <strong>md<\/strong>, <strong>lg<\/strong>, v.v.)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf72a9Xw3rVLRZrY-u5hwmhIks07NdoZzK86sUqnyYOnfOnLwjfxcFYAMlh7WMQ8fBkoIjPti-fgwahZI9RTTZ_E7vEBO8lpu6TQf-7PGBKsSAyDYqnUEKEi4vs18u1GFO8qU5i8g?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>H\u00ecnh \u1ea3nh minh h\u1ecda s\u1eed d\u1ee5ng Flexbox \u0111\u1ec3 t\u00f9y ch\u1ec9nh v\u1ecb tr\u00ed ph\u1ea7n t\u1eed<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-nen-dung-flexbox-trong-bootstrap\"><strong>T\u1ea1i sao n\u00ean d\u00f9ng Flexbox trong Bootstrap?<\/strong><\/h3>\n\n\n\n<p>V\u1edbi Flexbox, Bootstrap gi\u00fap b\u1ea1n qu\u1ea3n l\u00fd b\u1ed1 c\u1ee5c cho column, navbar, button group, card component v\u00e0 nhi\u1ec1u th\u00e0nh ph\u1ea7n kh\u00e1c m\u1ed9t c\u00e1ch nhanh ch\u00f3ng nh\u01b0ng v\u1eabn \u0111\u1ea3m b\u1ea3o m\u00e3 s\u1ea1ch v\u00e0 g\u1ecdn g\u00e0ng. Vai tr\u00f2 c\u1ee7a vi\u1ec7c s\u1eed d\u1ee5ng Flexbox Bootstrap bao g\u1ed3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>X\u00e2y d\u1ef1ng trang web nhanh ch\u00f3ng:<\/strong> B\u1ea1n ch\u1ec9 c\u1ea7n nh\u1edb t\u00ean class trong Flexbox, kh\u00f4ng c\u1ea7n vi\u1ebft CSS<\/li>\n\n\n\n<li><strong>S\u1eed d\u1ee5ng linh ho\u1ea1t:<\/strong> C\u00f3 th\u1ec3 \u00e1p d\u1ee5ng t\u1eeb b\u1ed1 c\u1ee5c l\u1edbn \u0111\u1ebfn t\u1eebng ph\u1ea7n t\u1eed nh\u1ecf<\/li>\n\n\n\n<li><strong>H\u1ed7 tr\u1ee3 Responsive:<\/strong> H\u1ed7 tr\u1ee3 c\u00e1c breakpoint (sm, md, lg, xl, xxl)<\/li>\n\n\n\n<li><strong>T\u1ed1i \u01b0u h\u00f3a l\u00e0m vi\u1ec7c nh\u00f3m<\/strong>: Gi\u00fap c\u1ea3 nh\u00f3m th\u1ed1ng nh\u1ea5t c\u00e1ch t\u1ed5 ch\u1ee9c layout, d\u1ec5 b\u1ea3o tr\u00ec v\u00e0 m\u1edf r\u1ed9ng v\u1ec1 sau<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam: <strong><a href=\"https:\/\/itviec.com\/blog\/cach-tuy-chinh-bootstrap-responsive\/\" target=\"_blank\" rel=\"noreferrer noopener\">Responsive trong Bootstrap: H\u01b0\u1edbng d\u1eabn t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-kich-ho\u1ea1t-flex-v\u1edbi-d-flex-va-d-inline-flex\"><span class=\"ez-toc-section\" id=\"Kich_hoat_Flex_voi_d-flex_va_d-inline-flex\"><\/span><strong>K\u00edch ho\u1ea1t Flex v\u1edbi d-flex v\u00e0 d-inline-flex<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 b\u1eaft \u0111\u1ea7u s\u1eed d\u1ee5ng Flexbox trong Bootstrap, b\u1ea1n c\u1ea7n k\u00edch ho\u1ea1t ch\u1ebf \u0111\u1ed9 Flex cho m\u1ed9t ph\u1ea7n t\u1eed. \u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng c\u00e1ch \u00e1p d\u1ee5ng m\u1ed9t trong hai class ti\u1ec7n \u00edch:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-d-flex\"><strong>d-flex<\/strong><\/h3>\n\n\n\n<p>Bi\u1ebfn ph\u1ea7n t\u1eed th\u00e0nh block-level flex container (hi\u1ec3n th\u1ecb nh\u01b0 display: flex)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex p-2 bd-highlight bg-light\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u0110\u00e2y l\u00e0 m\u1ed9t v\u00f9ng ch\u1ee9a s\u1eed d\u1ee5ng flexbox\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdK8h-mRMjrZZC52FAMKUk6KDa-jJfOINI4wWh90gkkY50xl5sLM5rzfFKzhQW2Sp1IHKxg5uXLcBG_DYCkRLnsKP_iW2xXYAu4zhrt3uDPdALyqY-3ZHklOP1XTUOQJaUJ2reYZw?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ph\u1ea7n t\u1eed div s\u1ebd chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u ngang (block-level)<\/li>\n\n\n\n<li>C\u00e1c ph\u1ea7n t\u1eed con b\u00ean trong (n\u1ebfu c\u00f3) s\u1ebd t\u1ef1 \u0111\u1ed9ng tr\u1edf th\u00e0nh flex items<\/li>\n\n\n\n<li>B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng c\u00e1c ti\u1ec7n \u00edch nh\u01b0 <code>justify-content-between<\/code>, <code>align-items-center<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-d-inline-flex\"><strong>d-inline-flex<\/strong><\/h3>\n\n\n\n<p>Bi\u1ebfn ph\u1ea7n t\u1eed th\u00e0nh inline-level flex container (hi\u1ec3n th\u1ecb nh\u01b0 <code>display: inline-flex<\/code>)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-inline-flex p-2 bd-highlight bg-light\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u0110\u00e2y l\u00e0 m\u1ed9t v\u00f9ng ch\u1ee9a s\u1eed d\u1ee5ng inline flex\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfPZ7mkFfcdhOe1_YXM4XC9tSdnKeVlKUyDCQA3BiEJTECyuNolCsBVz7kVkGUZJhvV_U_LtLzHKHp8LhqMI2qZ8CsBDhp_KJaroW2rLbPha2ip6uk5khrscdfa-rWEXoBrLYSn2Q?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ph\u1ea7n t\u1eed div s\u1ebd ch\u1ec9 chi\u1ebfm \u0111\u00fang k\u00edch th\u01b0\u1edbc n\u1ed9i dung c\u1ee7a n\u00f3 (gi\u1ed1ng nh\u01b0 <code>display: inline<\/code>)<\/li>\n\n\n\n<li>C\u0169ng c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh flex gi\u1ed1ng nh\u01b0 <code>d-flex<\/code><\/li>\n<\/ul>\n\n\n\n<p>T\u1eeb \u0111\u00e2y c\u00f3 th\u1ec3 th\u1ea5y, Flexbox CSS l\u00e0 c\u00f4ng c\u1ee5 g\u1ed1c do tr\u00ecnh duy\u1ec7t cung c\u1ea5p, cho ph\u00e9p t\u1ea1o layout linh ho\u1ea1t th\u00f4ng qua vi\u1ec7c vi\u1ebft CSS th\u1ee7 c\u00f4ng. Trong khi \u0111\u00f3, Flexbox Bootstrap l\u00e0 t\u1eadp h\u1ee3p c\u00e1c class ti\u1ec7n \u00edch \u0111\u01b0\u1ee3c d\u1ef1ng s\u1eb5n, gi\u00fap b\u1ea1n \u00e1p d\u1ee5ng c\u00e1c t\u00ednh n\u0103ng c\u1ee7a Flexbox CSS m\u1ed9t c\u00e1ch nhanh ch\u00f3ng, kh\u00f4ng c\u1ea7n can thi\u1ec7p tr\u1ef1c ti\u1ebfp v\u00e0o m\u00e3 CSS.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/flex-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>flex v\u00e0 inline-flex<\/strong><\/a> \u0111\u1ec3 hi\u1ec3u h\u01a1n v\u1ec1 c\u01a1 ch\u1ebf ho\u1ea1t \u0111\u1ed9ng c\u1ee7a n\u00f3.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-di\u1ec1u-ch\u1ec9nh-h\u01b0\u1edbng-hi\u1ec3n-th\u1ecb-v\u1edbi-flex-direction\"><span class=\"ez-toc-section\" id=\"Dieu_chinh_huong_hien_thi_voi_flex-direction\"><\/span><strong>\u0110i\u1ec1u ch\u1ec9nh h\u01b0\u1edbng hi\u1ec3n th\u1ecb v\u1edbi flex-direction<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong Flexbox, thu\u1ed9c t\u00ednh <strong><code>flex-direction<\/code><\/strong> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh h\u01b0\u1edbng s\u1eafp x\u1ebfp c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed con (flex items) b\u00ean trong ph\u1ea7n t\u1eed cha (flex container). Bootstrap cung c\u1ea5p c\u00e1c l\u1edbp ti\u1ec7n \u00edch (utility classes) \u0111\u1ec3 gi\u00fap b\u1ea1n \u0111i\u1ec1u ch\u1ec9nh h\u01b0\u1edbng hi\u1ec3n th\u1ecb m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng.<\/p>\n\n\n\n<p>C\u00f3 b\u1ed1n class ch\u00ednh \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng flex-direction m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-row\"><strong>.flex-row<\/strong><\/h3>\n\n\n\n<p>S\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed theo h\u00e0ng ngang, t\u1eeb tr\u00e1i sang ph\u1ea3i (theo m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex flex-row\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfuqxejPMdV2WctwMsNrC0zsm4wU-m9rDKVI8pntDriyJppaTOU7O2ULf_KFr5DwIvZz1F-VYsm-XNpn5h-W3eQ46Ki0Ff_7EDqnrQZvOVjdISHjJ8piLhXuyxBZVsIwDAs0047FQ?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>d-flex<\/code>: Bi\u1ebfn ph\u1ea7n t\u1eed cha th\u00e0nh m\u1ed9t flex container.<\/li>\n\n\n\n<li><code>flex-row<\/code>: C\u00e1c ph\u1ea7n t\u1eed Flex item 1, Flex item 2, Flex item 3 \u0111\u01b0\u1ee3c x\u1ebfp li\u1ec1n k\u1ec1 nhau theo chi\u1ec1u ngang<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-row-reverse\"><strong>.flex-row-reverse<\/strong><\/h3>\n\n\n\n<p>S\u1eafp x\u1ebfp theo h\u00e0ng ngang nh\u01b0ng t\u1eeb ph\u1ea3i sang tr\u00e1i:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex flex-row-reverse\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfqL8sopCaGuV7r5BSq1DaZcwGDu7cm4qvKEE1GJq1KcY4DjXlgo4tt5Xz0teApmnWgU6yr_0QjpPQOxFJzo9rsgcczCsfn15wElnna6kOSPZRTVqEgAu-SDHKPBQ_srSod9elDWQ?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>d-flex<\/code>: Thi\u1ebft l\u1eadp flex container.<\/li>\n\n\n\n<li><code>flex-row-reverse<\/code>: \u0110\u1ed5i h\u01b0\u1edbng tr\u1ee5c ch\u00ednh, c\u00e1c ph\u1ea7n t\u1eed li\u1ec1n k\u1ec1 nhau theo chi\u1ec1u ngang nh\u01b0ng v\u1edbi h\u01b0\u1edbng ng\u01b0\u1ee3c l\u1ea1i Flex item 3, Flex item 2, Flex item 1<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-column\"><strong>.flex-column<\/strong><\/h3>\n\n\n\n<p>S\u1eafp x\u1ebfp theo c\u1ed9t d\u1ecdc, t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex flex-column\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfAsL4Dg8BqCxIh275HSqyD4VVC4W0VKS7ccgAhlGh9xg8pvC5XThrPVibf-Gag3ySAIePaNRZT4XAtz2qk5LVGJrmuz6iMcQFMmgo-Jj7A2yECdzqTCjC4aYA0GtnkSPi6YoGFKA?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>d-flex<\/code>: Thi\u1ebft l\u1eadp flex container.<\/li>\n\n\n\n<li><code>flex-column<\/code>: \u0110\u1eb7t tr\u1ee5c ch\u00ednh theo chi\u1ec1u d\u1ecdc t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi.<\/li>\n\n\n\n<li>C\u00e1c ph\u1ea7n t\u1eed Flex item 1, Flex item 2, Flex item 3 \u0111\u01b0\u1ee3c x\u1ebfp theo c\u1ed9t, t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi. M\u1ed7i ph\u1ea7n t\u1eed n\u1eb1m tr\u00ean m\u1ed9t d\u00f2ng ri\u00eang bi\u1ec7t.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-column-reverse\"><strong>.flex-column-reverse<\/strong><\/h3>\n\n\n\n<p>S\u1eafp x\u1ebfp theo c\u1ed9t d\u1ecdc nh\u01b0ng t\u1eeb d\u01b0\u1edbi l\u00ean tr\u00ean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex flex-column-reverse\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcrIlOHkIpavgZrnTHCfuR5uIjfdRfgrtIL28ZQ5eWUcXB24R9WJRCJkfiAQOgOrt1DU-SDzGXXcdr6AB_36-aowFmY7PrIpd21Seub9MfRQT-DFNrlF8Mz5iw-zx3eP5GwxZbjJw?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>d-flex<\/code>: K\u00edch ho\u1ea1t flex container.<\/li>\n\n\n\n<li><code>flex-column-reverse<\/code>: Thi\u1ebft l\u1eadp tr\u1ee5c d\u1ecdc nh\u01b0ng \u0111\u1ea3o ng\u01b0\u1ee3c, t\u1eeb d\u01b0\u1edbi l\u00ean tr\u00ean.<\/li>\n\n\n\n<li>M\u1eb7c d\u00f9 c\u00e1c ph\u1ea7n t\u1eed Flex item 1, Flex item 2, Flex item 3 \u0111\u01b0\u1ee3c \u0111\u1eb7t theo th\u1ee9 t\u1ef1 1 -&gt; 2 -&gt; 3 trong code, nh\u01b0ng l\u1ea1i \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb theo h\u01b0\u1edbng ng\u01b0\u1ee3c l\u1ea1i.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-canh-ch\u1ec9nh-theo-tr\u1ee5c-chinh-justify-content\"><span class=\"ez-toc-section\" id=\"Canh_chinh_theo_truc_chinh_justify-content\"><\/span><strong>Canh ch\u1ec9nh theo tr\u1ee5c ch\u00ednh: justify-content-*<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong Flexbox, tr\u1ee5c ch\u00ednh (main axis) l\u00e0 tr\u1ee5c m\u00e0 c\u00e1c ph\u1ea7n t\u1eed con (flex items) \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo m\u1eb7c \u0111\u1ecbnh:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u1ee5c ngang (tr\u00e1i \u2192 ph\u1ea3i) n\u1ebfu s\u1eed d\u1ee5ng <strong>.flex-row<\/strong> (flex-direction: row)<\/li>\n\n\n\n<li>Tr\u1ee5c d\u1ecdc (tr\u00ean \u2192 d\u01b0\u1edbi) n\u1ebfu s\u1eed d\u1ee5ng <strong>.flex-column<\/strong> (flex-direction: column)<\/li>\n<\/ul>\n\n\n\n<p>L\u1edbp ti\u1ec7n \u00edch justify-content-* trong Bootstrap cho ph\u00e9p b\u1ea1n canh ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed theo tr\u1ee5c ch\u00ednh, t\u1ee9c l\u00e0 x\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u, k\u1ebft th\u00fac, ho\u1eb7c ph\u00e2n ph\u1ed1i kho\u1ea3ng c\u00e1ch gi\u1eefa ch\u00fang m\u1ed9t c\u00e1ch linh ho\u1ea1t.<\/p>\n\n\n\n<p><strong>C\u00e1c t\u00f9y ch\u1ecdn canh ch\u1ec9nh v\u1edbi justify-content-*<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-content-start-canh-trai-ho\u1eb7c-tren\"><strong>justify-content-start \u2013 Canh tr\u00e1i (ho\u1eb7c tr\u00ean)<\/strong><\/h3>\n\n\n\n<p>C\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c canh s\u00e1t v\u1ec1 \u0111\u1ea7u tr\u1ee5c ch\u00ednh (tr\u00e1i n\u1ebfu row, tr\u00ean n\u1ebfu column):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex justify-content-start\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfbN9doUPluS8SmtmfMeRkTeAd5DBiiEaAcKck-U3vxzcmgXg1LZvfq-ylJ5HuWim24fSdbLMKtonZyeAfK7vAz6AkALY-ZhGjCSry09rp_tGC2rZBYDMFJIqq7kw3C3PyhP0vF0A?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p tr\u1ee5c d\u1ecdc:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column justify-content-start\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcTRu4Ds1rBiWPgb2mK29vRcWjpAksD1EgHu0JXjLihW9TQ53n496ppoUPhWZhbJ3hH5FxXDZZY2KUglboqk6W2zwYKZuZOPgJm7StVdVu5S1MC1z7rJlCGCYnggr8vEu7PrUA2?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-content-end-canh-ph\u1ea3i-ho\u1eb7c-d\u01b0\u1edbi\"><strong>justify-content-end \u2013 Canh ph\u1ea3i (ho\u1eb7c d\u01b0\u1edbi)<\/strong><\/h3>\n\n\n\n<p>C\u00e1c ph\u1ea7n t\u1eed d\u00ednh s\u00e1t m\u00e9p ph\u1ea3i c\u1ee7a container:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex justify-content-end\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfHj533-An2a2YLtcoynyB-JcKuCZb0TeoKPwBHWaanuCsA3mflhGMrBnCbsil0rKWetLuR0K8FxZ5thPdqk_KsWgILxgX41_XJuiicbF7OUmQnmUWdzLF5ljuqiGwcI1e8LmzEMQ?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p tr\u1ee5c ch\u00ednh l\u00e0 tr\u1ee5c d\u1ecdc:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column justify-content-end\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdBJ8F4AdPnrQnvxr0mae_XLbmhVsGRoSHZvhu2ojUt_lpaJBXfEHWEqhU_ort3W1NF56h0UgOUHt-PSPxLxdY9mUAAergWr3d0hq-68CZlXd1Ne4TuQmdnmOMWt4cvJK-ExukYFQ?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-content-center-canh-gi\u1eefa\"><strong>justify-content-center \u2013 Canh gi\u1eefa<\/strong><\/h3>\n\n\n\n<p>C\u00e1c ph\u1ea7n t\u1eed n\u1eb1m gi\u1eefa kh\u1ed1i container, c\u00f3 kho\u1ea3ng tr\u1ed1ng \u0111\u1ec1u \u1edf hai b\u00ean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex justify-content-center\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXc7m68vMJH5s-hYJK5k_C53UySLVcd1qwYXzvMu_8PmoJ8-roQZJnQ3X8MonSg1dT0L8Y5i-MY6-0TfECb3hi5IZEkcEXdGe2hVUN6vLV74GMgcxaQ6xDxv-b8kCK8tvONiFier?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-content-between-dan-d\u1ec1u-hai-d\u1ea7u\"><strong>justify-content-between \u2013 D\u00e0n \u0111\u1ec1u hai \u0111\u1ea7u<\/strong><\/h3>\n\n\n\n<p>Ph\u1ea7n t\u1eed \u0111\u1ea7u v\u00e0 cu\u1ed1i n\u1eb1m s\u00e1t hai m\u00e9p tr\u00e1i\/ph\u1ea3i, ph\u1ea7n t\u1eed gi\u1eefa n\u1eb1m gi\u1eefa, kh\u00f4ng c\u00f3 kho\u1ea3ng tr\u1ed1ng ngo\u00e0i c\u00f9ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex justify-content-between\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf0C0watbKiy_3RGUjt_pwmbp-X0oQAdR021SIHpiH0tvg68OR5NTA87-ZRR8wsaunFics0w9ykwZS5CH2Ic8AIFuICPquxhO9kOkltL5WmF5hPa-3Syp0v__304MaFf9Bdo5DroQ?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-content-around-dan-d\u1ec1u-co-kho\u1ea3ng-d\u1ec7m-ngoai\"><strong>justify-content-around \u2013 D\u00e0n \u0111\u1ec1u c\u00f3 kho\u1ea3ng \u0111\u1ec7m ngo\u00e0i<\/strong><\/h3>\n\n\n\n<p>Kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed b\u1eb1ng nhau, c\u00f3 th\u00eam kho\u1ea3ng tr\u1ed1ng \u1edf hai b\u00ean ngo\u00e0i c\u00f9ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex justify-content-around\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXetTZO75_Pbxdc8w4np_JCEmNEVnT570202WUdY0UUf7Ekx18vy98wDkoY0We6D3zSHvjelpD64Igq02XJDKkxfTTv8UL5VSszNl5O6-SSkt82QWS4kBX1SnTFcdU4IATg5APbX7g?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-content-evenly-dan-d\u1ec1u-tuy\u1ec7t-d\u1ed1i\"><strong>justify-content-evenly \u2013 D\u00e0n \u0111\u1ec1u tuy\u1ec7t \u0111\u1ed1i<\/strong><\/h3>\n\n\n\n<p>Kho\u1ea3ng c\u00e1ch gi\u1eefa t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed v\u00e0 c\u1ea3 hai m\u00e9p ngo\u00e0i ho\u00e0n to\u00e0n b\u1eb1ng nhau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex justify-content-evenly\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcY-5g42BDXYO8bnDSb0dt2oqUY96pispagypX6rGeHM3jr0L8230qfl_z-eO1Zls1kKbUXSlVwQgF6K22sRv9j489dxDicq8_9_zGjEICI2A-joyau6ZYDt03ETnlmHxmeJGo8Wg?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-canh-ch\u1ec9nh-theo-tr\u1ee5c-ph\u1ee5-align-items\"><span class=\"ez-toc-section\" id=\"Canh_chinh_theo_truc_phu_align-items\"><\/span><strong>Canh ch\u1ec9nh theo tr\u1ee5c ph\u1ee5: align-items-*<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong Flexbox, tr\u1ee5c ph\u1ee5 (cross axis) l\u00e0 tr\u1ee5c vu\u00f4ng g\u00f3c v\u1edbi tr\u1ee5c ch\u00ednh. M\u1eb7c \u0111\u1ecbnh, khi <code>flex-direction: row<\/code>, tr\u1ee5c ph\u1ee5 l\u00e0 tr\u1ee5c d\u1ecdc (y-axis). Ng\u01b0\u1ee3c l\u1ea1i, n\u1ebfu <code>flex-direction: column<\/code>, th\u00ec tr\u1ee5c ph\u1ee5 l\u00e0 tr\u1ee5c ngang (x-axis).<\/p>\n\n\n\n<p>C\u00e1c l\u1edbp ti\u1ec7n \u00edch <code>align-items-*<\/code> trong Bootstrap cho ph\u00e9p b\u1ea1n canh ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed flex theo chi\u1ec1u tr\u1ee5c ph\u1ee5, t\u1ee9c l\u00e0 x\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed d\u1ecdc c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed (n\u1ebfu hi\u1ec3n th\u1ecb theo h\u00e0ng ngang).<\/p>\n\n\n\n<p><strong>C\u00e1c t\u00f9y ch\u1ecdn canh ch\u1ec9nh v\u1edbi align-items-*:<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-items-start-canh-v\u1ec1-phia-d\u1ea7u-tr\u1ee5c-ph\u1ee5-tren-cung\"><strong>align-items-start \u2013 Canh v\u1ec1 ph\u00eda \u0111\u1ea7u tr\u1ee5c ph\u1ee5 (tr\u00ean c\u00f9ng)<\/strong><\/h3>\n\n\n\n<p>C\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c c\u0103n v\u1ec1 ph\u00eda \u0111\u1ea7u tr\u1ee5c ph\u1ee5, t\u1ee9c l\u00e0 s\u00e1t m\u00e9p tr\u00ean (n\u1ebfu tr\u1ee5c ph\u1ee5 l\u00e0 d\u1ecdc), b\u1ea5t k\u1ec3 chi\u1ec1u cao c\u1ee7a ch\u00fang:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex align-items-start\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcviS564GHcMjCu6Ey-GIoh-wr5j6urcuXspxl8yeBF0pbBOPhBkoDmSfSrbDqIO1UNzYdAr89XzHP2o2JQ6jwslQTvPbsqMDOsV7cmSmQM5ddG8y1oTQCMdP0PiABxByxYbac7?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Ho\u1eb7c n\u1ebfu tr\u1ee5c ph\u1ee5 l\u00e0 tr\u1ee5c ngang:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column align-items-start\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdFJ2DghxHmsm-9eXrD-cfj_QX_ksoLmcXJZE1s6xlS_PYKT92aET2nKnSm8eaKyhXa1M_H6ipGCx59gdgmkMPjz8uSDiKIEd5Amv3Hdir9Hhva10uBc7tKSsrWEysf_bze5E3KaQ?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-items-end-canh-v\u1ec1-cu\u1ed1i-tr\u1ee5c-ph\u1ee5-d\u01b0\u1edbi-cung\"><strong>align-items-end \u2013 Canh v\u1ec1 cu\u1ed1i tr\u1ee5c ph\u1ee5 (d\u01b0\u1edbi c\u00f9ng)<\/strong><\/h3>\n\n\n\n<p>C\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ea9y v\u1ec1 cu\u1ed1i tr\u1ee5c ph\u1ee5, t\u1ee9c l\u00e0 m\u00e9p d\u01b0\u1edbi c\u1ee7a container (n\u1ebfu tr\u1ee5c ph\u1ee5 l\u00e0 d\u1ecdc) v\u00e0&nbsp; t\u1ea1o kho\u1ea3ng tr\u1ed1ng ph\u00eda tr\u00ean n\u1ebfu chi\u1ec1u cao container l\u1edbn h\u01a1n ph\u1ea7n t\u1eed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex align-items-end\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcGG9PGYnBLy5aU3MRa7Vl4E0qMQqzjBsgYEkc-m-XeUQyDnEjVfXFsIpNhHc9ioDHKo5-Pq-33gFUkeqedtOH4zmDjhgBjzAWYPcqXthdTFEuMYOOYw8_N-RPKMCUkTt_T5uptMw?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Ho\u1eb7c n\u1ebfu tr\u1ee5c ph\u1ee5 l\u00e0 tr\u1ee5c ngang:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column align-items-end\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe3pTj24HXk3e0fXRvXIKZOsJGryadRS0arROw8nRSdG5Ury6KS-QKgjAyDp373rEAoWT9wkrY_Gl8TNpLASuqo-3AfazFPoERCaz2t5jemRhOGdDRM-8YyH5zwA-5bLpetxaFnpg?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-items-center-can-gi\u1eefa-theo-tr\u1ee5c-ph\u1ee5\"><strong>align-items-center \u2013 C\u0103n gi\u1eefa theo tr\u1ee5c ph\u1ee5<\/strong><\/h3>\n\n\n\n<p>C\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c c\u0103n gi\u1eefa theo chi\u1ec1u c\u1ee7a tr\u1ee5c ph\u1ee5, n\u1eb1m gi\u1eefa container v\u00e0 \u0111\u1ec3 l\u1ea1i kho\u1ea3ng tr\u1ed1ng \u0111\u1ec1u \u0111\u1ec1u \u1edf tr\u00ean v\u00e0 d\u01b0\u1edbi (n\u1ebfu tr\u1ee5c ph\u1ee5 l\u00e0 tr\u1ee5c d\u1ecdc):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex align-items-center\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfDtxH9r26-dieUvOI5SjwMYbnEGQCKyfbEy35mFvGLgLYgXz2DEo22UwhwA8XTY5yTcI2gm95gnkEOHv64w8izAFTBAzbKdFImyry3tDchqiflD6rR8siGVtiyy54w0LteG7QQTw?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Ho\u1eb7c n\u1ebfu tr\u1ee5c ph\u1ee5 l\u00e0 tr\u1ee5c ngang:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column align-items-center\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Flex item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJbmvnc1e-62xwvog1x_vRUk6aIkj1f8jgMeAIPIx88JJ-jar47upPg_V7CXDR39BYgIIY3iZhy2Plyp9JrAOf8Av2_n9kYLX7JVpCZ-OzNUbPIV3uyX5wkn64iz7CH4xqR_z0eg?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-s\u1eed-d\u1ee5ng-align-self-cho-t\u1eebng-ph\u1ea7n-t\u1eed\"><span class=\"ez-toc-section\" id=\"Su_dung_align-self-_cho_tung_phan_tu\"><\/span><strong>S\u1eed d\u1ee5ng align-self-* cho t\u1eebng ph\u1ea7n t\u1eed<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u1ebfu nh\u01b0 <strong><code>.align-items-*<\/code><\/strong> gi\u00fap b\u1ea1n c\u0103n ch\u1ec9nh to\u00e0n b\u1ed9 c\u00e1c ph\u1ea7n t\u1eed trong container theo tr\u1ee5c ph\u1ee5 (cross axis), th\u00ec <strong><code>.align-self-*<\/code><\/strong> l\u1ea1i cho ph\u00e9p b\u1ea1n t\u00f9y ch\u1ec9nh v\u1ecb tr\u00ed c\u1ee7a t\u1eebng ph\u1ea7n t\u1eed m\u1ed9t c\u00e1ch ri\u00eang bi\u1ec7t.<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y c\u1ef1c k\u1ef3 h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n t\u1ea1o \u0111i\u1ec3m nh\u1ea5n cho m\u1ed9t th\u00e0nh ph\u1ea7n nh\u1ea5t \u0111\u1ecbnh trong giao di\u1ec7n, v\u00ed d\u1ee5 nh\u01b0 m\u1ed9t n\u00fat k\u00eau g\u1ecdi h\u00e0nh \u0111\u1ed9ng (CTA) n\u1eb1m l\u1ec7ch xu\u1ed1ng d\u01b0\u1edbi, ho\u1eb7c m\u1ed9t icon \u0111\u01b0\u1ee3c \u0111\u1ea9y l\u00ean tr\u00ean gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c.<\/p>\n\n\n\n<p><strong>C\u00e1c t\u00f9y ch\u1ecdn canh ch\u1ec9nh t\u1eebng ph\u1ea7n t\u1eed ri\u00eang bi\u1ec7t v\u1edbi align-self-*:<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-self-start-can-v\u1ec1-phia-d\u1ea7u-tr\u1ee5c-ph\u1ee5-tren-ho\u1eb7c-trai\"><strong>align-self-start \u2013 C\u0103n v\u1ec1 ph\u00eda \u0111\u1ea7u tr\u1ee5c ph\u1ee5 (tr\u00ean ho\u1eb7c tr\u00e1i)<\/strong><\/h3>\n\n\n\n<p>Ph\u1ea7n t\u1eed s\u1eed d\u1ee5ng l\u1edbp n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c c\u0103n s\u00e1t m\u00e9p \u0111\u1ea7u c\u1ee7a tr\u1ee5c ph\u1ee5. N\u1ebfu tr\u1ee5c ph\u1ee5 l\u00e0 tr\u1ee5c d\u1ecdc (m\u1eb7c \u0111\u1ecbnh khi d\u00f9ng flex-row), ph\u1ea7n t\u1eed s\u1ebd n\u1eb1m \u1edf ph\u00eda tr\u00ean c\u00f9ng container.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex\" style=\"height: 100px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-success text-white align-self-start\"&gt;Start&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdKH-pHFA_AooLDE70fQ4tWiMOKqjGJARH8RPdKQZJ5mwZYbrDFT0yaJZitUjfScYEVtpo2sjnda-JqKhRQ7N3QjokFTUY1FMNCKQ9Aw7hmo0JLV47AocnP7QXrCSNBBEZr9uKhWA?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Ho\u1eb7c n\u1ebfu tr\u1ee5c ph\u1ee5 l\u00e0 tr\u1ee5c ngang (flex-column), ph\u1ea7n t\u1eed s\u1ebd n\u1eb1m \u1edf b\u00ean tr\u00e1i container:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column\" style=\"width: 200px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-success text-white align-self-start\"&gt;Start&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfLbR6ODpiAtbuSN31dm0t0uvbh-N-p_SPSspUC1F5Q9p6uvxQpqzHD8QssMVPlw677hJVmpFQ4sxYXrByKonYCGrQzpc5cENPCTbCqYVzsrIjMn66fyPteIOC9EbC3CknTfv_aEw?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-self-end-can-v\u1ec1-phia-cu\u1ed1i-tr\u1ee5c-ph\u1ee5-d\u01b0\u1edbi-ho\u1eb7c-ph\u1ea3i\"><strong>align-self-end \u2013 C\u0103n v\u1ec1 ph\u00eda cu\u1ed1i tr\u1ee5c ph\u1ee5 (d\u01b0\u1edbi ho\u1eb7c ph\u1ea3i)<\/strong><\/h3>\n\n\n\n<p>Ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ea9y xu\u1ed1ng m\u00e9p cu\u1ed1i tr\u1ee5c ph\u1ee5, t\u1ea1o kho\u1ea3ng tr\u1ed1ng \u1edf ph\u00eda tr\u01b0\u1edbc n\u1ebfu container cao h\u01a1n ph\u1ea7n t\u1eed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex\" style=\"height: 100px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-danger text-white align-self-end\"&gt;End&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdrHjd7cmptqoHZoTt5zMb9U7Zeu8R41_eqC9IhxmDAS5sKTOgoUL1f7syH5mB2YtUTMAX7vlNzZ6qiL9AKd-IvAJZapMOgovCkThOZcdjE9nNftwkoR4VVXJz5aASFA1mKBJPG?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Ho\u1eb7c trong flex-column (tr\u1ee5c ph\u1ee5 n\u1eb1m ngang), ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ea9y sang ph\u1ea3i:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column\" style=\"width: 150px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-danger text-white align-self-end\"&gt;End&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcgrcMJQYf4I8Xp-W2SBgPZTB6vToyPrsp5K9btLHQ7LZFj7-ouX96whv0Jb7vdVxqMRS_6hknbkfSvxPRxo-SSDtW2D9Q2vgpZ60Oa8bqND6wf3f_0MB1vcM6ixKJk_oU8H3rV_g?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-self-center-can-gi\u1eefa-theo-tr\u1ee5c-ph\u1ee5\"><strong>align-self-center \u2013 C\u0103n gi\u1eefa theo tr\u1ee5c ph\u1ee5<\/strong><\/h3>\n\n\n\n<p>Ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1eb7t v\u00e0o gi\u1eefa tr\u1ee5c ph\u1ee5, gi\u1eefa ph\u1ea7n \u0111\u1ea7u v\u00e0 cu\u1ed1i container.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex\" style=\"height: 100px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning text-dark align-self-center\"&gt;Center&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcO3JAI7m4butjax3u5pG0oXi0jVn-MwUNCg3H0GqSKKtVinOr-zo39NQVOaaYbdbqtSvy6NsoLE6qCauaUWjq6oENCEkG91ZHFMEW5M1RF7DKcQZKpEIhJ1s3k9yVEQw03ynuI?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>N\u1ebfu l\u00e0 flex-column, ph\u1ea7n t\u1eed n\u1eb1m ch\u00ednh gi\u1eefa theo chi\u1ec1u ngang:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column\" style=\"width: 150px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning text-dark align-self-center\"&gt;Center&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary text-white\"&gt;Flex item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdymISn0ynwSuz1tV9XYCNGpFkRD_t7adgoM3jmM7dsreIzLQeFVOSHmgULbGxA0WAZmSTIiSHtkXGjFBIaC2KTVwQkPxWwUuq_sjiUGceP0wp__sSCXARSrnXlj6U-zRHugKJWBA?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ef1-d\u1ed9ng-m\u1edf-r\u1ed9ng-thu-h\u1eb9p-v\u1edbi-flex-grow-flex-shrink-flex-fill\"><span class=\"ez-toc-section\" id=\"Tu_dong_mo_rongthu_hep_voi_flex-grow_flex-shrink_flex-fill\"><\/span><strong>T\u1ef1 \u0111\u1ed9ng m\u1edf r\u1ed9ng\/thu h\u1eb9p v\u1edbi flex-grow, flex-shrink, flex-fill<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong nhi\u1ec1u t\u00ecnh hu\u1ed1ng, b\u1ea1n c\u1ea7n c\u00e1c ph\u1ea7n t\u1eed trong m\u1ed9t flex container chi\u1ebfm ph\u1ea7n kh\u00f4ng gian linh ho\u1ea1t, t\u1ee9c l\u00e0 c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y kho\u1ea3ng tr\u1ed1ng ho\u1eb7c thu nh\u1ecf l\u1ea1i khi c\u1ea7n thi\u1ebft. Bootstrap cung c\u1ea5p s\u1eb5n c\u00e1c class ti\u1ec7n \u00edch \u0111\u1ec3 b\u1ea1n ki\u1ec3m so\u00e1t kh\u1ea3 n\u0103ng co gi\u00e3n (flexibility) c\u1ee7a t\u1eebng ph\u1ea7n t\u1eed m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n v\u00e0 tr\u1ef1c quan, bao g\u1ed3m:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-fill-dan-d\u1ec1u-ph\u1ea7n-t\u1eed-d\u1ec3-l\u1ea5p-d\u1ea7y-khong-gian\"><strong>flex-fill \u2013 D\u00e0n \u0111\u1ec1u ph\u1ea7n t\u1eed \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y kh\u00f4ng gian<\/strong><\/h3>\n\n\n\n<p>Class <strong><code>flex-fill<\/code><\/strong> cho ph\u00e9p c\u00e1c ph\u1ea7n t\u1eed chi\u1ebfm \u0111\u1ec1u kh\u00f4ng gian tr\u1ed1ng c\u00f2n l\u1ea1i trong container, b\u1ea5t k\u1ec3 n\u1ed9i dung c\u1ee7a ch\u00fang d\u00e0i hay ng\u1eafn.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary flex-fill\"&gt;Flex item&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning flex-fill\"&gt;Flex item&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary flex-fill\"&gt;Flex item&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcNs_0M8E9qkXXPCndwZ5P76rqgRBA3fBKcmw7zMZXzBdkZMcUM_uwaioUchj8CQSGWGxbOQb03j1Ov7cf_FjNmnWhJBApNY1S2lIu8bMd0u1Wg56OLQtxP3CYoSu1KwGd_uGsw?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3, t\u1ea5t c\u1ea3 ph\u1ea7n t\u1eed c\u00f3 s\u1eed d\u1ee5ng <strong><code>.flex-fill<\/code><\/strong> s\u1ebd c\u1ed1 g\u1eafng chi\u1ebfm \u0111\u1ec1u chi\u1ec1u ngang, k\u1ec3 c\u1ea3 khi n\u1ed9i dung \u00edt h\u01a1n. Trong tr\u01b0\u1eddng h\u1ee3p c\u00f3 m\u1ed9t ph\u1ea7n t\u1eed ch\u1ee9a n\u1ed9i dung l\u1edbn, nh\u1eefng ph\u1ea7n t\u1eed c\u00f2n l\u1ea1i s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh chi\u1ec1u r\u1ed9ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"border d-flex\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary flex-fill\"&gt;Flex item&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning flex-fill\"&gt;Flex item chi\u1ebfm nhi\u1ec1u di\u1ec7n t\u00edch&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary flex-fill\"&gt;Flex item&lt;\/div&gt;\n\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfDb_8h1PRafBE4IiLedEpnUSx90J-2rgAuQfWPpLfWNA0yxYtJr775b3Uulfj4loE3VOV84B50B8vnLrH7v7GdNNKUspyFhAQ2ZJbiJ3G2mWOzH4u42O9A9MTvD5bVLshwCPlL?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>L\u01b0u \u00fd: N\u1ebfu b\u1ea1n \u0111\u00e3 d\u00f9ng <strong><code>flex-grow-0<\/code><\/strong> ho\u1eb7c <strong><code>flex-shrink-0<\/code><\/strong>, <strong><code>flex-fill<\/code><\/strong> c\u00f3 th\u1ec3 kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang nh\u01b0 mong mu\u1ed1n, v\u00ec n\u00f3 c\u1ea7n kh\u1ea3 n\u0103ng co\/gi\u00e3n linh ho\u1ea1t.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-grow-m\u1edf-r\u1ed9ng-khi-co-khong-gian\"><strong>flex-grow-* \u2013 M\u1edf r\u1ed9ng khi c\u00f3 kh\u00f4ng gian<\/strong><\/h3>\n\n\n\n<p>L\u1edbp <code>flex-grow-*<\/code> gi\u00fap m\u1ed9t ph\u1ea7n t\u1eed t\u1ef1 \u0111\u1ed9ng m\u1edf r\u1ed9ng \u0111\u1ec3 chi\u1ebfm kho\u1ea3ng tr\u1ed1ng c\u00f2n l\u1ea1i, trong khi c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c gi\u1eef nguy\u00ean k\u00edch th\u01b0\u1edbc ban \u0111\u1ea7u.<\/p>\n\n\n\n<p>Trong \u0111\u00f3, s\u1eed d\u1ee5ng <strong><code>flex-grow-1<\/code><\/strong> \u0111\u1ec3 cho ph\u00e9p ph\u1ea7n t\u1eed t\u1ef1 \u0111\u1ed9ng m\u1edf r\u1ed9ng v\u00e0 l\u1ea5p \u0111\u1ea7y kho\u1ea3ng tr\u1ed1ng c\u00f2n l\u1ea1i, trong khi c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c v\u1eabn gi\u1eef k\u00edch th\u01b0\u1edbc t\u1ef1 nhi\u00ean, c\u00f2n <strong><code>flex-grow-0<\/code><\/strong> \u0111\u1ec3 c\u1ed1 \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed, kh\u00f4ng cho n\u00f3 chi\u1ebfm th\u00eam kh\u00f4ng gian d\u00f9 c\u00f3 d\u01b0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary flex-grow-1\"&gt;Flex grow 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary flex-grow-1\"&gt;Flex grow 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning flex-grow-0\"&gt;Flex grow 0&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdghPfvGKGUr6PuoNU3mv83SRPrXFmMmKX9X9o-GvEnVVDqTFqU4ZLyxv7rbTCsSA-LXEZHnXHC4YS7CFTCKrqghpsgfn9lYMMoOZyG6b0GZ0BEm-nW_0MtBPz1ZKsw3-o0_ETlog?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-shrink-thu-nh\u1ecf-l\u1ea1i-khi-khong-d\u1ee7-ch\u1ed7\"><strong>flex-shrink-* \u2013 Thu nh\u1ecf l\u1ea1i khi kh\u00f4ng \u0111\u1ee7 ch\u1ed7<\/strong><\/h3>\n\n\n\n<p>Class <strong><code>flex-shrink-1<\/code><\/strong> cho ph\u00e9p ph\u1ea7n t\u1eed co l\u1ea1i khi kh\u00f4ng gian h\u1ea1n ch\u1ebf, tr\u00e1nh tr\u00e0n layout, trong khi <strong><code>flex-shrink-0<\/code><\/strong> ng\u0103n ph\u1ea7n t\u1eed kh\u00f4ng b\u1ecb \u00e9p thu nh\u1ecf, v\u00ed d\u1ee5 nh\u01b0 n\u00fat, logo, ho\u1eb7c avatar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary flex-shrink-1\"&gt;Flex shrink 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary flex-shrink-1\"&gt;Flex shrink 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning flex-shrink-0\"&gt;Gi\u1eef nguy\u00ean k\u00edch th\u01b0\u1edbc&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfvwQFWhmVbAX9o7MT6BfZvS5KY3LykpUjVZXSDyCAlB7FiUxqkU6J_Qfd78D_nSC9jNsTZynOwYQPUw4UbF9ch0GHi8AEwHO0V1_ZR_C4eaYuU38ePJoPRcju_Z3J2AY9TC31j?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-di\u1ec1u-khi\u1ec3n-xu\u1ed1ng-dong-v\u1edbi-flex-wrap\"><span class=\"ez-toc-section\" id=\"Dieu_khien_xuong_dong_voi_flex-wrap\"><\/span><strong>\u0110i\u1ec1u khi\u1ec3n xu\u1ed1ng d\u00f2ng v\u1edbi flex-wrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, khi s\u1eed d\u1ee5ng Flexbox trong Bootstrap, c\u00e1c ph\u1ea7n t\u1eed con (flex items) s\u1ebd x\u1ebfp theo m\u1ed9t h\u00e0ng duy nh\u1ea5t v\u00e0 kh\u00f4ng t\u1ef1 \u0111\u1ed9ng xu\u1ed1ng d\u00f2ng. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn t\u00ecnh tr\u1ea1ng v\u1ee1 layout n\u1ebfu kh\u00f4ng \u0111\u1ee7 kh\u00f4ng gian.<\/p>\n\n\n\n<p>\u0110\u1ec3 gi\u1ea3i quy\u1ebft \u0111i\u1ec1u \u0111\u00f3, Bootstrap cung c\u1ea5p nh\u00f3m class ti\u1ec7n \u00edch flex-wrap, gi\u00fap b\u1ea1n ki\u1ec3m so\u00e1t c\u00e1ch c\u00e1c ph\u1ea7n t\u1eed x\u1eed l\u00fd khi kh\u00f4ng gian b\u1ecb gi\u1edbi h\u1ea1n, bao g\u1ed3m:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-nowrap\"><strong>.flex-nowrap<\/strong><\/h3>\n\n\n\n<p>Kh\u00f4ng cho ph\u00e9p xu\u1ed1ng d\u00f2ng (m\u1eb7c \u0111\u1ecbnh).<\/p>\n\n\n\n<p>C\u00e1c ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean c\u00f9ng m\u1ed9t h\u00e0ng, b\u1ea5t k\u1ec3 chi\u1ec1u r\u1ed9ng container. N\u1ebfu kh\u00f4ng \u0111\u1ee7 ch\u1ed7, ch\u00fang s\u1ebd b\u1ecb thu nh\u1ecf l\u1ea1i ho\u1eb7c l\u00e0m tr\u00e0n giao di\u1ec7n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex\" style=\"width: 100px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning\"&gt;Item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeJrdHDPUClNjZimZ_kkh9M9BsIAbHR88NPM0viOqneNUfKWBl8FAoaiyEIGXy0wJA4sGIWlqU5z4hiUXoh5LnAaXK1P6eoCqaUPq-PReiRm-Wu3a9CPrb8KJcupoD00yQX6EALbw?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>L\u01b0u \u00fd, D\u00f9ng <code>.flex-nowrap<\/code> khi b\u1ea1n mu\u1ed1n ki\u1ec3m so\u00e1t vi\u1ec7c co gi\u00e3n thay v\u00ec xu\u1ed1ng d\u00f2ng, th\u01b0\u1eddng d\u00f9ng v\u1edbi scroll ho\u1eb7c layout c\u00f3 chi\u1ec1u ngang c\u1ed1 \u0111\u1ecbnh.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-wrap\"><strong>.flex-wrap<\/strong><\/h3>\n\n\n\n<p>T\u1ef1 \u0111\u1ed9ng xu\u1ed1ng d\u00f2ng.<\/p>\n\n\n\n<p>N\u1ebfu container kh\u00f4ng \u0111\u1ee7 chi\u1ec1u r\u1ed9ng, c\u00e1c ph\u1ea7n t\u1eed s\u1ebd t\u1ef1 \u0111\u1ed9ng xu\u1ed1ng h\u00e0ng, gi\u00fap layout kh\u00f4ng b\u1ecb v\u1ee1 v\u00e0 d\u1ec5 ki\u1ec3m so\u00e1t h\u01a1n tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-wrap\" style=\"width: 200px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning\"&gt;Item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcu6hMqwK6SeTmiVcC01zglFAUl_v4qTy7wWLBsJbvK71aE4YrD595v5CRHedAKS1L9jIakUHPc0Hv2azD_Zm04Y42DPsQ6basI3PgUujAr7mSYtDdNoljq8CjN7G_HiKPUkslb5Q?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-wrap-reverse\"><strong>.flex-wrap-reverse<\/strong><\/h3>\n\n\n\n<p>Xu\u1ed1ng d\u00f2ng theo th\u1ee9 t\u1ef1 ng\u01b0\u1ee3c.<\/p>\n\n\n\n<p>T\u01b0\u01a1ng t\u1ef1 nh\u01b0 <strong><code>.flex-wrap<\/code><\/strong>, nh\u01b0ng d\u00f2ng m\u1edbi s\u1ebd hi\u1ec3n th\u1ecb ph\u00eda tr\u00ean d\u00f2ng c\u0169, thay v\u00ec ph\u00eda d\u01b0\u1edbi. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n ph\u1ea7n t\u1eed m\u1edbi xu\u1ea5t hi\u1ec7n \u1edf tr\u00ean trong UI (theo chi\u1ec1u d\u1ecdc).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-wrap-reverse\" style=\"width: 200px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary\"&gt;Item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning\"&gt;Item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeaCZfvdaB4ZE3e73F_JyL3yC6pYf0G8jjX7_PgKnhiirESeHN9QgQ-QJYuiZ1XKMpvqbmT_eSu7H-_bLH08pyz1GO5rOzaksHLax227-Dv0ImBPYvoCoKH5V_W_341m9LaxwRv?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-thay-d\u1ed5i-th\u1ee9-t\u1ef1-ph\u1ea7n-t\u1eed-v\u1edbi-order\"><span class=\"ez-toc-section\" id=\"Thay_doi_thu_tu_phan_tu_voi_order\"><\/span><strong>Thay \u0111\u1ed5i th\u1ee9 t\u1ef1 ph\u1ea7n t\u1eed v\u1edbi order-*<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Flexbox cho ph\u00e9p b\u1ea1n thay \u0111\u1ed5i th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed m\u00e0 kh\u00f4ng c\u1ea7n thay \u0111\u1ed5i th\u1ee9 t\u1ef1 trong HTML th\u00f4ng qua c\u00e1c class ti\u1ec7n \u00edch <strong><code>.order-*<\/code><\/strong>. C\u00e1c class <code>order-*<\/code> c\u00f3 s\u1eb5n bao g\u1ed3m:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>Gi\u00e1 tr\u1ecb CSS<\/strong><\/td><td><strong>M\u00f4 t\u1ea3<\/strong><\/td><\/tr><tr><td><strong><code>.order-first<\/code><\/strong><\/td><td><code>order: -1<\/code><\/td><td>Lu\u00f4n hi\u1ec3n th\u1ecb \u0111\u1ea7u ti\u00ean<\/td><\/tr><tr><td><strong><code>.order-0<\/code><\/strong><\/td><td><code>order: 0<\/code><\/td><td>M\u1eb7c \u0111\u1ecbnh<\/td><\/tr><tr><td><strong><code>.order-1<\/code> \u2192 <code>.order-5<\/code><\/strong><\/td><td><code>order: 1 \u2192 5<\/code><\/td><td>Hi\u1ec3n th\u1ecb theo th\u1ee9 t\u1ef1 t\u0103ng d\u1ea7n<\/td><\/tr><tr><td><strong><code>.order-last<\/code><\/strong><\/td><td><code>order: 6<\/code><\/td><td>Lu\u00f4n hi\u1ec3n th\u1ecb cu\u1ed1i c\u00f9ng<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex\" style=\"width: 300px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-primary order-3\"&gt;Item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-success order-1\"&gt;Item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"m-2 p-2 bg-warning order-2\"&gt;Item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdvnAnpjyuqsIQLqMyu4HCNcQipQzicGrtSThkbX0nMXM_qj09lZnlC592kaW6yzvrG_Q8MM9NoaGjps04sb6BvLJnVUiGoE7fdHmwAWWjaaL7Cokk1XM4bnr6HRhLmInT5iU5ZBg?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3, m\u1eb7c d\u00f9 Item 1 x\u1ebfp \u0111\u1ea7u ti\u00ean trong m\u00e3 ngu\u1ed3n, nh\u01b0ng l\u1ea1i hi\u1ec3n th\u1ecb \u1edf cu\u1ed1i do c\u00f3 <code>order-3<\/code>, t\u01b0\u01a1ng t\u1ef1 v\u1edbi item 2 v\u00e0 Item 3.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-s\u1eed-d\u1ee5ng-align-content-khi-co-nhi\u1ec1u-dong\"><span class=\"ez-toc-section\" id=\"Su_dung_align-content-_khi_co_nhieu_dong\"><\/span><strong>S\u1eed d\u1ee5ng align-content-* khi c\u00f3 nhi\u1ec1u d\u00f2ng<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi flex container c\u00f3 nhi\u1ec1u h\u00e0ng (t\u1ee9c l\u00e0 b\u1ea1n \u0111\u00e3 b\u1eadt flex-wrap), b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng c\u00e1c l\u1edbp <code>align-content-*<\/code> \u0111\u1ec3 c\u0103n ch\u1ec9nh to\u00e0n b\u1ed9 c\u00e1c h\u00e0ng theo chi\u1ec1u tr\u1ee5c ph\u1ee5 (cross axis). C\u00e1c class <code>align-content-*<\/code> c\u00f3 s\u1eb5n bao g\u1ed3m:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>\u00dd ngh\u0129a<\/strong><\/td><\/tr><tr><td><strong><code>align-content-start<\/code><\/strong><\/td><td>C\u0103n h\u00e0ng l\u00ean ph\u00eda \u0111\u1ea7u tr\u1ee5c ph\u1ee5 (tr\u00ean\/c\u1ea1nh tr\u00e1i)<\/td><\/tr><tr><td><strong><code>align-content-end<\/code><\/strong><\/td><td>C\u0103n xu\u1ed1ng cu\u1ed1i tr\u1ee5c ph\u1ee5<\/td><\/tr><tr><td><strong><code>align-content-center<\/code><\/strong><\/td><td>C\u0103n gi\u1eefa to\u00e0n b\u1ed9 c\u00e1c h\u00e0ng<\/td><\/tr><tr><td><strong><code>align-content-between<\/code><\/strong><\/td><td>D\u00e0n \u0111\u1ec1u c\u00e1c h\u00e0ng, kh\u00f4ng c\u00f3 kho\u1ea3ng tr\u1ed1ng ngo\u00e0i<\/td><\/tr><tr><td><strong><code>align-content-around<\/code><\/strong><\/td><td>D\u00e0n \u0111\u1ec1u, c\u00f3 kho\u1ea3ng c\u00e1ch \u1edf ngo\u00e0i c\u00f9ng<\/td><\/tr><tr><td><strong><code>align-content-stretch<\/code><\/strong><\/td><td>K\u00e9o gi\u00e3n c\u00e1c h\u00e0ng \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y container (m\u1eb7c \u0111\u1ecbnh)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-wrap align-content-between\" style=\"width: 300px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Item 5&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 border\"&gt;Item 6&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, s\u1eed d\u1ee5ng <strong><code>align-content-between<\/code><\/strong> \u0111\u1ec3 c\u00e1c h\u00e0ng s\u1ebd \u0111\u01b0\u1ee3c d\u00e0n \u0111\u1ec1u theo chi\u1ec1u cao, kh\u00f4ng c\u00f3 kho\u1ea3ng tr\u1ed1ng \u1edf tr\u00ean\/d\u01b0\u1edbi:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXc8c03VKcgdS9hGw-jyR1TqNGAmt5JXjQ3aAcaMd32g_XhcmL6hiqyPciUZWbJrwvQRmZ2yF6EBiZL_ne2-bs0EyS9rbGanlCFV7Xti8ez2FvoKr8FREiEEdaTfjls1h1nAiXoF?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-flex-responsive-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Flex_Responsive_trong_Bootstrap\"><\/span><strong>Flex Responsive trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bootstrap h\u1ed7 tr\u1ee3 Flexbox responsive th\u00f4ng qua h\u1ec7 th\u1ed1ng breakpoint, cho ph\u00e9p b\u1ea1n \u00e1p d\u1ee5ng c\u00e1c class flex kh\u00e1c nhau t\u00f9y theo k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh. \u0110\u00e2y l\u00e0 c\u00f4ng c\u1ee5 c\u1ef1c k\u1ef3 m\u1ea1nh \u0111\u1ec3 x\u00e2y d\u1ef1ng giao di\u1ec7n th\u00edch \u1ee9ng (responsive) m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS th\u1ee7 c\u00f4ng.<\/p>\n\n\n\n<p>Class responsive cho h\u1ec7 th\u1ed1ng Flexbox \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf theo c\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>{class-name}-{breakpoint}-{value}<\/strong><\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>breakpoint<\/code>: h\u1ec7 th\u1ed1ng c\u00e1c \u0111i\u1ec3m ng\u1eaft c\u1ee7a Bootstrap nh\u01b0 sm (\u2265576px), md (\u2265768px), \u2026<\/li>\n\n\n\n<li><code>class-name<\/code>: t\u00ean class ti\u1ec7n \u00edch c\u1ea7n \u00e1p d\u1ee5ng<\/li>\n\n\n\n<li><code>value<\/code>: gi\u00e1 tr\u1ecb t\u01b0\u01a1ng \u1ee9ng \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng khi m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb c\u00f3 k\u00edch th\u01b0\u1edbc th\u1ecfa m\u00e3n v\u1edbi breakpoint.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5, \u0111\u1ec3 t\u1ea1o ra giao di\u1ec7n tr\u00ean mobile (&lt;768px): c\u00e1c ph\u1ea7n t\u1eed x\u1ebfp theo c\u1ed9t v\u00e0 c\u0103n gi\u1eefa, c\u00f2n tr\u00ean tablet tr\u1edf l\u00ean (\u2265768px): c\u00e1c ph\u1ea7n t\u1eed x\u1ebfp theo h\u00e0ng ngang v\u00e0 d\u00e0n \u0111\u1ec1u hai b\u00ean, ta l\u00e0m nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"border d-flex flex-column flex-md-row justify-content-center justify-content-md-between\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 bg-primary\"&gt;Item 1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 bg-primary\"&gt;Item 2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 bg-primary\"&gt;Item 3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"p-2 bg-primary\"&gt;Item 4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb tr\u00ean \u0111i\u1ec7n tho\u1ea1i:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXemRfDIKsx1I3jcQqfxu7Q4ptwHFCRXli_sPDdd-oM28bGi8ZlX1y53U1fFBihWy_gdvq-TmME87S9XuYVjUgtXrsaUXXgcsldoVlSODUM8BqGLQehAjJYbaEmszDiNm0xXIHcf6g?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb tr\u00ean m\u00e1y t\u00ednh:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdD5ATBifCdAJV2hkVvLiT1aly8mIcmNee9TblPES_o3EFpkA7oEZ0CMZLGQSFPjMQGIIy4k-0JwohxCGdL5EVW6Z0UPT7Hdty2KdFjuZU8jNnR0ljzRU7weiFASnbyr2G91BTQ?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-so-sanh-flexbox-va-grid-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"So_sanh_Flexbox_va_Grid_trong_Bootstrap\"><\/span><strong>So s\u00e1nh Flexbox v\u00e0 Grid trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi l\u00e0m vi\u1ec7c v\u1edbi Bootstrap, b\u1ea1n c\u00f3 hai c\u00f4ng c\u1ee5 c\u1ef1c k\u1ef3 m\u1ea1nh \u0111\u1ec3 x\u00e2y d\u1ef1ng b\u1ed1 c\u1ee5c giao di\u1ec7n l\u00e0 Flexbox v\u00e0 Grid. C\u1ea3 hai \u0111\u1ec1u \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n th\u00f4ng qua c\u00e1c class ti\u1ec7n \u00edch (utility classes), gi\u00fap b\u1ea1n s\u1eafp x\u1ebfp ph\u1ea7n t\u1eed d\u1ec5 d\u00e0ng h\u01a1n r\u1ea5t nhi\u1ec1u so v\u1edbi float, inline-block, hay c\u00e1c ph\u01b0\u01a1ng ph\u00e1p c\u0169. Tuy nhi\u00ean m\u1ed7i c\u00f4ng c\u1ee5 l\u1ea1i ph\u00f9 h\u1ee3p v\u1edbi m\u1ed9t lo\u1ea1i b\u1ed1 c\u1ee5c kh\u00e1c nhau.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ti\u00eau ch\u00ed<\/strong><\/td><td><strong>Flexbox<\/strong><\/td><td><strong>Grid<\/strong><\/td><\/tr><tr><td><strong>M\u1ee5c ti\u00eau thi\u1ebft k\u1ebf<\/strong><\/td><td>X\u00e2y d\u1ef1ng b\u1ed1 c\u1ee5c 1 chi\u1ec1u (theo h\u00e0ng ho\u1eb7c theo c\u1ed9t)<\/td><td>X\u00e2y d\u1ef1ng b\u1ed1 c\u1ee5c 2 chi\u1ec1u (h\u00e0ng v\u00e0 c\u1ed9t \u0111\u1ed3ng th\u1eddi)<\/td><\/tr><tr><td><strong>C\u00e1ch s\u1eed d\u1ee5ng<\/strong><\/td><td>S\u1eed d\u1ee5ng class ti\u1ec7n \u00edch nh\u01b0 <strong>.d-flex<\/strong>,<strong> .justify-content-*<\/strong>, <strong>.align-items-*<\/strong> \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n h\u01b0\u1edbng, c\u0103n ch\u1ec9nh v\u00e0 gi\u00e3n c\u00e1ch ph\u1ea7n t\u1eed theo h\u00e0ng ho\u1eb7c c\u1ed9t.<\/td><td>S\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng l\u01b0\u1edbi c\u1ee7a Bootstrap g\u1ed3m <strong>.container<\/strong>, <strong>.row<\/strong>, v\u00e0 c\u00e1c class c\u1ed9t nh\u01b0 <strong>.col-*<\/strong> \u0111\u1ec3 chia layout th\u00e0nh c\u00e1c v\u00f9ng r\u00f5 r\u00e0ng, c\u00f3 t\u1ef7 l\u1ec7 c\u1ee5 th\u1ec3.<\/td><\/tr><tr><td><strong>\u0110\u1ed9 linh ho\u1ea1t<\/strong><\/td><td>Linh ho\u1ea1t cao trong vi\u1ec7c canh ch\u1ec9nh m\u1ed9t nh\u00f3m ph\u1ea7n t\u1eed ho\u1eb7c t\u1eebng ph\u1ea7n t\u1eed<\/td><td>M\u1ea1nh trong chia layout t\u1ed5ng th\u1ec3, ch\u00ednh x\u00e1c theo l\u01b0\u1edbi<\/td><\/tr><tr><td><strong>C\u0103n ch\u1ec9nh theo tr\u1ee5c<\/strong><\/td><td>D\u1ec5 d\u00e0ng c\u0103n ch\u1ec9nh theo tr\u1ee5c ch\u00ednh v\u00e0 tr\u1ee5c ph\u1ee5<\/td><td>H\u1ed7 tr\u1ee3 c\u0103n ch\u1ec9nh h\u00e0ng\/c\u1ed9t b\u1eb1ng <strong>.align-*<\/strong>, nh\u01b0ng kh\u00f4ng chi ti\u1ebft nh\u01b0 Flexbox<\/td><\/tr><tr><td><strong>Kh\u1ea3 n\u0103ng ti\u1ebfp c\u1eadn<\/strong><\/td><td>D\u1ec5 h\u1ecdc \u0111\u1ed1i v\u1edbi ng\u01b0\u1eddi m\u1edbi<\/td><td>C\u1ea7n hi\u1ec3u r\u00f5 v\u1ec1 h\u1ec7 th\u1ed1ng l\u01b0\u1edbi v\u00e0 t\u1ef7 l\u1ec7<\/td><\/tr><tr><td><strong>Tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng&nbsp;<\/strong><\/td><td>Menu, button group, card group, c\u0103n gi\u1eefa ph\u1ea7n t\u1eed nh\u1ecf<\/td><td>Giao di\u1ec7n dashboard, blog layout, gallery, form nhi\u1ec1u c\u1ed9t<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>T\u00f3m l\u1ea1i, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng Flexbox khi l\u00e0m vi\u1ec7c v\u1edbi b\u1ed1 c\u1ee5c \u0111\u01a1n gi\u1ea3n, c\u1ea7n \u0111i\u1ec1u khi\u1ec3n chi ti\u1ebft t\u1eebng ph\u1ea7n t\u1eed. C\u00f2n trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u1ea7n chia layout t\u1ed5ng th\u1ec3, ho\u1eb7c x\u1eed l\u00fd b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p nhi\u1ec1u h\u00e0ng\/c\u1ed9t, h\u00e3y s\u1eed d\u1ee5ng Grid system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-l\u1ed7i-s\u1eed-d\u1ee5ng-flex-trong-bootstrap-ph\u1ed5-bi\u1ebfn-va-cach-kh\u1eafc-ph\u1ee5c\"><span class=\"ez-toc-section\" id=\"Loi_su_dung_Flex_trong_Bootstrap_pho_bien_va_cach_khac_phuc\"><\/span><strong>L\u1ed7i s\u1eed d\u1ee5ng Flex trong Bootstrap ph\u1ed5 bi\u1ebfn v\u00e0 c\u00e1ch kh\u1eafc ph\u1ee5c<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c d\u00f9 Flexbox trong Bootstrap r\u1ea5t ti\u1ec7n l\u1ee3i v\u00e0 d\u1ec5 d\u00f9ng nh\u1edd c\u00e1c class ti\u1ec7n \u00edch c\u00f3 s\u1eb5n, nh\u01b0ng n\u1ebfu kh\u00f4ng n\u1eafm r\u00f5 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng ho\u1eb7c d\u00f9ng sai ng\u1eef c\u1ea3nh, b\u1ea1n c\u00f3 th\u1ec3 g\u1eb7p ph\u1ea3i c\u00e1c l\u1ed7i b\u1ed1 c\u1ee5c kh\u00f3 hi\u1ec3u, \u0111\u1eb7c bi\u1ec7t l\u00e0 khi giao di\u1ec7n c\u1ea7n responsive ho\u1eb7c ph\u1ed1i h\u1ee3p v\u1edbi Grid. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 l\u1ed7i th\u01b0\u1eddng g\u1eb7p v\u00e0 c\u00e1ch kh\u1eafc ph\u1ee5c hi\u1ec7u qu\u1ea3:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-khong-kich-ho\u1ea1t-flex-container-tr\u01b0\u1edbc-khi-dung-ti\u1ec7n-ich-flexbox\"><strong>Kh\u00f4ng k\u00edch ho\u1ea1t Flex container tr\u01b0\u1edbc khi d\u00f9ng ti\u1ec7n \u00edch Flexbox<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n qu\u00ean th\u00eam<strong> <code>.d-flex<\/code><\/strong> ho\u1eb7c<strong> <code>.d-inline-flex<\/code><\/strong> v\u00e0o ph\u1ea7n t\u1eed ch\u1ee9a s\u1ebd d\u1eabn \u0111\u1ebfn vi\u1ec7c c\u00e1c class \u0111\u1ecbnh d\u1ea1ng Flex nh\u01b0 <strong><code>justify-content-*<\/code>, <code>align-items-*<\/code>, <code>flex-row<\/code><\/strong>, v.v. kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng v\u00ec ph\u1ea7n t\u1eed ch\u01b0a ph\u1ea3i l\u00e0 Flex container.<\/p>\n\n\n\n<p>=&gt; C\u00e1ch kh\u1eafc ph\u1ee5c: Lu\u00f4n \u0111\u1ea3m b\u1ea3o ph\u1ea7n t\u1eed m\u1eb9 \u0111\u01b0\u1ee3c khai b\u00e1o v\u1edbi .d-flex ho\u1eb7c .d-inline-flex tr\u01b0\u1edbc khi \u00e1p d\u1ee5ng c\u00e1c ti\u1ec7n \u00edch Flexbox kh\u00e1c.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ap-d\u1ee5ng-d-flex-tr\u1ef1c-ti\u1ebfp-vao-row\"><strong>\u00c1p d\u1ee5ng .d-flex tr\u1ef1c ti\u1ebfp v\u00e0o .row<\/strong><\/h3>\n\n\n\n<p>Bootstrap \u0111\u00e3 m\u1eb7c \u0111\u1ecbnh <strong>.row<\/strong> l\u00e0 m\u1ed9t Flex container. N\u1ebfu b\u1ea1n th\u00eam <strong><code>.d-flex<\/code><\/strong> v\u00e0o <code>.row<\/code> n\u1eefa th\u00ec c\u00f3 th\u1ec3 g\u00e2y ra ghi \u0111\u00e8 ho\u1eb7c xung \u0111\u1ed9t v\u1edbi h\u1ec7 th\u1ed1ng Grid s\u1eb5n c\u00f3, \u0111\u1eb7c bi\u1ec7t l\u00e0 l\u00e0m sai l\u1ec7ch kho\u1ea3ng c\u00e1ch (gutter) gi\u1eefa c\u00e1c c\u1ed9t.<\/p>\n\n\n\n<p>=> C\u00e1ch kh\u1eafc ph\u1ee5c: Kh\u00f4ng th\u00eam <code>.d-flex<\/code> v\u00e0o <code>.row<\/code>. N\u1ebfu b\u1ea1n c\u1ea7n c\u0103n ch\u1ec9nh b\u1eb1ng Flex, h\u00e3y \u00e1p d\u1ee5ng c\u00e1c class Flexbox v\u00e0o b\u00ean trong ph\u1ea7n t\u1eed .col.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-thi\u1ebfu-flex-wrap-khi-c\u1ea7n-xu\u1ed1ng-dong\"><strong>Thi\u1ebfu flex-wrap khi c\u1ea7n xu\u1ed1ng d\u00f2ng<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh Flexbox trong Bootstrap s\u1ebd kh\u00f4ng cho ph\u00e9p c\u00e1c ph\u1ea7n t\u1eed con t\u1ef1 xu\u1ed1ng d\u00f2ng. N\u1ebfu b\u1ea1n kh\u00f4ng th\u00eam <strong><code>.flex-wrap<\/code><\/strong>, khi s\u1ed1 l\u01b0\u1ee3ng ph\u1ea7n t\u1eed v\u01b0\u1ee3t qu\u00e1 chi\u1ec1u ngang container th\u00ec giao di\u1ec7n c\u00f3 th\u1ec3 b\u1ecb tr\u00e0n, \u0111\u1eb7c bi\u1ec7t tr\u00ean thi\u1ebft b\u1ecb nh\u1ecf.<\/p>\n\n\n\n<p>=> C\u00e1ch kh\u1eafc ph\u1ee5c: S\u1eed d\u1ee5ng th\u00eam class <strong><code>.flex-wrap<\/code><\/strong> n\u1ebfu b\u1ea1n c\u1ea7n c\u00e1c ph\u1ea7n t\u1eed t\u1ef1 \u0111\u1ed9ng xu\u1ed1ng d\u00f2ng \u0111\u1ec3 gi\u1eef b\u1ed1 c\u1ee5c g\u1ecdn g\u00e0ng v\u00e0 tr\u00e1nh tr\u00e0n n\u1ed9i dung.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nh\u1ea7m-l\u1eabn-gi\u1eefa-tr\u1ee5c-chinh-va-tr\u1ee5c-ph\u1ee5-khi-thay-d\u1ed5i-h\u01b0\u1edbng\"><strong>Nh\u1ea7m l\u1eabn gi\u1eefa tr\u1ee5c ch\u00ednh v\u00e0 tr\u1ee5c ph\u1ee5 khi thay \u0111\u1ed5i h\u01b0\u1edbng<\/strong><\/h3>\n\n\n\n<p>C\u00e1c class nh\u01b0<strong> <code>justify-content-*<\/code><\/strong> v\u00e0 <strong><code>align-items-*<\/code> <\/strong>ho\u1ea1t \u0111\u1ed9ng d\u1ef1a tr\u00ean tr\u1ee5c ch\u00ednh v\u00e0 tr\u1ee5c ph\u1ee5 c\u1ee7a Flex. Khi b\u1ea1n \u0111\u1ed5i h\u01b0\u1edbng Flex t\u1eeb row sang column, vai tr\u00f2 c\u1ee7a c\u00e1c tr\u1ee5c n\u00e0y s\u1ebd \u0111\u1ea3o ng\u01b0\u1ee3c \u2013 khi\u1ebfn k\u1ebft qu\u1ea3 c\u0103n ch\u1ec9nh kh\u00f4ng \u0111\u00fang nh\u01b0 mong mu\u1ed1n.<\/p>\n\n\n\n<p>=> C\u00e1ch kh\u1eafc ph\u1ee5c: C\u1ea7n x\u00e1c \u0111\u1ecbnh r\u00f5<strong> <code>flex-direction<\/code><\/strong> tr\u01b0\u1edbc khi s\u1eed d\u1ee5ng c\u00e1c class c\u0103n ch\u1ec9nh. L\u01b0u \u00fd r\u1eb1ng <code>justify-content-*<\/code> \u00e1p d\u1ee5ng theo tr\u1ee5c ch\u00ednh, c\u00f2n <code>align-items-*<\/code> \u00e1p d\u1ee5ng theo tr\u1ee5c ph\u1ee5.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dung-flex-fill-cung-luc-v\u1edbi-flex-grow-0-ho\u1eb7c-flex-shrink-0\"><strong>D\u00f9ng .flex-fill c\u00f9ng l\u00fac v\u1edbi .flex-grow-0 ho\u1eb7c .flex-shrink-0<\/strong><\/h3>\n\n\n\n<p><strong><code>.flex-fill<\/code> <\/strong>y\u00eau c\u1ea7u ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c co gi\u00e3n theo kh\u00f4ng gian c\u00f2n l\u1ea1i (<strong>flex: 1 1 auto<\/strong>). N\u1ebfu b\u1ea1n \u0111\u1ed3ng th\u1eddi \u00e1p d\u1ee5ng <strong><code>.flex-grow-0<\/code><\/strong> ho\u1eb7c<strong> <code>.flex-shrink-0<\/code><\/strong>, th\u00ec hai class n\u00e0y s\u1ebd m\u00e2u thu\u1eabn v\u00e0 khi\u1ebfn ph\u1ea7n t\u1eed kh\u00f4ng co gi\u00e3n \u0111\u00fang c\u00e1ch.<\/p>\n\n\n\n<p>=> C\u00e1ch kh\u1eafc ph\u1ee5c: Tr\u00e1nh s\u1eed d\u1ee5ng <code>.flex-fill<\/code> c\u00f9ng v\u1edbi <code>.flex-grow-0<\/code> ho\u1eb7c <code>.flex-shrink-0<\/code>. H\u00e3y d\u00f9ng m\u1ed9t trong c\u00e1c class m\u1edf r\u1ed9ng ho\u1eb7c thu h\u1eb9p, nh\u01b0ng kh\u00f4ng k\u1ebft h\u1ee3p ch\u00fang n\u1ebfu kh\u00f4ng th\u1ef1c s\u1ef1 hi\u1ec3u r\u00f5 t\u00e1c \u0111\u1ed9ng.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-luy\u1ec7n-t\u1eadp-s\u1eed-d\u1ee5ng-flexbox-bootstrap\"><span class=\"ez-toc-section\" id=\"Bai_tap_luyen_tap_su_dung_Flexbox_Bootstrap\"><\/span><strong>B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Flexbox Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-1-m\u1ee9c-d\u1ed9-d\u1ec5\"><strong>B\u00e0i t\u1eadp 1 (m\u1ee9c \u0111\u1ed9 d\u1ec5)<\/strong><\/h3>\n\n\n\n<p>H\u00e3y t\u1ea1o m\u1ed9t kh\u1ed1i div c\u00f3 chi\u1ec1u cao l\u00e0 200px, b\u00ean trong c\u00f3 m\u1ed9t n\u00fat, v\u00e0 d\u00f9ng Flexbox c\u1ee7a Bootstrap \u0111\u1ec3 c\u0103n gi\u1eefa n\u00fat \u0111\u00f3 c\u1ea3 theo chi\u1ec1u ngang l\u1eabn chi\u1ec1u d\u1ecdc.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcsHb36SPMfhNg5i-kpqye2i2le5UwKMKn1yxGdRsRyETKF6HSVvvw1Ay_PV-j-B3SZFTUQ8C8GwSHLBfHT0earJjo5TFlmCttt0HEYYdCXOC5zzjOlK6bu3B0kjdFwIh-OwGZc?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 1<\/summary>\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"m-5 p-5\" style=\"width: 500px;\"&gt;\n       &lt;div class=\"d-flex justify-content-center align-items-center bg-light border\" style=\"height: 200px;\"&gt;\n           &lt;button class=\"btn btn-primary\"&gt;Click me&lt;\/button&gt;\n       &lt;\/div&gt;\n   &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng <strong><code>d-flex<\/code><\/strong> \u0111\u1ec3 k\u00edch ho\u1ea1t Flexbox<\/li>\n\n\n\n<li>D\u00f9ng <strong><code>justify-content-center<\/code><\/strong> \u0111\u1ec3 c\u0103n gi\u1eefa theo tr\u1ee5c ngang<\/li>\n\n\n\n<li>D\u00f9ng <strong><code>align-items-center<\/code><\/strong> \u0111\u1ec3 c\u0103n gi\u1eefa theo tr\u1ee5c d\u1ecdc<\/li>\n\n\n\n<li>D\u00f9ng <strong><code>style=\"height: 200px;\"<\/code><\/strong> \u0111\u1ec3 t\u1ea1o khung c\u00f3 chi\u1ec1u cao c\u1ed1 \u0111\u1ecbnh<\/li>\n<\/ul>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-2-m\u1ee9c-d\u1ed9-trung-binh\"><strong>B\u00e0i t\u1eadp 2 (m\u1ee9c \u0111\u1ed9 trung b\u00ecnh)<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o m\u1ed9t thanh menu ngang g\u1ed3m 4 m\u1ee5c: Trang ch\u1ee7, Gi\u1edbi thi\u1ec7u, D\u1ecbch v\u1ee5, Li\u00ean h\u1ec7. D\u00f9ng Flexbox \u0111\u1ec3 s\u1eafp x\u1ebfp \u0111\u1ec1u c\u00e1c m\u1ee5c n\u00e0y tr\u00ean 1 d\u00f2ng, sao cho:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi \u1edf m\u00e0n h\u00ecnh desktop: C\u00e1c m\u1ee5c d\u00e0n \u0111\u1ec1u theo h\u00e0ng ngang<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLmkOLyVH_CwAr7N4mVsKxlH1gSaoHX-SFeMfDSzBT5fgmY_Mwczbjn-c5rtCPzljElW1-_PSdhnKA25dIDqwZA4cIkV8hug8y5DTJcwhh8xHtd7mpVHJq4SMf_jOVTU244mUirw?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi \u1edf m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i: C\u00e1c m\u1ee5c c\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfxq-Eb3EhcQPoXDYfHdN59o72D4cnkeT9mlkb7DPrGAB61mRBpXA8dT9P04g8EiQ7GWgh-ZAKdskngdGg7OtyE0q5ljuTY0jvyEZmMELwd9t-Ki_4C7tIFx9fhCxNx3en0yMOZUA?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 2<\/summary>\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"d-flex flex-column flex-md-row justify-content-md-between align-items-center bg-light p-3\"&gt;\n           &lt;a href=\"#\" class=\"text-decoration-none mb-2 mb-md-0\"&gt;Home&lt;\/a&gt;\n           &lt;a href=\"#\" class=\"text-decoration-none mb-2 mb-md-0\"&gt;About&lt;\/a&gt;\n           &lt;a href=\"#\" class=\"text-decoration-none mb-2 mb-md-0\"&gt;Services&lt;\/a&gt;\n           &lt;a href=\"#\" class=\"text-decoration-none\"&gt;Contact&lt;\/a&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng <strong><code>d-flex flex-column flex-md-row<\/code><\/strong> \u0111\u1ec3 chuy\u1ec3n t\u1eeb d\u1ecdc \u2192 ngang theo breakpoint.<\/li>\n\n\n\n<li>D\u00f9ng <strong><code>align-items-center<\/code><\/strong> \u0111\u1ec3 c\u0103n gi\u1eefa theo chi\u1ec1u ngang khi \u1edf mobile.<\/li>\n\n\n\n<li>D\u00f9ng <strong><code>justify-content-md-between<\/code><\/strong> \u0111\u1ec3 d\u00e0n \u0111\u1ec1u \u1edf desktop.<\/li>\n<\/ul>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-3-m\u1ee9c-d\u1ed9-kho\"><strong>B\u00e0i t\u1eadp 3 (m\u1ee9c \u0111\u1ed9 kh\u00f3)<\/strong><\/h3>\n\n\n\n<p>T\u1ea1o m\u1ed9t kh\u1ed1i hi\u1ec3n th\u1ecb th\u00f4ng tin s\u1ea3n ph\u1ea9m v\u1edbi b\u1ed1 c\u1ee5c nh\u01b0 sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B\u00ean tr\u00e1i: \u1ea3nh s\u1ea3n ph\u1ea9m<\/li>\n\n\n\n<li>B\u00ean ph\u1ea3i: t\u00ean s\u1ea3n ph\u1ea9m, m\u00f4 t\u1ea3, gi\u00e1 v\u00e0 n\u00fat &#8220;Th\u00eam v\u00e0o gi\u1ecf&#8221;<\/li>\n<\/ul>\n\n\n\n<p>Responsive:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1ede desktop: \u1ea3nh v\u00e0 n\u1ed9i dung n\u1eb1m ngang (2 c\u1ed9t)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcwIpSMT_tDy3nbX1lI3cmCa0et54K3SucRRSq2vZNtP8dGWzoC1R8oBoIhF-cVjkbP4akheqoHuauJ6t31VUSH_tz_cPk-HI3TF2EeKwsmQ51E5sVOG09AZ88T1TxP45bNCWjC?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u1ede mobile: \u1ea3nh n\u1eb1m tr\u00ean, n\u1ed9i dung n\u1eb1m d\u01b0\u1edbi (d\u1ecdc)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfTViRhk8kN76Ipbzq2x8BiPoj5V7TF34a9rh5H0SM35cr16XYpotYKuwDMzkCrIdZjUVaIMuOlsC6413mS0fwK5IcP-YJxNS9_TxRW9L5oV_5GsQKejPuTxUW47JbY-UIBdmFB?key=xo5r2oXiHS5rvUConrEwLQ\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 3<\/summary>\n<pre class=\"wp-block-code\"><code>       &lt;div class=\"d-flex flex-column flex-md-row border p-3 gap-3 bg-light\"&gt;\n           &lt;!-- H\u00ecnh \u1ea3nh s\u1ea3n ph\u1ea9m --&gt;\n           &lt;img src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQKk8Nc-lBHyDwEMs0drgzArhbsx4Ihq-_DIA&amp;s\" alt=\"S\u1ea3n ph\u1ea9m\" class=\"img-fluid\" style=\"max-width: 150px;\"&gt;\n        \n           &lt;!-- N\u1ed9i dung m\u00f4 t\u1ea3 --&gt;\n           &lt;div class=\"flex-grow-1 text-center text-md-start\"&gt;\n             &lt;h5&gt;T\u00ean s\u1ea3n ph\u1ea9m&lt;\/h5&gt;\n             &lt;p&gt;M\u00f4 t\u1ea3 ng\u1eafn v\u1ec1 s\u1ea3n ph\u1ea9m n\u00e0y. \u0110\u00e2y l\u00e0 ph\u1ea7n m\u00f4 t\u1ea3 n\u1ed9i dung, th\u00f4ng tin chi ti\u1ebft.&lt;\/p&gt;\n             &lt;p class=\"fw-bold text-success\"&gt;Gi\u00e1: 250.000\u0111&lt;\/p&gt;\n             &lt;button class=\"btn btn-primary\"&gt;Th\u00eam v\u00e0o gi\u1ecf&lt;\/button&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng <strong><code>d-flex flex-column flex-md-row<\/code><\/strong> \u0111\u1ec3 chuy\u1ec3n t\u1eeb d\u1ecdc \u2192 ngang theo breakpoint (breakpoint <strong>md<\/strong> s\u1ebd k\u00edch ho\u1ea1t khi \u1edf m\u00e0n h\u00ecnh tablet tr\u1edf l\u00ean)<\/li>\n\n\n\n<li>D\u00f9ng <strong><code>gap-3<\/code><\/strong> \u0111\u1ec3 t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa \u1ea3nh v\u00e0 n\u1ed9i dung<\/li>\n\n\n\n<li><strong><code>flex-grow-1<\/code><\/strong> gi\u00fap n\u1ed9i dung m\u1edf r\u1ed9ng chi\u1ebfm \u0111\u1ec1u kh\u00f4ng gian c\u00f2n l\u1ea1i<\/li>\n\n\n\n<li>D\u00f9ng <strong><code>text-center text-md-start<\/code><\/strong> \u0111\u1ec3 canh ch\u1eef \u0111\u1eb9p theo t\u1eebng thi\u1ebft b\u1ecb<\/li>\n<\/ul>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-flexbox-bootstrap\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Flexbox_Bootstrap\"><\/span><strong>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Flexbox Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-d\u1ec3-can-gi\u1eefa-ph\u1ea7n-t\u1eed-theo-c\u1ea3-chi\u1ec1u-ngang-va-d\u1ecdc\"><strong>L\u00e0m sao \u0111\u1ec3 c\u0103n gi\u1eefa ph\u1ea7n t\u1eed theo c\u1ea3 chi\u1ec1u ngang v\u00e0 d\u1ecdc?<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 c\u0103n gi\u1eefa ph\u1ea7n t\u1eed theo c\u1ea3 chi\u1ec1u ngang v\u00e0 d\u1ecdc, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Flexbox trong Bootstrap b\u1eb1ng c\u00e1ch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bi\u1ebfn ph\u1ea7n t\u1eed cha th\u00e0nh Flex container v\u1edbi <strong><code>.d-flex<\/code><\/strong><\/li>\n\n\n\n<li>D\u00f9ng th\u00eam <strong><code>.justify-content-center<\/code><\/strong> (c\u0103n ngang) v\u00e0 <strong><code>.align-items-center<\/code><\/strong> (c\u0103n d\u1ecdc)<\/li>\n\n\n\n<li>\u0110\u1ea3m b\u1ea3o ph\u1ea7n t\u1eed cha c\u00f3 chi\u1ec1u cao c\u1ee5 th\u1ec3 \u0111\u1ec3 vi\u1ec7c c\u0103n d\u1ecdc ho\u1ea1t \u0111\u1ed9ng<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex justify-content-center align-items-center\" style=\"height: 200px;\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-primary\"&gt;ph\u1ea7n t\u1eed canh gi\u1eefa&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-vi-sao-justify-content-center-khong-ho\u1ea1t-d\u1ed9ng\"><strong>V\u00ec sao justify-content-center kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng?<\/strong><\/h3>\n\n\n\n<p>Nguy\u00ean nh\u00e2n ph\u1ed5 bi\u1ebfn l\u00e0 b\u1ea1n qu\u00ean th\u00eam <strong><code>.d-flex<\/code><\/strong> \u0111\u1ec3 k\u00edch ho\u1ea1t ch\u1ebf \u0111\u1ed9 Flex cho ph\u1ea7n t\u1eed ho\u1eb7c \u0111ang d\u00f9ng trong th\u00e0nh ph\u1ea7n kh\u00f4ng ph\u1ea3i Flex container (nh\u01b0 <code>.row<\/code>, <code>.container<\/code>). V\u00ed d\u1ee5 v\u1ec1 vi\u1ec7c s\u1eed d\u1ee5ng \u0111\u00fang <strong><code>justify-content-center<\/code>:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"d-flex justify-content-center\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;ph\u1ea7n t\u1eed c\u0103n gi\u1eefa&lt;\/span&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-toi-co-th\u1ec3-k\u1ebft-h\u1ee3p-flexbox-va-grid-trong-bootstrap-khong\"><strong>T\u00f4i c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p Flexbox v\u00e0 Grid trong Bootstrap kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p Flexbox v\u00e0 Grid trong Bootstrap. Grid d\u00f9ng \u0111\u1ec3 chia b\u1ed1 c\u1ee5c t\u1ed5ng th\u1ec3 b\u1eb1ng <code>.row<\/code> v\u00e0 <code>.col-*<\/code>, c\u00f2n Flexbox d\u00f9ng \u0111\u1ec3 c\u0103n ch\u1ec9nh chi ti\u1ebft b\u00ean trong t\u1eebng ph\u1ea7n t\u1eed nh\u01b0 <code>.col<\/code>. Tuy nhi\u00ean, l\u01b0u \u00fd kh\u00f4ng n\u00ean \u00e1p <code>.d-flex<\/code> v\u00e0o<code> .row<\/code>, v\u00ec <code>.row<\/code> \u0111\u00e3 l\u00e0 Flex container s\u1eb5n m\u00e0 h\u00e3y d\u00f9ng Flexbox b\u00ean trong .col \u0111\u1ec3 tr\u00e1nh xung \u0111\u1ed9t layout.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Flexbox trong Bootstrap l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 linh ho\u1ea1t gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean d\u1ec5 d\u00e0ng s\u1eafp x\u1ebfp, c\u0103n ch\u1ec9nh v\u00e0 qu\u1ea3n l\u00fd b\u1ed1 c\u1ee5c m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft nhi\u1ec1u CSS ph\u1ee9c t\u1ea1p. V\u1edbi h\u1ec7 th\u1ed1ng class ti\u1ec7n \u00edch m\u1ea1nh m\u1ebd, Flexbox ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi lo\u1ea1i d\u1ef1 \u00e1n \u2013 t\u1eeb giao di\u1ec7n \u0111\u01a1n gi\u1ea3n \u0111\u1ebfn layout ph\u1ee9c t\u1ea1p, responsive. Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hi v\u1ecdng b\u1ea1n \u0111\u00e3 hi\u1ec3u r\u00f5 c\u00e1ch s\u1eed d\u1ee5ng Flexbox trong Bootstrap \u0111\u1ec3 x\u00e2y d\u1ef1ng giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, g\u1ecdn g\u00e0ng v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khi x\u00e2y d\u1ef1ng giao di\u1ec7n web, vi\u1ec7c c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c, ph\u00e2n ph\u1ed1i kho\u1ea3ng c\u00e1ch v\u00e0 s\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed sao cho h\u1ee3p l\u00fd l\u00e0 m\u1ed9t th\u1eed th\u00e1ch m\u00e0 front-end developer th\u01b0\u1eddng xuy\u00ean g\u1eb7p ph\u1ea3i. Bootstrap \u0111\u00e3 \u0111\u01a1n gi\u1ea3n h\u00f3a to\u00e0n b\u1ed9 qu\u00e1 tr\u00ecnh n\u00e0y v\u1edbi h\u1ec7 th\u1ed1ng Flexbox ti\u1ec7n \u00edch t\u00edch h\u1ee3p s\u1eb5n. [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":88670,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-88595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch d\u00f9ng Flexbox trong Bootstrap chi ti\u1ebft t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, k\u1ef9 thu\u1eadt responsive v\u00e0 x\u1eed l\u00fd l\u1ed7i th\u01b0\u1eddng g\u1eb7p k\u00e8m v\u00ed d\u1ee5.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z\" \/>\n<meta property=\"og:description\" content=\"Khi x\u00e2y d\u1ef1ng giao di\u1ec7n web, vi\u1ec7c c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c, ph\u00e2n ph\u1ed1i kho\u1ea3ng c\u00e1ch v\u00e0 s\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed sao cho h\u1ee3p l\u00fd l\u00e0 m\u1ed9t th\u1eed th\u00e1ch m\u00e0 front-end developer\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-29T10:44:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T04:25:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/flexbox-bootstrap-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"30 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z - ITviec Blog","description":"T\u00ecm hi\u1ec3u c\u00e1ch d\u00f9ng Flexbox trong Bootstrap chi ti\u1ebft t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, k\u1ef9 thu\u1eadt responsive v\u00e0 x\u1eed l\u00fd l\u1ed7i th\u01b0\u1eddng g\u1eb7p k\u00e8m v\u00ed d\u1ee5.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/","og_locale":"vi_VN","og_type":"article","og_title":"Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z","og_description":"Khi x\u00e2y d\u1ef1ng giao di\u1ec7n web, vi\u1ec7c c\u0103n ch\u1ec9nh b\u1ed1 c\u1ee5c, ph\u00e2n ph\u1ed1i kho\u1ea3ng c\u00e1ch v\u00e0 s\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed sao cho h\u1ee3p l\u00fd l\u00e0 m\u1ed9t th\u1eed th\u00e1ch m\u00e0 front-end developer","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-06-29T10:44:08+00:00","article_modified_time":"2025-07-10T04:25:11+00:00","og_image":[{"width":2560,"height":1347,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/flexbox-bootstrap-vippro-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"30 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z","datePublished":"2025-06-29T10:44:08+00:00","dateModified":"2025-07-10T04:25:11+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/"},"wordCount":5779,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/flexbox-bootstrap-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/","name":"Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/flexbox-bootstrap-vippro-scaled.png","datePublished":"2025-06-29T10:44:08+00:00","dateModified":"2025-07-10T04:25:11+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1ch d\u00f9ng Flexbox trong Bootstrap chi ti\u1ebft t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, k\u1ef9 thu\u1eadt responsive v\u00e0 x\u1eed l\u00fd l\u1ed7i th\u01b0\u1eddng g\u1eb7p k\u00e8m v\u00ed d\u1ee5.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/flexbox-bootstrap-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/06\/flexbox-bootstrap-vippro-scaled.png","width":2560,"height":1347,"caption":"flexbox trong bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-flexbox-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Flexbox Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng chi ti\u1ebft t\u1eeb A-Z"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=88595"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88595\/revisions"}],"predecessor-version":[{"id":89254,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88595\/revisions\/89254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/88670"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=88595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=88595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=88595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}