{"id":68563,"date":"2024-05-15T08:52:03","date_gmt":"2024-05-15T01:52:03","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=68563"},"modified":"2025-07-20T00:54:32","modified_gmt":"2025-07-19T17:54:32","slug":"flex-css","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/flex-css\/","title":{"rendered":"Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS"},"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\/flex-css\/#Flex_CSS_la_gi\" >Flex CSS 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\/flex-css\/#Flexbox_la_gi\" >Flexbox 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-3\" href=\"https:\/\/itviec.com\/blog\/flex-css\/#Cac_thuat_ngu_can_biet_ve_Flexbox_CSS\" >C\u00e1c thu\u1eadt ng\u1eef c\u1ea7n bi\u1ebft v\u1ec1 Flexbox CSS<\/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\/flex-css\/#Thuoc_tinh_Flex_CSS\" >Thu\u1ed9c t\u00ednh Flex CSS<\/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\/flex-css\/#Cac_gia_tri_cua_thuoc_tinh_flex_CSS\" >C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh flex CSS&nbsp;<\/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\/flex-css\/#7_thuoc_tinh_cua_Flex_Container\" >7 thu\u1ed9c t\u00ednh c\u1ee7a Flex Container<\/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\/flex-css\/#6_thuoc_tinh_cua_Flex_Item\" >6 thu\u1ed9c t\u00ednh c\u1ee7a Flex Item<\/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\/flex-css\/#Cac_cau_hoi_thuong_gap_ve_Flex_CSS_va_Flexbox_CSS\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Flex CSS v\u00e0 Flexbox CSS<\/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\/flex-css\/#Tong_ket_Flex_CSS_va_Flexbox_CSS\" >T\u1ed5ng k\u1ebft Flex CSS v\u00e0 Flexbox CSS<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><em><strong>Flex CSS l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m quan tr\u1ecdng li\u00ean quan \u0111\u1ebfn vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web. V\u1eady ch\u00ednh x\u00e1c th\u00ec Flex, hay Flexbox trong CSS l\u00e0 g\u00ec? L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 \u1ee9ng d\u1ee5ng Flexbox CSS \u0111\u1ec3 x\u00e2y d\u1ef1ng website hi\u1ec7u qu\u1ea3? ITviec s\u1ebd h\u01b0\u1edbng d\u1eabn chi ti\u1ebft cho b\u1ea1n trong b\u00e0i vi\u1ebft n\u00e0y.<\/strong><\/em><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u r\u00f5:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flex CSS l\u00e0 g\u00ec?<\/li>\n\n\n\n<li>Flexbox CSS l\u00e0 g\u00ec?<\/li>\n\n\n\n<li>C\u00e1c thu\u1ed9c t\u00ednh Flex c\u1ea7n bi\u1ebft v\u00e0 c\u00e1c v\u00ed d\u1ee5 \u00e1p d\u1ee5ng<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/viec-lam-it\/css?utm_medium=anchor_text_high&amp;utm_source=blog&amp;utm_campaign=viec_lam_css&amp;utm_content=flex_css\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m CSS<\/a> to\u00e0n qu\u1ed1c<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-flex-css-la-gi\"><span class=\"ez-toc-section\" id=\"Flex_CSS_la_gi\"><\/span><b>Flex CSS l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh flex CSS l\u00e0 m\u1ed9t l\u1ec7nh \u0111a n\u0103ng cho ph\u00e9p c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n t\u1ea1o ra c\u00e1c b\u1ed1 c\u1ee5c linh ho\u1ea1t v\u00e0 th\u00edch \u1ee9ng cho c\u00e1c trang web. Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a trang web \u0111\u01b0\u1ee3c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc v\u00e0 s\u1eafp x\u1ebfp t\u01b0\u01a1ng \u0111\u1ed1i v\u1edbi nhau, thay v\u00ec ph\u1ea3i ch\u1ec9 \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc ch\u00ednh x\u00e1c.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh flex CSS \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch cho thi\u1ebft k\u1ebf responsive, v\u00ec n\u00f3 cho ph\u00e9p c\u00e1c th\u00e0nh ph\u1ea7n c\u00f3 th\u1ec3 co gi\u00e3n (t\u0103ng ho\u1eb7c gi\u1ea3m k\u00edch th\u01b0\u1edbc) \u0111\u1ec3 v\u1eeba v\u1edbi v\u00f9ng ch\u1ee9a c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u00f3.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: Thanh menu \u1edf 1 trang web c\u00f3 5 n\u00fat s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh flex \u0111\u1ec3 d\u00e0n tr\u1ea3i t\u1eeb tr\u00e1i sang ph\u1ea3i, d\u00f9 cho hi\u1ec3n th\u1ecb \u1edf thi\u1ebft b\u1ecb n\u00e0o (m\u00e1y t\u00ednh, \u0111i\u1ec7n tho\u1ea1i) th\u00ec t\u1ea5t c\u1ea3 c\u00e1c n\u00fat \u0111\u1ec1u t\u1ef1 \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc \u0111\u1ec3 v\u1eeba \u0111\u1ee7 v\u1edbi v\u00f9ng ch\u1ee9a c\u1ee7a thanh menu.<\/span><\/p>\n<\/blockquote>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c t\u00ecm hi\u1ec3u chi ti\u1ebft h\u01a1n v\u1ec1 thu\u1ed9c t\u00ednh Flex CSS \u1edf ph\u1ea7n d\u01b0\u1edbi c\u1ee7a b\u00e0i vi\u1ebft n\u00e0y.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Tham kh\u1ea3o th\u00eam c\u00e1c b\u00e0i vi\u1ebft kh\u00e1c thu\u1ed9c ch\u1ee7 \u0111\u1ec1 CSS:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/\" target=\"_blank\" rel=\"noopener\"><strong>H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/css-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>CSS l\u00e0 g\u00ec? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 CSS \u0111\u1ec3 thi\u1ebft k\u1ebf web<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/lo-trinh-hoc-html-css-cho-nguoi-moi-bat-dau\/\" target=\"_blank\" rel=\"noopener\"><strong>H\u1ecdc HTML v\u00e0 CSS: L\u1ed9 tr\u00ecnh 18 b\u01b0\u1edbc chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u<\/strong><\/a><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap CSS l\u00e0 g\u00ec: C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap<\/a><\/strong><\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-flexbox-la-gi\"><span class=\"ez-toc-section\" id=\"Flexbox_la_gi\"><\/span><b>Flexbox l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Kh\u00e1i ni\u1ec7m Flex CSS c\u0169ng c\u00f3 th\u1ec3 hi\u1ec3u l\u00e0 \u0111ang n\u00f3i \u0111\u1ebfn Flexbox &#8211; 1 module t\u1eadp h\u1ee3p nhi\u1ec1u thu\u1ed9c t\u00ednh li\u00ean quan \u0111\u1ebfn co d\u00e3n, s\u1eafp x\u1ebfp linh ho\u1ea1t c\u1ee7a ph\u1ea7n t\u1eed (hay ph\u01b0\u01a1ng ph\u00e1p \u0111\u1ec3 Flex CSS). Kh\u00f4ng gi\u1ed1ng nh\u01b0 Grid Layout CSS l\u00e0 h\u1ec7 th\u1ed1ng b\u1ed1 c\u1ee5c hai chi\u1ec1u, Flexbox l\u00e0 m\u1ed9t chi\u1ec1u, t\u1eadp trung v\u00e0o vi\u1ec7c s\u1eafp x\u1ebfp c\u00e1c th\u00e0nh ph\u1ea7n d\u1ecdc theo m\u1ed9t tr\u1ee5c duy nh\u1ea5t (theo chi\u1ec1u ngang ho\u1eb7c chi\u1ec1u d\u1ecdc).<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u1ed9t trong nh\u1eefng l\u1ee3i \u00edch ch\u00ednh c\u1ee7a Flexbox l\u00e0 n\u00f3 c\u00f3 th\u1ec3 \u0111\u01a1n gi\u1ea3n h\u00f3a code c\u1ee7a b\u1ea1n v\u00e0 l\u00e0m cho b\u1ed1 c\u1ee5c website linh ho\u1ea1t h\u01a1n. B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o c\u00e1c b\u1ed1 c\u1ee5c th\u00edch \u1ee9ng v\u1edbi c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh v\u00e0 thi\u1ebft b\u1ecb kh\u00e1c nhau, \u0111\u1ea3m b\u1ea3o trang web c\u1ee7a b\u1ea1n tr\u00f4ng tuy\u1ec7t v\u1eddi b\u1ea5t k\u1ec3 ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp n\u00f3 nh\u01b0 th\u1ebf n\u00e0o. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t quan tr\u1ecdng \u0111\u1ed1i v\u1edbi ng\u01b0\u1eddi d\u00f9ng thi\u1ebft b\u1ecb di \u0111\u1ed9ng, nh\u1eefng ng\u01b0\u1eddi c\u00f3 th\u1ec3 truy c\u1eadp trang web c\u1ee7a b\u1ea1n tr\u00ean nhi\u1ec1u thi\u1ebft b\u1ecb v\u00e0 m\u00e0n h\u00ecnh kh\u00e1c nhau.<\/span><\/p>\n\n\n\n<p>H\u00ecnh minh h\u1ecda t\u1ed5ng quan v\u1ec1 c\u1ea5u tr\u00fac c\u1ee7a Flexbox:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2200\" height=\"1173\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-css-vippro.png\" alt=\"\" class=\"wp-image-68665\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-css-vippro.png 2200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-css-vippro-300x160.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-css-vippro-1600x853.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-css-vippro-200x107.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-css-vippro-100x53.png 100w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>C\u00f9ng t\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 c\u00e1c th\u00e0nh ph\u1ea7n trong h\u00ecnh n\u00e0y qua n\u1ed9i dung d\u01b0\u1edbi \u0111\u00e2y.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thu\u1eadt-ng\u1eef-c\u1ea7n-bi\u1ebft-v\u1ec1-flexbox-css\"><span class=\"ez-toc-section\" id=\"Cac_thuat_ngu_can_biet_ve_Flexbox_CSS\"><\/span><b>C\u00e1c thu\u1eadt ng\u1eef c\u1ea7n bi\u1ebft v\u1ec1 Flexbox CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-container-and-flex-item\"><b>Flex Container and Flex Item<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 s\u1eed d\u1ee5ng t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a Flexbox, b\u1ea1n c\u1ea7n \u0111\u1eb7t thu\u1ed9c t\u00ednh display c\u1ee7a m\u1ed9t th\u00e0nh ph\u1ea7n l\u00e0 flex ho\u1eb7c inline-flex. Khi n\u00e0y, th\u00e0nh ph\u1ea7n \u0111\u00f3 ch\u00ednh l\u00e0 m\u1ed9t flex container v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n con (children) c\u1ee7a th\u00e0nh ph\u1ea7n \u0111\u00f3 tr\u1edf th\u00e0nh c\u00e1c flex item.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;section class=\"container\"&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&lt;div&gt;Flex Item 1&lt;\/div&gt;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&lt;div&gt;Flex Item 2&lt;\/div&gt;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&lt;div&gt;&nbsp;&nbsp;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;<\/span> <span style=\"font-weight: 400;\">&lt;p&gt;\u0110o\u1ea1n paragraph n\u00e0y kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t flex item&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/section&gt;<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.container {&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;display: flex;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, th\u00e0nh ph\u1ea7n .container b\u00e2y gi\u1edd l\u00e0 m\u1ed9t flex container. Ba th\u00e0nh ph\u1ea7n div l\u00e0 c\u00e1c con tr\u1ef1c ti\u1ebfp c\u1ee7a .container, do \u0111\u00f3 ch\u00fang tr\u1edf th\u00e0nh c\u00e1c flex item.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-display-flex-va-inline-flex\"><b>display: flex v\u00e0 inline-flex<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Nh\u01b0 \u0111\u00e3 vi\u1ebft \u1edf tr\u00ean, c\u1ea3 display: flex v\u00e0 display: inline-flex \u0111\u1ec1u c\u00f3 th\u1ec3 bi\u1ebfn m\u1ed9t th\u00e0nh ph\u1ea7n th\u00e0nh flex container, nh\u01b0ng \u0111i\u1ec3m kh\u00e1c bi\u1ec7t n\u1eb1m \u1edf c\u00e1ch ch\u00fang t\u01b0\u01a1ng t\u00e1c v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n xung quanh.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>display: flex<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi s\u1eed d\u1ee5ng display: flex, flex container s\u1ebd ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nh\u01b0 m\u1ed9t kh\u1ed1i (block-level element). N\u00f3 s\u1ebd chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a th\u00e0nh ph\u1ea7n cha. B\u1eaft \u0111\u1ea7u tr\u00ean m\u1ed9t d\u00f2ng m\u1edbi v\u00e0 th\u00e0nh ph\u1ea7n ti\u1ebfp theo n\u00f3 c\u0169ng s\u1ebd b\u1eaft \u0111\u1ea7u tr\u00ean m\u1ed9t d\u00f2ng m\u1edbi.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;button&gt;Button One&lt;\/button&gt;<\/span>\n\n<span style=\"font-weight: 400;\">\/* Flex Container *\/<\/span>\n<span style=\"font-weight: 400;\">&lt;section class=\"container\"&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;div id=\"red\"&gt;&lt;\/div&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;div id=\"gold\"&gt;&lt;\/div&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;div id=\"green\"&gt;&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/section&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;button&gt;Button Two&lt;\/button&gt;<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.container {<\/span>\n<span style=\"font-weight: 400;\">display: flex;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, th\u00e0nh ph\u1ea7n .container s\u1ebd chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng kh\u1ea3 d\u1ee5ng c\u1ee7a body (th\u00e0nh ph\u1ea7n cha c\u1ee7a n\u00f3).<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"908\" height=\"458\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-flex-css-vippro.png\" alt=\"\" class=\"wp-image-68570\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-flex-css-vippro.png 908w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-flex-css-vippro-300x151.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-flex-css-vippro-700x353.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-flex-css-vippro-200x101.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-flex-css-vippro-100x50.png 100w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>display: inline-flex<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi s\u1eed d\u1ee5ng display: inline-flex, flex container s\u1ebd ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nh\u01b0 m\u1ed9t ph\u1ea7n t\u1eed n\u1ed9i d\u00f2ng (inline-level element). \u0110i\u1ec1u n\u00e0y cho ph\u00e9p c\u00e1c ph\u1ea7n t\u1eed n\u1ed9i d\u00f2ng kh\u00e1c (nh\u01b0 n\u00fat b\u1ea5m) x\u1ebfp c\u1ea1nh n\u00f3. Gi\u1eef nguy\u00ean v\u00ed d\u1ee5 tr\u01b0\u1edbc, \u0111\u00e2y l\u00e0 c\u00e1ch c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp khi b\u1ea1n \u0111\u1ed5i display t\u1eeb flex th\u00e0nh inline-flex.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"362\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-inline-flex-css-vippro.png\" alt=\"\" class=\"wp-image-68571\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-inline-flex-css-vippro.png 778w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-inline-flex-css-vippro-300x140.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-inline-flex-css-vippro-700x326.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-inline-flex-css-vippro-200x93.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/display-inline-flex-css-vippro-100x47.png 100w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Nh\u01b0 b\u1ea1n th\u1ea5y, flex container s\u1ebd kh\u00f4ng chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a th\u00e0nh ph\u1ea7n cha. N\u00f3 ch\u1ec9 s\u1eed d\u1ee5ng chi\u1ec1u ngang c\u1ea7n thi\u1ebft cho n\u1ed9i dung c\u1ee7a n\u00f3.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-main-axis-va-cross-axis\"><b>Main axis v\u00e0 Cross axis<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u1ed7i flex container s\u1ebd c\u00f3 m\u1ed9t tr\u1ee5c ch\u00ednh (main axis) v\u00e0 m\u1ed9t tr\u1ee5c ph\u1ee5 (cross axis). Tr\u1ee5c ch\u00ednh c\u00f3 th\u1ec3 l\u00e0 <\/span><span style=\"font-weight: 400;\">ngang ho\u1eb7c d\u1ecdc t\u00f9y thu\u1ed9c v\u00e0o gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh flex-direction.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh t<\/span><span style=\"font-weight: 400;\">r\u1ee5c ch\u00ednh v\u00e0 tr\u1ee5c ph\u1ee5 khi <\/span><span style=\"font-weight: 400;\">flex-direction<\/span><span style=\"font-weight: 400;\"> l\u00e0 <\/span><span style=\"font-weight: 400;\">row<\/span><span style=\"font-weight: 400;\"> (d\u00f2ng).<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1344\" height=\"612\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-1-vippro.png\" alt=\"\" class=\"wp-image-68572\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-1-vippro.png 1344w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-1-vippro-300x137.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-1-vippro-700x319.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-1-vippro-200x91.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-1-vippro-100x46.png 100w\" sizes=\"auto, (max-width: 1344px) 100vw, 1344px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">H<\/span><span style=\"font-weight: 400;\">\u00ecnh \u1ea3nh t<\/span><span style=\"font-weight: 400;\">r\u1ee5c ch\u00ednh v\u00e0 tr\u1ee5c ph\u1ee5 khi <\/span><span style=\"font-weight: 400;\">flex-direction<\/span><span style=\"font-weight: 400;\"> l\u00e0 <\/span><span style=\"font-weight: 400;\">column<\/span><span style=\"font-weight: 400;\"> (c\u1ed9t).<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1114\" height=\"590\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-2-vippro.png\" alt=\"\" class=\"wp-image-68573\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-2-vippro.png 1114w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-2-vippro-300x159.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-2-vippro-700x371.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-2-vippro-200x106.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/axis-css-2-vippro-100x53.png 100w\" sizes=\"auto, (max-width: 1114px) 100vw, 1114px\" \/><\/figure>\n\n\n\n<p><em>Ti\u1ebfp theo, c\u00f9ng t\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 13 thu\u1ed9c t\u00ednh trong Flexbox CSS.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-thu\u1ed9c-tinh-flex-css\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_Flex_CSS\"><\/span><b>Thu\u1ed9c t\u00ednh Flex CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi m\u1ed9t container \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh display: flex ho\u1eb7c display: inline-flex, b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng thu\u1ed9c t\u00ednh flex CSS cho b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed con n\u00e0o b\u00ean trong n\u00f3 \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh s\u1ef1 linh ho\u1ea1t c\u1ee7a ch\u00fang trong ph\u1ea1m vi b\u1ed1 c\u1ee5c.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh Flex CSS l\u00e0 1 thu\u1ed9c t\u00ednh r\u00fat g\u1ecdn, n\u00f3 l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a vi\u1ec7c thi\u1ebft l\u1eadp 3 thu\u1ed9c t\u00ednh: flex-grow, flex-shrink v\u00e0 flex-basis.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flex: none; | &#91; &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt; | &lt;'flex-basis'&gt; ]<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, c\u00e1c thu\u1ed9c t\u00ednh c\u00f3 \u00fd ngh\u0129a nh\u01b0 sau:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Flex grow<\/b><span style=\"font-weight: 400;\">: Thu\u1ed9c t\u00ednh flex-grow trong CSS thi\u1ebft l\u1eadp h\u1ec7 s\u1ed1 co gi\u00e3n c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed flex. N\u00f3 quy \u0111\u1ecbnh xem ph\u1ea7n t\u1eed \u0111\u00f3 s\u1ebd chi\u1ebfm bao nhi\u00eau ph\u1ea7n kh\u00f4ng gian c\u00f2n tr\u1ed1ng b\u00ean trong v\u00f9ng ch\u1ee9a flex theo k\u00edch th\u01b0\u1edbc ch\u00ednh c\u1ee7a ph\u1ea7n t\u1eed \u0111\u00f3.<\/span><\/li>\n\n\n\n<li><b>Flex shrink<\/b><span style=\"font-weight: 400;\">: Thu\u1ed9c t\u00ednh flex-shrink trong CSS thi\u1ebft l\u1eadp m\u1ee9c \u0111\u1ed9 co l\u1ea1i c\u1ee7a m\u1ed9t flex item. N\u1ebfu t\u1ed5ng k\u00edch th\u01b0\u1edbc c\u1ee7a t\u1ea5t c\u1ea3 flex item l\u1edbn h\u01a1n flex container, c\u00e1c item s\u1ebd co l\u1ea1i \u0111\u1ec3 v\u1eeba v\u1edbi v\u00f9ng ch\u1ee9a theo t\u1ec9 l\u1ec7 c\u1ee7a flex-shrink.<\/span><\/li>\n\n\n\n<li><b>Flex basic<\/b><span style=\"font-weight: 400;\">: Thu\u1ed9c t\u00ednh flex-basis trong CSS thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc ch\u00ednh ban \u0111\u1ea7u c\u1ee7a m\u1ed9t item flex. N\u00f3 thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc c\u1ee7a h\u1ed9p n\u1ed9i dung (content box) tr\u1eeb khi \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp kh\u00e1c b\u1eb1ng thu\u1ed9c t\u00ednh box-sizing.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc v\u00e0 t\u1ef7 l\u1ec7 c\u1ee7a m\u1ed7i m\u1ee5c con trong flex container b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh flex v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m, \u0111\u01a1n v\u1ecb ems, ho\u1eb7c pixel.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh flex c\u00f3 th\u1ec3 ch\u1ee9a t\u1ed1i \u0111a ba gi\u00e1 tr\u1ecb v\u00e0 th\u1ee9 t\u1ef1 c\u1ee7a c\u00e1c gi\u00e1 tr\u1ecb n\u00e0y r\u1ea5t quan tr\u1ecdng. Tr\u00ecnh duy\u1ec7t s\u1ebd g\u00e1n gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean cho flex-grow, gi\u00e1 tr\u1ecb th\u1ee9 hai cho flex-shrink v\u00e0 gi\u00e1 tr\u1ecb th\u1ee9 ba cho flex-basis.&nbsp;<\/span><\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh flex CSS:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">\/* Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh *\/&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: auto; flex: initial; flex: none;<\/span>\n\n<span style=\"font-weight: 400;\">\/* M\u1ed9t gi\u00e1 tr\u1ecb, kh\u00f4ng c\u00f3 \u0111\u01a1n v\u1ecb: flex-grow flex-basis sau \u0111\u00f3 b\u1eb1ng 0. *\/&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: 2;<\/span>\n\n<span style=\"font-weight: 400;\">\/* M\u1ed9t gi\u00e1 tr\u1ecb, \u0111\u01a1n v\u1ecb width\/height: flex-basis *\/&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: 10em;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: 30%;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: min-content;<\/span>\n\n<span style=\"font-weight: 400;\">\/* Hai gi\u00e1 tr\u1ecb: flex-grow | flex-basis *\/&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: 1 30px;<\/span>\n\n<span style=\"font-weight: 400;\">\/* Hai gi\u00e1 tr\u1ecb: flex-grow | flex-shrink *\/&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: 2 2;<\/span>\n\n<span style=\"font-weight: 400;\">\/* Ba gi\u00e1 tr\u1ecb: flex-grow | flex-shrink | flex-basis *\/&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: 2 2 10%;<\/span>\n\n<span style=\"font-weight: 400;\">\/* Gi\u00e1 tr\u1ecb to\u00e0n c\u1ee5c *\/&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: inherit;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: initial;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: revert;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: revert-layer;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">flex: unset;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh flex c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh b\u1eb1ng m\u1ed9t, hai ho\u1eb7c ba gi\u00e1 tr\u1ecb.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>C\u00fa ph\u00e1p m\u1ed9t gi\u00e1 tr\u1ecb:<\/b><span style=\"font-weight: 400;\"> Gi\u00e1 tr\u1ecb ph\u1ea3i l\u00e0 m\u1ed9t trong:<\/span>\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">M\u1ed9t gi\u00e1 tr\u1ecb h\u1ee3p l\u1ec7 cho &lt;flex-grow&gt;. Khi \u0111\u00f3 t\u1ed1c k\u00fd s\u1ebd m\u1edf r\u1ed9ng th\u00e0nh flex: &lt;flex-grow&gt; 1 0.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">M\u1ed9t gi\u00e1 tr\u1ecb h\u1ee3p l\u1ec7 cho &lt;flex-basis&gt;. Khi \u0111\u00f3 t\u1ed1c k\u00fd s\u1ebd m\u1edf r\u1ed9ng th\u00e0nh flex: 1 1 &lt;flex-basis&gt;.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">T\u1eeb kh\u00f3a none ho\u1eb7c m\u1ed9t trong nh\u1eefng t\u1eeb kh\u00f3a chung.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>C\u00fa ph\u00e1p hai gi\u00e1 tr\u1ecb:<\/b>\n<ul class=\"wp-block-list\">\n<li>Gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean ph\u1ea3i l\u00e0 gi\u00e1 tr\u1ecb h\u1ee3p l\u1ec7 cho flex-grow.<\/li>\n\n\n\n<li>Gi\u00e1 tr\u1ecb th\u1ee9 hai ph\u1ea3i l\u00e0 m\u1ed9t trong:\n<ul class=\"wp-block-list\">\n<li>M\u1ed9t gi\u00e1 tr\u1ecb h\u1ee3p l\u1ec7 cho flex-shrink. Khi \u0111\u00f3 t\u1ed1c k\u00fd s\u1ebd m\u1edf r\u1ed9ng th\u00e0nh flex: 0.<\/li>\n\n\n\n<li>M\u1ed9t gi\u00e1 tr\u1ecb h\u1ee3p l\u1ec7 cho flex-basis. Khi \u0111\u00f3 t\u1ed1c k\u00fd s\u1ebd m\u1edf r\u1ed9ng th\u00e0nh flex: 1 .<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>C\u00fa ph\u00e1p ba gi\u00e1 tr\u1ecb:<\/b><span style=\"font-weight: 400;\"> C\u00e1c gi\u00e1 tr\u1ecb ph\u1ea3i theo th\u1ee9 t\u1ef1 sau:<\/span>\n<ul class=\"wp-block-list\">\n<li>M\u1ed9t gi\u00e1 tr\u1ecb h\u1ee3p l\u1ec7 cho flex-grow.<\/li>\n\n\n\n<li>M\u1ed9t gi\u00e1 tr\u1ecb h\u1ee3p l\u1ec7 cho flex-shrink.<\/li>\n\n\n\n<li>M\u1ed9t gi\u00e1 tr\u1ecb h\u1ee3p l\u1ec7 cho flex-basis.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.flex-item {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   flex-grow: 2;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   flex-shrink: 0;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   flex-basis: 50px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.flex-item {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   flex: 2 0 50px;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-gia-tr\u1ecb-c\u1ee7a-thu\u1ed9c-tinh-flex-css-nbsp\"><span class=\"ez-toc-section\" id=\"Cac_gia_tri_cua_thuoc_tinh_flex_CSS\"><\/span><b>C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh flex CSS&nbsp;<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-initial\"><b>Initial<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c c\u0103n ch\u1ec9nh k\u00edch th\u01b0\u1edbc d\u1ef1a tr\u00ean c\u00e1c thu\u1ed9c t\u00ednh width (chi\u1ec1u r\u1ed9ng) v\u00e0 height (chi\u1ec1u cao) c\u1ee7a n\u00f3. N\u00f3 s\u1ebd co l\u1ea1i \u0111\u1ebfn k\u00edch th\u01b0\u1edbc t\u1ed1i thi\u1ec3u \u0111\u1ec3 v\u1eeba v\u1edbi v\u00f9ng ch\u1ee9a (flex container), nh\u01b0ng kh\u00f4ng gi\u00e3n ra \u0111\u1ec3 chi\u1ebfm b\u1ea5t k\u1ef3 kho\u1ea3ng tr\u1ed1ng th\u1eeba n\u00e0o trong v\u00f9ng ch\u1ee9a. \u0110i\u1ec1u n\u00e0y t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi vi\u1ec7c \u0111\u1eb7t &#8220;flex: 0 1 auto&#8221;.<\/span><\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;flex: initial;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-auto\"><b>Auto<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong flexbox, auto quy \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc c\u1ee7a item theo thu\u1ed9c t\u00ednh width v\u00e0 height c\u1ee7a n\u00f3.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Tuy nhi\u00ean, item c\u0169ng c\u00f3 th\u1ec3 co gi\u00e3n \u0111\u1ec3 chi\u1ebfm kho\u1ea3ng tr\u1ed1ng th\u1eeba trong flex container, \u0111\u1ed3ng th\u1eddi co l\u1ea1i \u0111\u1ebfn k\u00edch th\u01b0\u1edbc t\u1ed1i thi\u1ec3u \u0111\u1ec3 v\u1eeba v\u1edbi container. <\/span><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp auto t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi vi\u1ec7c \u0111\u1eb7t \u201cflex: 1 1 auto\u201d.<\/span><\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;flex: 1 1 auto;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-none\"><b>None<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c c\u0103n ch\u1ec9nh k\u00edch th\u01b0\u1edbc d\u1ef1a theo c\u00e1c thu\u1ed9c t\u00ednh width (chi\u1ec1u r\u1ed9ng) v\u00e0 height (chi\u1ec1u cao) c\u1ee7a n\u00f3. N\u00f3 ho\u00e0n to\u00e0n kh\u00f4ng linh ho\u1ea1t: n\u00f3 kh\u00f4ng co nh\u1ecf ho\u1eb7c gi\u00e3n ra \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi container flex. \u0110i\u1ec1u n\u00e0y t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi vi\u1ec7c \u0111\u1eb7t &#8220;flex: 0 0 auto&#8221;.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;flex: none;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-inherit-th\u1eeba-k\u1ebf\"><b>Inherit (Th\u1eeba k\u1ebf)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb n\u00e0y \u0111\u1eb7t c\u00e1c thu\u1ed9c t\u00ednh flex c\u1ee7a item \u0111\u01b0\u1ee3c th\u1eeba h\u01b0\u1edfng t\u1eeb thu\u1ed9c t\u00ednh c\u1ee7a th\u00e0nh ph\u1ea7n cha.<\/span><\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;flex: inherit;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-unset-b\u1ecf-thi\u1ebft-l\u1eadp\"><b>Unset (B\u1ecf thi\u1ebft l\u1eadp)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb n\u00e0y \u0111\u1eb7t c\u00e1c thu\u1ed9c t\u00ednh flex c\u1ee7a item v\u1ec1 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh n\u1ebfu tr\u01b0\u1edbc \u0111\u00f3 ch\u01b0a \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp; n\u1ebfu kh\u00f4ng, n\u00f3 s\u1ebd \u0111\u1eb7t v\u1ec1 gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c th\u1eeba h\u01b0\u1edfng.<\/span><\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;flex: unset;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-revert-tr\u1ea3-v\u1ec1-m\u1eb7c-d\u1ecbnh\"><b>Revert (Tr\u1ea3 v\u1ec1 m\u1eb7c \u0111\u1ecbnh)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb n\u00e0y \u0111\u1eb7t c\u00e1c thu\u1ed9c t\u00ednh flex c\u1ee7a item v\u1ec1 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh nh\u01b0 th\u1ec3 ch\u01b0a t\u1eebng \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp gi\u00e1 tr\u1ecb n\u00e0o.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;flex: revert;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-7-thu\u1ed9c-tinh-c\u1ee7a-flex-container\"><span class=\"ez-toc-section\" id=\"7_thuoc_tinh_cua_Flex_Container\"><\/span><b>7 thu\u1ed9c t\u00ednh c\u1ee7a Flex Container<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00e2y l\u00e0 danh s\u00e1ch c\u00e1c thu\u1ed9c t\u00ednh c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho flex container.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Thu\u1ed9c t\u00ednh<\/b><\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><\/tr><tr><td><b>Flex-direction<\/b><\/td><td><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh h\u01b0\u1edbng c\u1ee7a tr\u1ee5c ch\u00ednh cho b\u1ed1 c\u1ee5c c\u1ee7a flex container.<\/span><\/td><\/tr><tr><td><b>Flex-wrap<\/b><\/td><td><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh xem c\u00e1c flex item ph\u1ea3i n\u1eb1m tr\u00ean c\u00f9ng m\u1ed9t d\u00f2ng hay c\u00f3 th\u1ec3 t\u1ef1 \u0111\u1ed9ng xu\u1ed1ng d\u00f2ng khi kh\u00f4ng \u0111\u1ee7 ch\u1ed7.<\/span><\/td><\/tr><tr><td><b>Flex-flow<\/b><\/td><td><span style=\"font-weight: 400;\">Shortcut (k\u00fd hi\u1ec7u r\u00fat g\u1ecdn) cho c\u1ea3 flex-direction v\u00e0 flex-wrap.<\/span><\/td><\/tr><tr><td><b>Justify-content<\/b><\/td><td><span style=\"font-weight: 400;\">C\u0103n ch\u1ec9nh c\u00e1c flex item d\u1ecdc theo tr\u1ee5c ch\u00ednh, ph\u00e2n b\u1ed5 kho\u1ea3ng tr\u1ed1ng gi\u1eefa ho\u1eb7c xung quanh ch\u00fang.<\/span><\/td><\/tr><tr><td><b>Align-items<\/b><\/td><td><span style=\"font-weight: 400;\">C\u0103n ch\u1ec9nh c\u00e1c flex item d\u1ecdc theo tr\u1ee5c vu\u00f4ng g\u00f3c b\u00ean trong container.<\/span><\/td><\/tr><tr><td><b>Align-content<\/b><\/td><td><span style=\"font-weight: 400;\">C\u0103n ch\u1ec9nh c\u00e1c d\u00f2ng n\u00e0y d\u1ecdc theo tr\u1ee5c ph\u1ee5.<\/span><\/td><\/tr><tr><td><b>Place-content<\/b><\/td><td><span style=\"font-weight: 400;\">Shortcut cho c\u1ea3 2 thu\u1ed9c t\u00ednh justify-content v\u00e0 align-content.<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-direction\"><b>Flex-direction<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh flex-direction x\u00e1c \u0111\u1ecbnh h\u01b0\u1edbng hi\u1ec3n th\u1ecb c\u1ee7a c\u00e1c flex item. N\u00f3 thi\u1ebft l\u1eadp tr\u1ee5c ch\u00ednh c\u1ee7a flex container. Thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng m\u1ed9t trong b\u1ed1n gi\u00e1 tr\u1ecb l\u00e0 row, column, row-reverse, column-reverse.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flex-direction: row | row-reverse | column | column-reverse;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Gi\u00e1 tr\u1ecb<\/b><\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>C\u00fa ph\u00e1p<\/b><\/td><\/tr><tr><td><b>Row<\/b><\/td><td><span style=\"font-weight: 400;\">Row l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh. C\u00e1c item \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo h\u00e0ng ngang, t\u1eeb tr\u00e1i sang ph\u1ea3i.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">flex-direction: row;<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>Column<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo c\u1ed9t, t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi.<\/span><\/td><td><span style=\"font-weight: 400;\">flex-direction: column;<\/span><\/td><\/tr><tr><td><b>Row-Reverse<\/b><\/td><td><span style=\"font-weight: 400;\">Gi\u1ed1ng nh\u01b0 row nh\u01b0ng c\u00e1c item \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo th\u1ee9 t\u1ef1 ng\u01b0\u1ee3c l\u1ea1i, t\u1eeb ph\u1ea3i sang tr\u00e1i.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">flex-direction: row-reverse;<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>Column-Reverse<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Gi\u1ed1ng nh\u01b0 column nh\u01b0ng c\u00e1c item \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo th\u1ee9 t\u1ef1 ng\u01b0\u1ee3c l\u1ea1i, t\u1eeb d\u01b0\u1edbi l\u00ean tr\u00ean.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">flex-direction: column-reverse;<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 \u00e1p d\u1ee5ng 4 gi\u00e1 tr\u1ecb kh\u00e1c nhau c\u1ee7a thu\u1ed9c t\u00ednh Flex-direction:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p id=\"jill\"&gt;1. JILL&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"john\"&gt;2. JOHN&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jane\"&gt;3. JANE&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jack\"&gt;4. JACK&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: flex;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-direction: row | row-reverse | column | column-reverse;&nbsp;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* C\u00e1c ki\u1ec3u kh\u00e1c \u1edf \u0111\u00e2y... *\/<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e3y c\u00f9ng xem k\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Flex-direction: row<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"200\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-vippro.png\" alt=\"\" class=\"wp-image-68590\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-vippro.png 884w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-vippro-300x68.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-vippro-700x158.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-vippro-200x45.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-vippro-100x23.png 100w\" sizes=\"auto, (max-width: 884px) 100vw, 884px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Flex-direction: column<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"476\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-vippro.png\" alt=\"\" class=\"wp-image-68591\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-vippro.png 880w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-vippro-300x162.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-vippro-700x379.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-vippro-200x108.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-vippro-100x54.png 100w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Flex-direction: row-reverse<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"878\" height=\"190\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-reverse-vippro.png\" alt=\"\" class=\"wp-image-68592\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-reverse-vippro.png 878w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-reverse-vippro-300x65.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-reverse-vippro-700x151.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-reverse-vippro-200x43.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-row-reverse-vippro-100x22.png 100w\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Flex-direction: column-reverse<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"878\" height=\"484\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-reverse-vippro.png\" alt=\"\" class=\"wp-image-68593\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-reverse-vippro.png 878w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-reverse-vippro-300x165.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-reverse-vippro-700x386.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-reverse-vippro-200x110.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-direction-column-reverse-vippro-100x55.png 100w\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-wrap\"><b>Flex-wrap<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u00f4i khi, kho\u1ea3ng tr\u1ed1ng b\u00ean trong flex container s\u1ebd kh\u00f4ng \u0111\u1ee7 \u0111\u1ec3 ch\u1ee9a c\u00e1c flex item. Trong nh\u1eefng tr\u01b0\u1eddng h\u1ee3p nh\u01b0 v\u1eady, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng flex-wrap. Thu\u1ed9c t\u00ednh flex-wrap ki\u1ec3m so\u00e1t c\u00e1ch c\u00e1c flex item \u0111\u01b0\u1ee3c b\u1ed1 tr\u00ed khi kh\u00f4ng \u0111\u1ee7 ch\u1ed7 ch\u1ee9a t\u1ea5t c\u1ea3 trong m\u1ed9t d\u00f2ng.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">3 gi\u00e1 tr\u1ecb th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong thu\u1ed9c t\u00ednh n\u00e0y g\u1ed3m: nowrap, wrap, wrap-reverse.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><b>flex-wrap : nowrap | wrap | wrap-reverse;<\/b><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Gi\u00e1 tr\u1ecb<\/b><\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>C\u00fa ph\u00e1p<\/b><\/td><\/tr><tr><td><b>Nowrap<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp tr\u00ean m\u1ed9t d\u00f2ng duy nh\u1ea5t. N\u1ebfu n\u1ed9i dung c\u1ee7a c\u00e1c item v\u01b0\u1ee3t qu\u00e1 chi\u1ec1u r\u1ed9ng c\u1ee7a flex container, ch\u00fang s\u1ebd b\u1ecb tr\u00e0n ra ngo\u00e0i.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">flex-wrap: nowrap;<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>Wrap<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c ph\u00e9p xu\u1ed1ng d\u00f2ng v\u00e0 x\u1ebfp th\u00e0nh nhi\u1ec1u h\u00e0ng, theo th\u1ee9 t\u1ef1 t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi.<\/span><\/td><td><span style=\"font-weight: 400;\">flex-wrap: wrap;<\/span><\/td><\/tr><tr><td><b>Wrap-reverse<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c ph\u00e9p xu\u1ed1ng d\u00f2ng v\u00e0 x\u1ebfp th\u00e0nh nhi\u1ec1u h\u00e0ng, theo th\u1ee9 t\u1ef1 t\u1eeb d\u01b0\u1edbi l\u00ean tr\u00ean (ng\u01b0\u1ee3c l\u1ea1i v\u1edbi wrap).<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">flex-wrap: wrap-reverse;<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 \u00e1p d\u1ee5ng 3 gi\u00e1 tr\u1ecb kh\u00e1c nhau c\u1ee7a thu\u1ed9c t\u00ednh Flex-wrap:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">   &lt;p id=\"jill\"&gt;1. JILL&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"john\"&gt;2. JOHN&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"jane\"&gt;3. JANE&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"jack\"&gt;4. JACK&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"sara\"&gt;5. SARA&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"seth\"&gt;6. SETH&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"seal\"&gt;7. SEAL&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   flex-direction: row;&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;flex-wrap: nowrap | wrap | wrap-reverse;<\/span>\n<span style=\"font-weight: 400;\">   \/* C\u00e1c style kh\u00e1c \u1edf \u0111\u00e2y... *\/<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e3y c\u00f9ng xem k\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Flex-wrap: nowrap<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1054\" height=\"248\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-nowrap-vippro.png\" alt=\"\" class=\"wp-image-68594\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-nowrap-vippro.png 1054w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-nowrap-vippro-300x71.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-nowrap-vippro-700x165.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-nowrap-vippro-200x47.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-nowrap-vippro-100x24.png 100w\" sizes=\"auto, (max-width: 1054px) 100vw, 1054px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Flex-wrap: wrap<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"388\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-vippro.png\" alt=\"\" class=\"wp-image-68595\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-vippro.png 730w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-vippro-300x159.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-vippro-700x372.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-vippro-200x106.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-vippro-100x53.png 100w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Flex-wrap: wrap-reverse<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-reverse-vippro.png\" alt=\"\" class=\"wp-image-68596\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-reverse-vippro.png 700w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-reverse-vippro-300x163.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-reverse-vippro-640x347.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-reverse-vippro-200x109.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-wrap-reverse-vippro-100x54.png 100w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p><i><span style=\"font-weight: 400;\"><\/span><\/i><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-flow\"><b>Flex-flow<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh flex-flow l\u00e0 m\u1ed9t shortcut (k\u00fd hi\u1ec7u r\u00fat g\u1ecdn) cho c\u1ea3 flex-direction v\u00e0 flex-wrap. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi b\u1ea1n s\u1eed d\u1ee5ng flex-flow, b\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp c\u1ea3 hai thu\u1ed9c t\u00ednh n\u00e0y ch\u1ec9 trong m\u1ed9t d\u00f2ng code.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flex-flow: &lt;thu\u1ed9c t\u00ednh c\u1ee7a flex-direction&gt; &lt;thu\u1ed9c t\u00ednh c\u1ee7a flex-wrap&gt;;\n\nHo\u1eb7c flex-flow: &lt;thu\u1ed9c t\u00ednh c\u1ee7a flex-direction&gt;;\n\nHo\u1eb7c flex-flow: &lt;thu\u1ed9c t\u00ednh c\u1ee7a flex-wrap&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Khi s\u1eed d\u1ee5ng Flex-direction v\u00e0 flex-wrap<\/b><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">\ndisplay: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">flex-direction: column;&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-wrap: wrap;<\/span>\n<span style=\"font-weight: 400;\">\n}<\/span><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Khi s\u1eed d\u1ee5ng Flex-flow<\/b><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">\ndisplay: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">flex-flow: column wrap;<\/span>\n<span style=\"font-weight: 400;\">\n}<\/span><\/code><\/pre>\n\n\n\n<p>H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"430\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-flow-vippro.png\" alt=\"\" class=\"wp-image-68597\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-flow-vippro.png 906w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-flow-vippro-300x142.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-flow-vippro-700x332.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-flow-vippro-200x95.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-flow-vippro-100x47.png 100w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-content\"><b>Justify-content<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh justify-content gi\u00fap ph\u00e2n b\u1ed5 kho\u1ea3ng tr\u1ed1ng th\u1eeba c\u00f2n l\u1ea1i trong tr\u01b0\u1eddng h\u1ee3p t\u1ea5t c\u1ea3 flex item tr\u00ean m\u1ed9t d\u00f2ng \u0111\u1ec1u kh\u00f4ng linh ho\u1ea1t (kh\u00f4ng co gi\u00e3n \u0111\u01b0\u1ee3c) ho\u1eb7c linh ho\u1ea1t nh\u01b0ng \u0111\u00e3 \u0111\u1ea1t \u0111\u1ebfn k\u00edch th\u01b0\u1edbc t\u1ed1i \u0111a.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">6 gi\u00e1 tr\u1ecb th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong thu\u1ed9c t\u00ednh justify-content g\u1ed3m: flex-start (m\u1eb7c \u0111\u1ecbnh), flex-end, center, space-between, space-around, space-evenly.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>J\u200b\u200bustify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Gi\u00e1 tr\u1ecb<\/b><\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>C\u00fa ph\u00e1p<\/b><\/td><\/tr><tr><td><b>Flex-start<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c c\u0103n ch\u1ec9nh s\u00e1t v\u00e0o <strong>c<\/strong><\/span><b>\u1ea1nh b\u1eaft \u0111\u1ea7u c\u1ee7a flex container c\u0103n ch\u1ec9nh tr\u00ean tr\u1ee5c ch\u00ednh<\/b><\/td><td><span style=\"font-weight: 400;\">justify-content: flex-start;<\/span><\/td><\/tr><tr><td><b>Flex-end<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c c\u0103n ch\u1ec9nh v\u00e0o <\/span><span style=\"font-weight: 400;\">c\u1ea1nh cu\u1ed1i c\u00f9ng c\u1ee7a flex container c\u0103n ch\u1ec9nh tr\u00ean tr\u1ee5c ch\u00ednh<\/span><\/td><td><span style=\"font-weight: 400;\">justify-content: flex-end;<\/span><\/td><\/tr><tr><td><b>Center<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c d\u00e0n \u0111\u1ec1u ra <\/span><b>gi\u1eefa<\/b><span style=\"font-weight: 400;\"> flex container (kho\u1ea3ng tr\u1ed1ng \u0111\u01b0\u1ee3c chia \u0111\u1ec1u tr\u01b0\u1edbc v\u00e0 sau c\u00e1c item) v\u00e0 canh ch\u1ec9nh d\u1ecdc theo tr\u1ee5c ch\u00ednh<\/span><\/td><td><span style=\"font-weight: 400;\">justify-content: center;<\/span><\/td><\/tr><tr><td><b>Space-between<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c d\u00e0n \u0111\u1ec1u ra d\u1ecdc theo tr\u1ee5c ch\u00ednh, kho\u1ea3ng tr\u1ed1ng \u0111\u01b0\u1ee3c chia \u0111\u1ec1u <\/span><b>gi\u1eefa c\u00e1c item<\/b><span style=\"font-weight: 400;\"> v\u00e0 <\/span><b>hai r\u00eca<\/b><span style=\"font-weight: 400;\"> c\u1ee7a flex container. Ph\u1ea7n t\u1eed flex item \u0111\u1ea7u ti\u00ean s\u1ebd n\u1eb1m s\u00e1t c\u1ea1nh b\u1eaft \u0111\u1ea7u v\u00e0 ph\u1ea7n t\u1eed cu\u1ed1i s\u1ebd n\u1eb1m s\u00e1t c\u1ea1nh k\u1ebft th\u00fac c\u1ee7a v\u00f9ng ch\u1ee9a<\/span><\/td><td><span style=\"font-weight: 400;\">justify-content: space-between;<\/span><\/td><\/tr><tr><td><b>Space-around<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c d\u00e0n \u0111\u1ec1u ra, kho\u1ea3ng tr\u1ed1ng \u0111\u01b0\u1ee3c chia \u0111\u1ec1u <\/span><b>gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed v\u00e0 xung quanh<\/b><span style=\"font-weight: 400;\"> flex container (t\u1ee9c l\u00e0 c\u00f3 kho\u1ea3ng tr\u1ed1ng \u1edf \u0111\u1ea7u v\u00e0 cu\u1ed1i c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed). Trong \u0111\u00f3, kho\u1ea3ng tr\u1ed1ng tr\u01b0\u1edbc ph\u1ea7n t\u1eed \u0111\u1ea7u ti\u00ean v\u00e0 sau ph\u1ea7n t\u1eed cu\u1ed1i c\u00f9ng b\u1eb1ng m\u1ed9t n\u1eeda kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed li\u1ec1n k\u1ec1<\/span><\/td><td><span style=\"font-weight: 400;\">justify-content: space-around;<\/span><\/td><\/tr><tr><td><b>Space-evenly<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c d\u00e0n \u0111\u1ec1u ra, kho\u1ea3ng tr\u1ed1ng \u0111\u01b0\u1ee3c chia \u0111\u1ec1u <\/span><b>gi\u1eefa<\/b><span style=\"font-weight: 400;\"> c\u00e1c item v\u00e0 <\/span><b>b\u00ean ngo\u00e0i<\/b><span style=\"font-weight: 400;\"> flex container (t\u01b0\u01a1ng t\u1ef1 space-around nh\u01b0ng kho\u1ea3ng tr\u1ed1ng \u1edf \u0111\u1ea7u v\u00e0 cu\u1ed1i b\u1eb1ng nhau v\u00e0 b\u1eb1ng kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed).<\/span><\/td><td><span style=\"font-weight: 400;\">justify-content: space-evenly;<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e3y c\u00f9ng xem k\u1ebft qu\u1ea3 khi \u00e1p d\u1ee5ng 6 gi\u00e1 tr\u1ecb kh\u00e1c nhau c\u1ee7a thu\u1ed9c t\u00ednh Justify-content n\u00eau tr\u00ean trong v\u00ed d\u1ee5 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p id=\"jill\"&gt;1. JILL&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"john\"&gt;2. JOHN&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jane\"&gt;3. JANE&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jack\"&gt;4. JACK&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;<\/span>\n<span style=\"font-weight: 400;\">   \/* C\u00e1c style kh\u00e1c \u1edf \u0111\u00e2y... *\/<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p>H\u00e3y xem h\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Justify-content: flex-start<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1352\" height=\"314\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-vippro.png\" alt=\"\" class=\"wp-image-68598\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-vippro.png 1352w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-vippro-300x70.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-vippro-700x163.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-vippro-200x46.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-vippro-100x23.png 100w\" sizes=\"auto, (max-width: 1352px) 100vw, 1352px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Justify-content: flex-end<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1350\" height=\"322\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-flex-end-vippro.png\" alt=\"\" class=\"wp-image-68599\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-flex-end-vippro.png 1350w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-flex-end-vippro-300x72.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-flex-end-vippro-700x167.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-flex-end-vippro-200x48.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-flex-end-vippro-100x24.png 100w\" sizes=\"auto, (max-width: 1350px) 100vw, 1350px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Justify-content: center<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1352\" height=\"320\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-center-vippro.png\" alt=\"\" class=\"wp-image-68600\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-center-vippro.png 1352w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-center-vippro-300x71.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-center-vippro-700x166.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-center-vippro-200x47.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-center-vippro-100x24.png 100w\" sizes=\"auto, (max-width: 1352px) 100vw, 1352px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Justify-content: space-between<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1352\" height=\"312\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-between-vippro.png\" alt=\"\" class=\"wp-image-68601\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-between-vippro.png 1352w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-between-vippro-300x69.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-between-vippro-700x162.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-between-vippro-200x46.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-between-vippro-100x23.png 100w\" sizes=\"auto, (max-width: 1352px) 100vw, 1352px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Justify-content: space-around<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1350\" height=\"320\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-around-vippro.png\" alt=\"\" class=\"wp-image-68602\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-around-vippro.png 1350w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-around-vippro-300x71.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-around-vippro-700x166.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-around-vippro-200x47.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-around-vippro-100x24.png 100w\" sizes=\"auto, (max-width: 1350px) 100vw, 1350px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Justify-content: space-evenly<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1352\" height=\"308\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-evenly-vippro.png\" alt=\"\" class=\"wp-image-68603\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-evenly-vippro.png 1352w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-evenly-vippro-300x68.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-evenly-vippro-700x159.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-evenly-vippro-200x46.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/justify-content-space-evenly-vippro-100x23.png 100w\" sizes=\"auto, (max-width: 1352px) 100vw, 1352px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-items\"><b>Align-items<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh Align-items d\u00f9ng \u0111\u1ec3 c\u0103n ch\u1ec9nh c\u00e1c flex item tr\u00ean tr\u1ee5c ph\u1ee5 c\u1ee7a flex container. N\u00f3 quy\u1ebft \u0111\u1ecbnh v\u1ecb tr\u00ed c\u1ee7a c\u00e1c item theo h\u01b0\u1edbng vu\u00f4ng g\u00f3c v\u1edbi tr\u1ee5c ch\u00ednh.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Align-items c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng nhi\u1ec1u gi\u00e1 tr\u1ecb, d\u01b0\u1edbi \u0111\u00e2y l\u00e0 5 gi\u00e1 tr\u1ecb ph\u1ed5 bi\u1ebfn nh\u1ea5t: stretch (m\u1eb7c \u0111\u1ecbnh), Flex-start, Flex-end, center, baseline.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>align-items: stretch | flex-start | flex-end | center | baseline;&nbsp;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\n<p style=\"text-align: left;\"><b>Gi\u00e1 tr\u1ecb<\/b><\/p>\n<\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>C\u00fa ph\u00e1p<\/b><\/td><\/tr><tr><td><b>Stretch<\/b><\/td><td><span style=\"font-weight: 400;\">N\u1ebfu c\u00e1c item nh\u1ecf h\u01a1n k\u00edch th\u01b0\u1edbc c\u1ee7a container, c\u00e1c item v\u1edbi k\u00edch th\u01b0\u1edbc t\u1ef1 \u0111\u1ed9ng s\u1ebd \u0111\u01b0\u1ee3c ph\u00f3ng to \u0111\u1ec1u \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y container, v\u1edbi \u0111i\u1ec1u ki\u1ec7n kh\u00f4ng v\u01b0\u1ee3t qu\u00e1 gi\u1edbi h\u1ea1n k\u00edch th\u01b0\u1edbc t\u1ed1i \u0111a c\u1ee7a ch\u00fang.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\"> align-items: stretch;<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>Flex-start<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c c\u0103n ch\u1ec9nh s\u00e1t v\u00e0o ph\u00eda \u0111\u1ea7u c\u1ee7a flex container tr\u00ean tr\u1ee5c ph\u1ee5.<\/span><\/td><td><span style=\"font-weight: 400;\">&nbsp; align-items: flex-start;<\/span><\/td><\/tr><tr><td><b>Flex-end<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c c\u0103n ch\u1ec9nh s\u00e1t v\u00e0o cu\u1ed1i c\u1ee7a flex container tr\u00ean tr\u1ee5c ph\u1ee5.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">align-items: flex-end;<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>Center<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c c\u0103n ch\u00ednh gi\u1eefa trong flex container tr\u00ean tr\u1ee5c ph\u1ee5. N\u1ebfu k\u00edch th\u01b0\u1edbc c\u1ee7a item l\u1edbn h\u01a1n k\u00edch th\u01b0\u1edbc c\u1ee7a container, item s\u1ebd tr\u00e0n \u0111\u1ec1u v\u1ec1 c\u1ea3 hai ph\u00eda.<\/span><\/td><td><span style=\"font-weight: 400;\"> align-items: center;<\/span><\/td><\/tr><tr><td><b>Baseline<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c item \u0111\u01b0\u1ee3c c\u0103n ch\u1ec9nh sao cho \u0111\u01b0\u1eddng c\u01a1 s\u1edf (baseline) c\u1ee7a ch\u00fang th\u1eb3ng h\u00e0ng. Item c\u00f3 kho\u1ea3ng c\u00e1ch l\u1edbn nh\u1ea5t t\u1eeb l\u1ec1 \u0111\u1ea7u c\u1ee7a n\u00f3 \u0111\u1ebfn \u0111\u01b0\u1eddng c\u01a1 s\u1edf s\u1ebd s\u00e1t l\u1ec1 \u0111\u1ea7u c\u1ee7a d\u00f2ng. . \u0110\u01b0\u1eddng baseline l\u00e0 \u0111\u01b0\u1eddng v\u00f4 h\u00ecnh m\u00e0 c\u00e1c k\u00fd t\u1ef1 ng\u1ed3i tr\u00ean \u0111\u00f3.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp; align-items: baseline;<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 khi \u00e1p d\u1ee5ng 5 gi\u00e1 tr\u1ecb kh\u00e1c nhau c\u1ee7a thu\u1ed9c t\u00ednh Align-items:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p id=\"brad\"&gt;1. Brad&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"beth\"&gt;2. Beth&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"belle\"&gt;3. Belle&lt;\/p&gt; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"ben\"&gt;4. Ben&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;align-items: stretch | flex-start | flex-end | center | baseline;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* C\u00e1c style kh\u00e1c \u1edf \u0111\u00e2y... *\/<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e3y c\u00f9ng xem k\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-items: stretch<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"702\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-stretch-vippro.png\" alt=\"\" class=\"wp-image-68610\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-stretch-vippro.png 1360w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-stretch-vippro-300x155.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-stretch-vippro-700x361.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-stretch-vippro-200x103.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-stretch-vippro-100x52.png 100w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-items: flex-start<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1362\" height=\"688\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-start-vippro.png\" alt=\"\" class=\"wp-image-68611\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-start-vippro.png 1362w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-start-vippro-300x152.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-start-vippro-700x354.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-start-vippro-200x101.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-start-vippro-100x51.png 100w\" sizes=\"auto, (max-width: 1362px) 100vw, 1362px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-items: flex-end<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"700\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro.png\" alt=\"\" class=\"wp-image-68612\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro.png 1360w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro-300x154.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro-700x360.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro-200x103.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro-100x51.png 100w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-items: center<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1360\" height=\"700\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro.png\" alt=\"\" class=\"wp-image-68612\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro.png 1360w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro-300x154.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro-700x360.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro-200x103.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-flex-end-vippro-100x51.png 100w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-items: baseline<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1362\" height=\"736\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-baseline-vippro.png\" alt=\"\" class=\"wp-image-68614\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-baseline-vippro.png 1362w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-baseline-vippro-300x162.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-baseline-vippro-700x378.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-baseline-vippro-200x108.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-items-baseline-vippro-100x54.png 100w\" sizes=\"auto, (max-width: 1362px) 100vw, 1362px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-content\"><b>Align-content<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi b\u1ea1n c\u00f3 m\u1ed9t flex container v\u1edbi flex-wrap (ho\u1eb7c nhi\u1ec1u h\u01a1n m\u1ed9t d\u00f2ng flex), b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n c\u0103n ch\u1ec9nh c\u00e1c d\u00f2ng \u0111\u1ec3 ph\u00e2n b\u1ed5 kho\u1ea3ng tr\u1ed1ng theo \u00fd mu\u1ed1n. Align-content \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n vi\u1ec7c ph\u00e2n b\u1ed1 kh\u00f4ng gian gi\u1eefa v\u00e0 xung quanh c\u00e1c d\u00f2ng trong m\u1ed9t flex container d\u1ecdc theo tr\u1ee5c ch\u00e9o.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 nh\u1eefng gi\u00e1 tr\u1ecb ph\u1ed5 bi\u1ebfn sau: Stretch, Flex-start, Flex-end, Center, Space-between, Space-evenly, Space-around.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>align-content: stretch | flex-start | flex-end | center | space-between | space-evenly | space-around;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\n<p style=\"text-align: left;\"><b>Gi\u00e1 tr\u1ecb<\/b><\/p>\n<\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>C\u00fa ph\u00e1p<\/b><\/td><\/tr><tr><td><b>Stretch<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c d\u00f2ng \u0111\u01b0\u1ee3c k\u00e9o gi\u00e3n \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y chi\u1ec1u cao kh\u1ea3 d\u1ee5ng c\u1ee7a flex container tr\u00ean tr\u1ee5c ch\u00e9o.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">align-content: stretch;<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>Flex-start<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">C\u00e1c items \u0111\u01b0\u1ee3c x\u1ebfp s\u00e1t c\u1ea1nh nhau, d\u1ecdc theo m\u00e9p \u0111\u1ea7u c\u1ee7a v\u00f9ng ch\u1ee9a c\u0103n ch\u1ec9nh tr\u00ean tr\u1ee5c ch\u00e9o<\/span><\/td><td><span style=\"font-weight: 400;\"> align-content: flex-start;<\/span><\/td><\/tr><tr><td><b>Flex-end<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c items \u0111\u01b0\u1ee3c x\u1ebfp s\u00e1t c\u1ea1nh nhau, d\u1ed3n v\u1ec1 ph\u00eda m\u00e9p cu\u1ed1i c\u1ee7a v\u00f9ng ch\u1ee9a c\u0103n ch\u1ec9nh theo tr\u1ee5c ngang.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">align-content: flex-end;<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>Center<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">C\u00e1c items \u0111\u01b0\u1ee3c x\u1ebfp s\u00e1t c\u1ea1nh nhau t\u1ea1i trung t\u00e2m c\u1ee7a v\u00f9ng ch\u1ee9a c\u0103n ch\u1ec9nh theo tr\u1ee5c ngang.<\/span><\/td><td><span style=\"font-weight: 400;\"> align-content: center;<\/span><\/td><\/tr><tr><td><b>Space-between<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c items \u0111\u01b0\u1ee3c ph\u00e2n b\u1ed1 \u0111\u1ec1u nhau trong v\u00f9ng ch\u1ee9a c\u0103n ch\u1ec9nh theo tr\u1ee5c ngang. Kho\u1ea3ng c\u00e1ch gi\u1eefa m\u1ed7i c\u1eb7p items l\u00e0 b\u1eb1ng nhau. Items \u0111\u1ea7u ti\u00ean s\u00e1t v\u1edbi m\u00e9p b\u1eaft \u0111\u1ea7u c\u1ee7a v\u00f9ng ch\u1ee9a v\u00e0 items cu\u1ed1i c\u00f9ng s\u00e1t v\u1edbi m\u00e9p k\u1ebft th\u00fac c\u1ee7a v\u00f9ng ch\u1ee9a.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">align-content: space-between;<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>Space-evenly<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">C\u00e1c items \u0111\u01b0\u1ee3c ph\u00e2n b\u1ed1 \u0111\u1ec1u nhau trong v\u00f9ng ch\u1ee9a c\u0103n ch\u1ec9nh theo tr\u1ee5c ngang. Kho\u1ea3ng c\u00e1ch gi\u1eefa t\u1eebng c\u1eb7p items li\u1ec1n k\u1ec1, gi\u1eefa c\u1ea1nh \u0111\u1ea7u v\u00e0 items \u0111\u1ea7u ti\u00ean, gi\u1eefa c\u1ea1nh cu\u1ed1i v\u00e0 items cu\u1ed1i c\u00f9ng ho\u00e0n to\u00e0n b\u1eb1ng nhau.<\/span><\/td><td><span style=\"font-weight: 400;\">align-content: space-evenly;<\/span><\/td><\/tr><tr><td><b>Space-around<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c items \u0111\u01b0\u1ee3c ph\u00e2n b\u1ed1 \u0111\u1ec1u nhau b\u00ean trong v\u00f9ng ch\u1ee9a c\u0103n ch\u1ec9nh theo tr\u1ee5c ngang. Kho\u1ea3ng c\u00e1ch gi\u1eefa t\u1eebng c\u1eb7p items c\u1ea1nh nhau l\u00e0 b\u1eb1ng nhau. Kho\u1ea3ng tr\u1ed1ng tr\u01b0\u1edbc items \u0111\u1ea7u ti\u00ean v\u00e0 sau items cu\u1ed1i c\u00f9ng b\u1eb1ng m\u1ed9t n\u1eeda kho\u1ea3ng c\u00e1ch gi\u1eefa m\u1ed7i c\u1eb7p items c\u1ea1nh nhau.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">align-content: space-around;<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 khi \u00e1p d\u1ee5ng 7 gi\u00e1 tr\u1ecb kh\u00e1c nhau c\u1ee7a thu\u1ed9c t\u00ednh Align-item:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;\n\n<\/span><span style=\"font-weight: 400;\">&lt;p id=\"jill\"&gt;1. JILL&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"john\"&gt;2. JOHN&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jane\"&gt;3. JANE&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jack\"&gt;4. JACK&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"benn\"&gt;5. BENN&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"beth\"&gt;6. BETH&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"brad\"&gt;7. BRAD&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"bell\"&gt;8. BELL&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"kyle\"&gt;9. KYLE&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"karl\"&gt;10. KARL&lt;\/p&gt;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"kate\"&gt;11. KATE&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">\n&lt;\/div&gt;<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   flex-direction: row;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">   align-content: | stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;<\/span>\n<span style=\"font-weight: 400;\">\/* C\u00e1c style kh\u00e1c \u1edf \u0111\u00e2y... *\/<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p>H\u00e3y c\u00f9ng xem k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-content: stretch<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"868\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-stretch-vippro.png\" alt=\"\" class=\"wp-image-68617\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-stretch-vippro.png 1200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-stretch-vippro-300x217.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-stretch-vippro-768x556.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-stretch-vippro-200x145.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-stretch-vippro-100x72.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-stretch-vippro-622x450.png 622w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-content: flex-start<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1206\" height=\"878\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-start-vippro.png\" alt=\"\" class=\"wp-image-68618\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-start-vippro.png 1206w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-start-vippro-300x218.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-start-vippro-768x559.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-start-vippro-200x146.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-start-vippro-100x73.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-start-vippro-618x450.png 618w\" sizes=\"auto, (max-width: 1206px) 100vw, 1206px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-content: flex-end<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1212\" height=\"864\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-end-vippro.png\" alt=\"\" class=\"wp-image-68619\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-end-vippro.png 1212w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-end-vippro-300x214.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-end-vippro-768x547.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-end-vippro-200x143.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-end-vippro-100x71.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-flex-end-vippro-631x450.png 631w\" sizes=\"auto, (max-width: 1212px) 100vw, 1212px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-content: center<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1216\" height=\"872\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-center-vippro.png\" alt=\"\" class=\"wp-image-68620\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-center-vippro.png 1216w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-center-vippro-300x215.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-center-vippro-768x551.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-center-vippro-200x143.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-center-vippro-100x72.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-center-vippro-628x450.png 628w\" sizes=\"auto, (max-width: 1216px) 100vw, 1216px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-content: space-between<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1214\" height=\"852\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-between-vippro.png\" alt=\"\" class=\"wp-image-68621\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-between-vippro.png 1214w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-between-vippro-300x211.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-between-vippro-641x450.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-between-vippro-200x140.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-between-vippro-100x70.png 100w\" sizes=\"auto, (max-width: 1214px) 100vw, 1214px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-content: space-around<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1216\" height=\"884\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-around-vippro.png\" alt=\"\" class=\"wp-image-68622\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-around-vippro.png 1216w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-around-vippro-300x218.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-around-vippro-768x558.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-around-vippro-200x145.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-around-vippro-100x73.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-around-vippro-619x450.png 619w\" sizes=\"auto, (max-width: 1216px) 100vw, 1216px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Align-content: space-evenly<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1216\" height=\"898\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-evenly-vippro.png\" alt=\"\" class=\"wp-image-68623\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-evenly-vippro.png 1216w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-evenly-vippro-300x222.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-evenly-vippro-768x567.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-evenly-vippro-200x148.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-evenly-vippro-100x74.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-content-space-evenly-vippro-609x450.png 609w\" sizes=\"auto, (max-width: 1216px) 100vw, 1216px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-place-content\"><b>Place-content<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n c\u1ea7n s\u1eed d\u1ee5ng c\u1ea3 hai thu\u1ed9c t\u00ednh justify-content v\u00e0 align-content th\u00ec b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng thu\u1ed9c t\u00ednh r\u00fat g\u1ecdn place-content. Thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 th\u1ec3 nh\u1eadn m\u1ed9t ho\u1eb7c hai gi\u00e1 tr\u1ecb:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>M\u1ed9t gi\u00e1 tr\u1ecb:<\/b><span style=\"font-weight: 400;\"> Khi b\u1ea1n ch\u1ec9 cung c\u1ea5p m\u1ed9t gi\u00e1 tr\u1ecb, tr\u00ecnh duy\u1ec7t s\u1ebd \u00e1p d\u1ee5ng gi\u00e1 tr\u1ecb \u0111\u00f3 cho c\u1ea3 justify-content v\u00e0 align-content.<\/span><\/li>\n\n\n\n<li><b>Hai gi\u00e1 tr\u1ecb: <\/b><span style=\"font-weight: 400;\">Khi b\u1ea1n cung c\u1ea5p hai gi\u00e1 tr\u1ecb cho place-content, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho align-content v\u00e0 gi\u00e1 tr\u1ecb th\u1ee9 hai cho justify-content.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>place-content: &lt;align-content&gt; &lt;justify-content&gt;;&nbsp;&nbsp;<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5 khi s\u1eed d\u1ee5ng justify-content v\u00e0 align-content:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">flex-wrap: wrap;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">align-content: flex-end;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">justify-content: flex-start;&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">\/* N\u1ed9i dung kh\u00e1c *\/<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5 khi s\u1eed d\u1ee5ng place-content:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">names-container {&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">flex-wrap: wrap;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">place-content: flex-end flex-start;&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">\/* N\u1ed9i dung kh\u00e1c *\/<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p>H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"494\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/place-content-vippro.png\" alt=\"\" class=\"wp-image-68615\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/place-content-vippro.png 904w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/place-content-vippro-300x164.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/place-content-vippro-700x383.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/place-content-vippro-200x109.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/place-content-vippro-100x55.png 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tham kh\u1ea3o vi\u1ec7c l\u00e0m <a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ha-noi?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=flex_css\" target=\"_blank\" rel=\"noreferrer noopener\">L\u1eadp tr\u00ecnh vi\u00ean Frontend<\/a> t\u1ea1i H\u00e0 N\u1ed9i<\/p>\n\n\n\n<p>Tham kh\u1ea3o vi\u1ec7c l\u00e0m <a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ho-chi-minh-hcm?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=flex_css\" target=\"_blank\" rel=\"noreferrer noopener\">L\u1eadp tr\u00ecnh vi\u00ean Frontend<\/a> t\u1ea1i H\u1ed3 Ch\u00ed Minh<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-6-thu\u1ed9c-tinh-c\u1ee7a-flex-item\"><span class=\"ez-toc-section\" id=\"6_thuoc_tinh_cua_Flex_Item\"><\/span><b>6 thu\u1ed9c t\u00ednh c\u1ee7a Flex Item<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00e2y l\u00e0 danh s\u00e1ch c\u00e1c thu\u1ed9c t\u00ednh c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho flex item.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Thu\u1ed9c t\u00ednh<\/b><\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><\/tr><tr><td><b>Order<\/b><\/td><td><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh th\u1ee9 t\u1ef1 xu\u1ea5t hi\u1ec7n c\u1ee7a c\u00e1c flex item trong container.<\/span><\/td><\/tr><tr><td><b>Align-self<\/b><\/td><td><span style=\"font-weight: 400;\">Cho ph\u00e9p ghi \u0111\u00e8 gi\u00e1 tr\u1ecb c\u1ee7a align-items cho m\u1ed9t flex item c\u1ee5 th\u1ec3.<\/span><\/td><\/tr><tr><td><b>Flex-grow<\/b><\/td><td><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh kh\u1ea3 n\u0103ng t\u0103ng tr\u01b0\u1edfng c\u1ee7a m\u1ed9t flex item so v\u1edbi c\u00e1c item kh\u00e1c.<\/span><\/td><\/tr><tr><td><b>Flex-shrink<\/b><\/td><td><span style=\"font-weight: 400;\">Gi\u1ea3m k\u00edch th\u01b0\u1edbc c\u1ee7a flex item n\u1ebfu kh\u00f4ng \u0111\u1ee7 ch\u1ed7 trong flex container.<\/span><\/td><\/tr><tr><td><b>Flex-basis<\/b><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc ban \u0111\u1ea7u c\u1ee7a m\u1ed9t flex item.<\/span><\/td><\/tr><tr><td><b>Flex<\/b><\/td><td><span style=\"font-weight: 400;\">Vi\u1ebft t\u1eaft cho flex-grow, flex-shrink v\u00e0 flex-basis.<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-order\"><b>Order<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh order x\u00e1c \u0111\u1ecbnh th\u1ee9 t\u1ef1 xu\u1ea5t hi\u1ec7n c\u1ee7a c\u00e1c flex item trong container. Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh c\u1ee7a order l\u00e0 0. Khi g\u00e1n gi\u00e1 tr\u1ecb kh\u00e1c, b\u1ea1n c\u1ea7n \u0111\u1ea3m b\u1ea3o \u0111\u00f3 l\u00e0 m\u1ed9t s\u1ed1 nguy\u00ean, c\u00e1c ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo th\u1ee9 t\u1ef1 t\u0103ng d\u1ea7n c\u1ee7a order, sau \u0111\u00f3 l\u00e0 theo th\u1ee9 t\u1ef1 m\u00e3 code trong file.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu ph\u1ea7n t\u1eed c\u00f3 order \u1ecb l\u00e0 -1 th\u00ec n\u00f3 s\u1ebd \u0111\u01b0a ph\u1ea7n t\u1eed n\u00e0y l\u00ean th\u00e0nh ph\u1ea7n t\u1eed \u0111\u1ea7u ti\u00ean.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>order: &lt;integer&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p id=\"jill\"&gt;1. JILL&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"john\"&gt;2. JOHN&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jane\"&gt;3. JANE&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jack\"&gt;4. JACK&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 h\u00ecnh \u1ea3nh hi\u1ec3n th\u1ecb khi kh\u00f4ng c\u00f3 thu\u1ed9c t\u00ednh order<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"250\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-no-order-vippro.png\" alt=\"\" class=\"wp-image-68588\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-no-order-vippro.png 842w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-no-order-vippro-300x89.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-no-order-vippro-700x208.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-no-order-vippro-200x59.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-no-order-vippro-100x30.png 100w\" sizes=\"auto, (max-width: 842px) 100vw, 842px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 h\u00ecnh \u1ea3nh hi\u1ec3n th\u1ecb khi c\u00f3 thu\u1ed9c t\u00ednh order<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">    display: flex;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#jill {&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;order: 2;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color: #fe4f46;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#john {&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;order: 4;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color: #fcd65c;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#jane {&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;order: 1;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color:&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;#00bab4;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#jack {&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;order: 3;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color: #003f54;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"248\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-order-vippro.png\" alt=\"\" class=\"wp-image-68589\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-order-vippro.png 844w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-order-vippro-300x88.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-order-vippro-700x206.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-order-vippro-200x59.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-order-vippro-100x29.png 100w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-self\"><strong>Align-self <\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Align-self cho ph\u00e9p ghi \u0111\u00e8 gi\u00e1 tr\u1ecb c\u1ee7a align-items cho m\u1ed9t flex item c\u1ee5 th\u1ec3. C\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a n\u00f3 t\u01b0\u01a1ng t\u1ef1 nh\u01b0 thu\u1ed9c t\u00ednh align-item.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec3m kh\u00e1c bi\u1ec7t ch\u00ednh l\u00e0 align-items \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c flex item trong container, c\u00f2n align-self ch\u1ec9 \u00e1p d\u1ee5ng cho c\u00e1c item c\u1ee5 th\u1ec3 m\u00e0 b\u1ea1n ch\u1ecdn.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>align-self: auto;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;<\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"jill\"&gt;1. JILL&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"john\"&gt;2. JOHN&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"jane\"&gt;3. JANE&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">   &lt;p id=\"jack\"&gt;4. JACK&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">    display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;align-items: center;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;\/* C\u00e1c style kh\u00e1c *\/&nbsp;&nbsp;&nbsp;&nbsp;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#jill {<\/span>\n<span style=\"font-weight: 400;\">align-self: flex-start;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"486\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-self-vippro.png\" alt=\"\" class=\"wp-image-68585\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-self-vippro.png 902w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-self-vippro-300x162.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-self-vippro-700x377.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-self-vippro-200x108.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/align-self-vippro-100x54.png 100w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-grow\"><b>Flex-grow<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi b\u1ea1n c\u00e0i \u0111\u1eb7t display c\u1ee7a m\u1ed9t container th\u00e0nh flex (d\u00f9ng flexbox), c\u00e1c flex item th\u01b0\u1eddng d\u1ed3n v\u1ec1 b\u00ean tr\u00e1i, khi\u1ebfn ph\u00eda sau flex item cu\u1ed1i c\u00f9ng b\u1ecb d\u01b0 ra m\u1ed9t kho\u1ea3ng tr\u1ed1ng. Khi n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng flex-grow \u0111\u1ec3 t\u0103ng k\u00edch th\u01b0\u1edbc c\u1ee7a flex item so v\u1edbi c\u00e1c item kh\u00e1c \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y kho\u1ea3ng tr\u1ed1ng n\u00e0y.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n ch\u1ec9 th\u00eam gi\u00e1 tr\u1ecb flex-grow: 1 cho m\u1ed9t trong c\u00e1c flex item, tr\u00ecnh duy\u1ec7t s\u1ebd ph\u00e2n b\u1ed5 to\u00e0n b\u1ed9 kho\u1ea3ng tr\u1ed1ng th\u1eeba cho item \u0111\u00f3.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flex-grow: &lt;number&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">L\u01b0u \u00fd: N\u1ebfu ch\u1ec9 c\u00f3 m\u1ed9t item trong container c\u00f3 gi\u00e1 tr\u1ecb flex-grow, th\u00ec b\u1ea5t k\u1ef3 gi\u00e1 tr\u1ecb n\u00e0o t\u1eeb 1 tr\u1edf l\u00ean s\u1ebd chi\u1ebfm to\u00e0n b\u1ed9 kho\u1ea3ng tr\u1ed1ng th\u1eeba.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p id=\"jill\"&gt;1. JILL&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"john\"&gt;2. JOHN&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jane\"&gt;3. JANE&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jack\"&gt;4. JACK&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {\n&nbsp;&nbsp;<\/span> <span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;display: flex;\n&nbsp;&nbsp;<\/span> <span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;justify-content: flex-start;&nbsp;&nbsp;\n<\/span> <span style=\"font-weight: 400;\">&nbsp;<\/span>     <span style=\"font-weight: 400;\">\/* C\u00e1c style kh\u00e1c \u1edf \u0111\u00e2y *\/<\/span> <span style=\"font-weight: 400;\">&nbsp;}<\/span><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Khi ch\u01b0a \u00e1p d\u1ee5ng flex-grow<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"290\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-vippro.png\" alt=\"\" class=\"wp-image-68582\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-vippro.png 906w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-vippro-300x96.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-vippro-700x224.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-vippro-200x64.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-vippro-100x32.png 100w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Khi \u0111\u00e3 \u00e1p d\u1ee5ng flex-grow: 0.5<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">#jill {<\/span>\n\n<span style=\"font-weight: 400;\">flex-grow: 0.5;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"908\" height=\"320\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-0.5-vippro.png\" alt=\"\" class=\"wp-image-68583\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-0.5-vippro.png 908w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-0.5-vippro-300x106.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-0.5-vippro-700x247.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-0.5-vippro-200x70.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-0.5-vippro-100x35.png 100w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Khi \u0111\u00e3 \u00e1p d\u1ee5ng flex-grow: 1<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">#jill {<\/span>\n\n<span style=\"font-weight: 400;\">flex-grow: 1;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"908\" height=\"304\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-1-vippro.png\" alt=\"\" class=\"wp-image-68584\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-1-vippro.png 908w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-1-vippro-300x100.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-1-vippro-700x234.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-1-vippro-200x67.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-grow-1-1-vippro-100x33.png 100w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-shrink\"><b>Flex-shrink<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh flex-shrink ho\u1ea1t \u0111\u1ed9ng ng\u01b0\u1ee3c l\u1ea1i v\u1edbi flex-grow. B\u1ea1n s\u1eed d\u1ee5ng flex-grow khi mu\u1ed1n t\u0103ng k\u00edch th\u01b0\u1edbc c\u1ee7a flex item n\u1ebfu c\u00f3 th\u00eam kho\u1ea3ng tr\u1ed1ng. Ng\u01b0\u1ee3c l\u1ea1i, b\u1ea1n s\u1eed d\u1ee5ng flex-shrink khi mu\u1ed1n gi\u1ea3m k\u00edch th\u01b0\u1edbc c\u1ee7a flex item n\u1ebfu kh\u00f4ng \u0111\u1ee7 ch\u1ed7 trong flex container.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flex-shrink: &lt;number&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"numbers-container\"&gt;<\/span>\n<span style=\"font-weight: 400;\">    &lt;p id=\"one\"&gt;1&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">    &lt;p id=\"two\"&gt;2&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">    &lt;p id=\"three\"&gt;3&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">    &lt;p id=\"four\"&gt;4&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">.numbers-container {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">    display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">    justify-content: flex-start;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">    \/* C\u00e1c style kh\u00e1c *\/<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">#one {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">    flex-shrink: 2;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">    background-color: #fe4f46;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"278\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-shrink-1-vippro.png\" alt=\"\" class=\"wp-image-68580\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-shrink-1-vippro.png 902w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-shrink-1-vippro-300x92.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-shrink-1-vippro-700x216.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-shrink-1-vippro-200x62.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-shrink-1-vippro-100x31.png 100w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 ng\u0103n m\u1ed9t m\u1ee5c flex b\u1ecb co l\u1ea1i, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t cho item gi\u00e1 tr\u1ecb flex-shrink b\u1eb1ng 0. Khi n\u00e0y, k\u1ebft qu\u1ea3 b\u1ea1n nh\u1eadn \u0111\u01b0\u1ee3c s\u1ebd nh\u01b0 sau:<\/span><\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-flex-basis\"><b>Flex-basis<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh flex-basis cho ph\u00e9p b\u1ea1n thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc m\u1eb7c \u0111\u1ecbnh c\u1ee7a m\u1ed9t flex item c\u1ee5 th\u1ec3. K\u00edch th\u01b0\u1edbc n\u00e0y c\u00f3 th\u1ec3 l\u00e0 chi\u1ec1u r\u1ed9ng ho\u1eb7c chi\u1ec1u cao c\u1ee7a item t\u00f9y thu\u1ed9c v\u00e0o flex-direction (tr\u1ee5c ch\u00ednh c\u1ee7a flex container).<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">N\u1ebfu flex-direction \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh row ho\u1eb7c row-reverse (tr\u1ee5c ch\u00ednh theo h\u00e0ng), th\u00ec gi\u00e1 tr\u1ecb c\u1ee7a flex-basis s\u1ebd tr\u1edf th\u00e0nh chi\u1ec1u r\u1ed9ng ban \u0111\u1ea7u c\u1ee7a item.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu flex-direction \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh column ho\u1eb7c column-reverse (tr\u1ee5c ch\u00ednh theo c\u1ed9t), th\u00ec gi\u00e1 tr\u1ecb c\u1ee7a flex-basis s\u1ebd tr\u1edf th\u00e0nh chi\u1ec1u cao ban \u0111\u1ea7u c\u1ee7a item.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flex-basis: &lt;length&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;div class=\"names-container\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p id=\"jill\"&gt;1. JILL&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"john\"&gt;2. JOHN&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jane\"&gt;3. JANE&lt;\/p&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;p id=\"jack\"&gt;4. JACK&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Thi\u1ebft l\u1eadp c\u00e1c item theo chi\u1ec1u cao<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">flex-direction: column;&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">\/* C\u00e1c style kh\u00e1c *\/<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">div {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">height: 20px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#jane {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">flex-basis: 60px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p>H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"898\" height=\"470\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-height-vippro.png\" alt=\"\" class=\"wp-image-68579\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-height-vippro.png 898w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-height-vippro-300x157.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-height-vippro-700x366.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-height-vippro-200x105.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-height-vippro-100x52.png 100w\" sizes=\"auto, (max-width: 898px) 100vw, 898px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Thi\u1ebft l\u1eadp c\u00e1c item theo chi\u1ec1u r\u1ed9ng<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.names-container {&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">display: flex;&nbsp; <\/span>\n<span style=\"font-weight: 400;\">flex-direction: row;&nbsp;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* C\u00e1c ki\u1ec3u kh\u00e1c *\/<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">div {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">width: 70px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#jane {&nbsp; <\/span>\n<span style=\"font-weight: 400;\">flex-basis: 140px;<\/span>\n\n<span style=\"font-weight: 400;\">}\n<\/span><\/code><\/pre>\n\n\n\n<p>H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"264\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-width-vippro.png\" alt=\"\" class=\"wp-image-68578\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-width-vippro.png 894w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-width-vippro-300x89.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-width-vippro-700x207.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-width-vippro-200x59.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/flex-basis-width-vippro-100x30.png 100w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-flex-css-va-flexbox-css\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Flex_CSS_va_Flexbox_CSS\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Flex CSS v\u00e0 Flexbox CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-m\u1ed9t-s\u1ed1-l\u1ed7i-ph\u1ed5-bi\u1ebfn-ma-m\u1ecdi-ng\u01b0\u1eddi-m\u1eafc-ph\u1ea3i-khi-s\u1eed-d\u1ee5ng-flexbox-la-gi\"><b>M\u1ed9t s\u1ed1 l\u1ed7i ph\u1ed5 bi\u1ebfn m\u00e0 m\u1ecdi ng\u01b0\u1eddi m\u1eafc ph\u1ea3i khi s\u1eed d\u1ee5ng Flexbox l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Kh\u00f4ng thi\u1ebft l\u1eadp chi\u1ec1u r\u1ed9ng ho\u1eb7c chi\u1ec1u cao cho flex container<\/b><span style=\"font-weight: 400;\">: N\u1ebfu kh\u00f4ng c\u00f3 c\u00e1c k\u00edch th\u01b0\u1edbc n\u00e0y, c\u00e1c flex item (th\u00e0nh ph\u1ea7n con) s\u1ebd kh\u00f4ng bi\u1ebft c\u00e1ch c\u0103n ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a ch\u00fang.<\/span><\/li>\n\n\n\n<li><b>Kh\u00f4ng thi\u1ebft l\u1eadp tr\u1ee5c ch\u00ednh khi mu\u1ed1n s\u1eafp x\u1ebfp theo c\u1ed9t (flex-direction): <\/b><span style=\"font-weight: 400;\">Theo m\u1eb7c \u0111\u1ecbnh, c\u00e1c flex item \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo h\u00e0ng t\u1eeb tr\u00e1i sang ph\u1ea3i. N\u1ebfu b\u1ea1n mu\u1ed1n ch\u00fang \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo c\u1ed9t t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi, b\u1ea1n c\u1ea7n \u0111\u1eb7t thu\u1ed9c t\u00ednh flex-direction th\u00e0nh column.<\/span><\/li>\n\n\n\n<li><b>Qu\u00ean thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh justify-content: <\/b><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh justify-content ki\u1ec3m so\u00e1t kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c flex item d\u1ecdc theo tr\u1ee5c ch\u00ednh. N\u1ebfu kh\u00f4ng thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh n\u00e0y, c\u00e1c flex item s\u1ebd b\u1ecb d\u1ed3n ch\u1eb7t v\u00e0o nhau.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-di\u1ec1u-gi-x\u1ea3y-ra-n\u1ebfu-d\u1eb7t-display-flex-tren-m\u1ecdi-thanh-ph\u1ea7n-trong-trang-web\"><b>\u0110i\u1ec1u g\u00ec x\u1ea3y ra n\u1ebfu \u0111\u1eb7t display:flex tr\u00ean m\u1ecdi th\u00e0nh ph\u1ea7n trong trang web?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n \u0111\u1eb7t display: flex; cho t\u1ea5t c\u1ea3 c\u00e1c th\u00e0nh ph\u1ea7n (element) tr\u00ean trang web, th\u00ec m\u1ecdi th\u00e0nh ph\u1ea7n \u0111\u00f3 s\u1ebd tr\u1edf th\u00e0nh flex container.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn m\u1ed9t s\u1ed1 k\u1ebft qu\u1ea3 kh\u00f4ng mong mu\u1ed1n, v\u00ec c\u00e1c flex container s\u1ebd c\u1ed1 g\u1eafng thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc v\u00e0 s\u1eafp x\u1ebfp l\u1ea1i t\u1ea5t c\u1ea3 c\u00e1c th\u00e0nh ph\u1ea7n con (child element) b\u00ean trong ch\u00fang \u0111\u1ec3 v\u1eeba v\u1edbi kho\u1ea3ng tr\u1ed1ng c\u00f3 s\u1eb5n.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cach-s\u1eed-d\u1ee5ng-flexbox-cho-b\u1ed1-c\u1ee5c-nhi\u1ec1u-c\u1ed9t-trong-html\"><b>C\u00e1ch s\u1eed d\u1ee5ng Flexbox cho b\u1ed1 c\u1ee5c nhi\u1ec1u c\u1ed9t trong HTML?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Flexbox l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd \u0111\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c nhi\u1ec1u c\u1ed9t trong code HTML c\u1ee7a b\u1ea1n. B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh flex-direction, flex-wrap v\u00e0 justify-content, b\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t h\u01b0\u1edbng, ng\u1eaft d\u00f2ng v\u00e0 c\u0103n ch\u1ec9nh n\u1ed9i dung.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng t\u1ea1o c\u00e1c b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p m\u00e0 th\u00f4ng th\u01b0\u1eddng s\u1ebd kh\u00f3 th\u1ef1c hi\u1ec7n \u0111\u01b0\u1ee3c.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft-flex-css-va-flexbox-css\"><span class=\"ez-toc-section\" id=\"Tong_ket_Flex_CSS_va_Flexbox_CSS\"><\/span><b>T\u1ed5ng k\u1ebft Flex CSS v\u00e0 Flexbox CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 th\u1ea5y, Flexbox CSS l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 h\u1eefu \u00edch gi\u00fap b\u1ea1n t\u1ea1o n\u00ean s\u1ef1 linh ho\u1ea1t trong b\u1ed1 c\u1ee5c m\u1ed7i trang web. V\u1edbi 13 b\u1ed9 thu\u1ed9c t\u00ednh cho c\u1ea3 flex container v\u00e0 flex item trong m\u00f4-\u0111un b\u1ed1 c\u1ee5c flexbox, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 ph\u00e1t tri\u1ec3n nh\u1eefng thi\u1ebft k\u1ebf ph\u1ee9c t\u1ea1p v\u00e0 linh ho\u1ea1t, c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng y\u00eau c\u1ea7u linh ho\u1ea1t tr\u00ean c\u00e1c thi\u1ebft b\u1ecb kh\u00e1c nhau.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Hy v\u1ecdng r\u1eb1ng, nh\u1eefng th\u00f4ng tin chi ti\u1ebft v\u1ec1 c\u00e1ch d\u00f9ng flex CSS v\u00e0 flexbox CSS trong b\u00e0i vi\u1ebft tr\u00ean s\u1ebd gi\u00fap \u00edch th\u1eadt nhi\u1ec1u cho b\u1ea1n. \u0110\u1eebng qu\u00ean theo d\u00f5i ITviec m\u1ed7i ng\u00e0y \u0111\u1ec3 c\u1eadp nh\u1eadt nhi\u1ec1u ki\u1ebfn th\u1ee9c m\u1edbi v\u00e0 h\u1eefu \u00edch nh\u00e9.<\/span><\/p>\n\n\n\n<p class=\"has-text-align-center\">B\u1ea1n th\u1ea5y b\u00e0i vi\u1ebft hay v\u00e0 h\u1eefu \u00edch? \u0110\u1eebng ng\u1ea1i Share v\u1edbi b\u1ea1n b\u00e8 v\u00e0 \u0111\u1ed3ng nghi\u1ec7p nh\u00e9.<\/p>\n\n\n\n<p class=\"has-text-align-center\">V\u00e0 nhanh tay tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/viec-lam-it\/?utm_medium=anchor_text_low&amp;utm_source=blog&amp;utm_campaign=viec_lam_it&amp;utm_content=flex_css\">vi\u1ec7c l\u00e0m IT<\/a> \u201cch\u1ea5t\u201d tr\u00ean ITviec!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flex CSS l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m quan tr\u1ecdng li\u00ean quan \u0111\u1ebfn vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web. V\u1eady ch\u00ednh x\u00e1c th\u00ec Flex, hay Flexbox trong CSS l\u00e0 g\u00ec? L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 \u1ee9ng d\u1ee5ng Flexbox CSS \u0111\u1ec3 x\u00e2y d\u1ef1ng website hi\u1ec7u qu\u1ea3? ITviec s\u1ebd h\u01b0\u1edbng d\u1eabn [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":68660,"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-68563","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>Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Flex CSS l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m li\u00ean quan \u0111\u1ebfn vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean web. V\u1eady ch\u00ednh x\u00e1c th\u00ec Flex, hay Flexbox trong CSS l\u00e0 g\u00ec?\" \/>\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\/flex-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS\" \/>\n<meta property=\"og:description\" content=\"Flex CSS l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m quan tr\u1ecdng li\u00ean quan \u0111\u1ebfn vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web. V\u1eady ch\u00ednh x\u00e1c th\u00ec Flex, hay Flexbox trong CSS l\u00e0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/flex-css\/\" \/>\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=\"2024-05-15T01:52:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-19T17:54:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/thumbnail-flex-css-vippro.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2112\" \/>\n\t<meta property=\"og:image:height\" content=\"1112\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\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=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"32 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS - ITviec Blog","description":"Flex CSS l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m li\u00ean quan \u0111\u1ebfn vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean web. V\u1eady ch\u00ednh x\u00e1c th\u00ec Flex, hay Flexbox trong CSS l\u00e0 g\u00ec?","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\/flex-css\/","og_locale":"vi_VN","og_type":"article","og_title":"Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS","og_description":"Flex CSS l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m quan tr\u1ecdng li\u00ean quan \u0111\u1ebfn vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web. V\u1eady ch\u00ednh x\u00e1c th\u00ec Flex, hay Flexbox trong CSS l\u00e0","og_url":"https:\/\/itviec.com\/blog\/flex-css\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-05-15T01:52:03+00:00","article_modified_time":"2025-07-19T17:54:32+00:00","og_image":[{"width":2112,"height":1112,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/thumbnail-flex-css-vippro.png","type":"image\/png"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"32 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/flex-css\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/flex-css\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS","datePublished":"2024-05-15T01:52:03+00:00","dateModified":"2025-07-19T17:54:32+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/flex-css\/"},"wordCount":6319,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/flex-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/thumbnail-flex-css-vippro.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/flex-css\/","url":"https:\/\/itviec.com\/blog\/flex-css\/","name":"Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/flex-css\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/flex-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/thumbnail-flex-css-vippro.png","datePublished":"2024-05-15T01:52:03+00:00","dateModified":"2025-07-19T17:54:32+00:00","description":"Flex CSS l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m li\u00ean quan \u0111\u1ebfn vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean web. V\u1eady ch\u00ednh x\u00e1c th\u00ec Flex, hay Flexbox trong CSS l\u00e0 g\u00ec?","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/flex-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/flex-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/flex-css\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/thumbnail-flex-css-vippro.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/thumbnail-flex-css-vippro.png","width":2112,"height":1112},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/flex-css\/#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":"Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS"}]},{"@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\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/68563","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\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=68563"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/68563\/revisions"}],"predecessor-version":[{"id":89710,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/68563\/revisions\/89710"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/68660"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=68563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=68563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=68563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}