[{"data":1,"prerenderedAt":1631},["ShallowReactive",2],{"guide-css-flexbox-tutorial":3},{"id":4,"title":5,"body":6,"date":1623,"description":1624,"extension":1625,"meta":1626,"navigation":940,"path":1627,"readingTime":311,"seo":1628,"stem":1629,"__hash__":1630},"guides\u002Fguides\u002Fcss-flexbox-tutorial.md","CSS Flexbox Tutorial: Complete Guide to Flex Properties",{"type":7,"value":8,"toc":1594},"minimark",[9,14,18,21,25,33,37,101,107,110,113,173,211,214,217,260,314,320,323,326,399,402,408,467,470,477,540,543,546,607,613,617,620,623,630,674,685,688,694,724,731,734,737,770,774,788,891,894,900,968,971,977,1021,1027,1031,1035,1190,1194,1308,1312,1388,1392,1502,1506,1548,1552,1563,1567,1590],[10,11,13],"h2",{"id":12},"what-is-css-flexbox","What Is CSS Flexbox?",[15,16,17],"p",{},"CSS Flexbox is a one-dimensional layout model that arranges items in rows or columns. Unlike block or inline layouts, flexbox distributes space dynamically — items grow to fill available room or shrink to avoid overflow, all without hardcoded widths.",[15,19,20],{},"Flexbox replaces float-based layouts, inline-block hacks, and table-based alignment. It handles distribution, alignment, and ordering in a declarative way.",[10,22,24],{"id":23},"flex-container-properties","Flex Container Properties",[15,26,27,28,32],{},"A flex container is the parent element with ",[29,30,31],"code",{},"display: flex",". These properties control how its children behave.",[34,35,36],"h3",{"id":36},"display",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-css shiki shiki-themes github-light github-dark",".container {\n  display: flex;       \u002F* block-level flex container *\u002F\n  display: inline-flex; \u002F* inline-level flex container *\u002F\n}\n","css","",[29,45,46,59,79,95],{"__ignoreMap":43},[47,48,51,55],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sScJk",".container",[47,56,58],{"class":57},"sVt8B"," {\n",[47,60,62,66,69,72,75],{"class":49,"line":61},2,[47,63,65],{"class":64},"sj4cs","  display",[47,67,68],{"class":57},": ",[47,70,71],{"class":64},"flex",[47,73,74],{"class":57},";       ",[47,76,78],{"class":77},"sJ8bj","\u002F* block-level flex container *\u002F\n",[47,80,82,84,86,89,92],{"class":49,"line":81},3,[47,83,65],{"class":64},[47,85,68],{"class":57},[47,87,88],{"class":64},"inline-flex",[47,90,91],{"class":57},"; ",[47,93,94],{"class":77},"\u002F* inline-level flex container *\u002F\n",[47,96,98],{"class":49,"line":97},4,[47,99,100],{"class":57},"}\n",[15,102,103,104,106],{},"Use ",[29,105,88],{}," when the container itself should sit inline with other content — for example, a tag chip or a small icon group.",[34,108,109],{"id":109},"flex-direction",[15,111,112],{},"Sets the main axis — the direction items flow.",[114,115,116,129],"table",{},[117,118,119],"thead",{},[120,121,122,126],"tr",{},[123,124,125],"th",{},"Value",[123,127,128],{},"Main Axis",[130,131,132,143,153,163],"tbody",{},[120,133,134,140],{},[135,136,137],"td",{},[29,138,139],{},"row",[135,141,142],{},"Horizontal, left→right (default)",[120,144,145,150],{},[135,146,147],{},[29,148,149],{},"row-reverse",[135,151,152],{},"Horizontal, right→left",[120,154,155,160],{},[135,156,157],{},[29,158,159],{},"column",[135,161,162],{},"Vertical, top→bottom",[120,164,165,170],{},[135,166,167],{},[29,168,169],{},"column-reverse",[135,171,172],{},"Vertical, bottom→top",[38,174,176],{"className":40,"code":175,"language":42,"meta":43,"style":43},".vertical-stack {\n  display: flex;\n  flex-direction: column;\n}\n",[29,177,178,185,196,207],{"__ignoreMap":43},[47,179,180,183],{"class":49,"line":50},[47,181,182],{"class":53},".vertical-stack",[47,184,58],{"class":57},[47,186,187,189,191,193],{"class":49,"line":61},[47,188,65],{"class":64},[47,190,68],{"class":57},[47,192,71],{"class":64},[47,194,195],{"class":57},";\n",[47,197,198,201,203,205],{"class":49,"line":81},[47,199,200],{"class":64},"  flex-direction",[47,202,68],{"class":57},[47,204,159],{"class":64},[47,206,195],{"class":57},[47,208,209],{"class":49,"line":97},[47,210,100],{"class":57},[34,212,213],{"id":213},"flex-wrap",[15,215,216],{},"Controls whether items wrap to new lines when they exceed container width.",[114,218,219,228],{},[117,220,221],{},[120,222,223,225],{},[123,224,125],{},[123,226,227],{},"Behavior",[130,229,230,240,250],{},[120,231,232,237],{},[135,233,234],{},[29,235,236],{},"nowrap",[135,238,239],{},"Items shrink to fit one line (default)",[120,241,242,247],{},[135,243,244],{},[29,245,246],{},"wrap",[135,248,249],{},"Items wrap onto new lines",[120,251,252,257],{},[135,253,254],{},[29,255,256],{},"wrap-reverse",[135,258,259],{},"Items wrap in reverse order",[38,261,263],{"className":40,"code":262,"language":42,"meta":43,"style":43},".responsive-cards {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n}\n",[29,264,265,272,282,293,309],{"__ignoreMap":43},[47,266,267,270],{"class":49,"line":50},[47,268,269],{"class":53},".responsive-cards",[47,271,58],{"class":57},[47,273,274,276,278,280],{"class":49,"line":61},[47,275,65],{"class":64},[47,277,68],{"class":57},[47,279,71],{"class":64},[47,281,195],{"class":57},[47,283,284,287,289,291],{"class":49,"line":81},[47,285,286],{"class":64},"  flex-wrap",[47,288,68],{"class":57},[47,290,246],{"class":64},[47,292,195],{"class":57},[47,294,295,298,300,303,307],{"class":49,"line":97},[47,296,297],{"class":64},"  gap",[47,299,68],{"class":57},[47,301,302],{"class":64},"1",[47,304,306],{"class":305},"szBVR","rem",[47,308,195],{"class":57},[47,310,312],{"class":49,"line":311},5,[47,313,100],{"class":57},[15,315,316,317,319],{},"Without ",[29,318,213],{},", items squeeze to fit. With it, items maintain their size and flow into rows — essential for responsive design.",[34,321,322],{"id":322},"justify-content",[15,324,325],{},"Distributes free space along the main axis.",[114,327,328,337],{},[117,329,330],{},[120,331,332,334],{},[123,333,125],{},[123,335,336],{},"Effect",[130,338,339,349,359,369,379,389],{},[120,340,341,346],{},[135,342,343],{},[29,344,345],{},"flex-start",[135,347,348],{},"Pack to start",[120,350,351,356],{},[135,352,353],{},[29,354,355],{},"flex-end",[135,357,358],{},"Pack to end",[120,360,361,366],{},[135,362,363],{},[29,364,365],{},"center",[135,367,368],{},"Center the group",[120,370,371,376],{},[135,372,373],{},[29,374,375],{},"space-between",[135,377,378],{},"Even gaps, no edge padding",[120,380,381,386],{},[135,382,383],{},[29,384,385],{},"space-around",[135,387,388],{},"Equal space around each item",[120,390,391,396],{},[135,392,393],{},[29,394,395],{},"space-evenly",[135,397,398],{},"Equal space everywhere",[34,400,401],{"id":401},"align-items",[15,403,404,405,407],{},"Aligns items along the cross axis (perpendicular to ",[29,406,109],{},").",[114,409,410,418],{},[117,411,412],{},[120,413,414,416],{},[123,415,125],{},[123,417,336],{},[130,419,420,430,439,448,457],{},[120,421,422,427],{},[135,423,424],{},[29,425,426],{},"stretch",[135,428,429],{},"Fill container height (default)",[120,431,432,436],{},[135,433,434],{},[29,435,345],{},[135,437,438],{},"Align to cross-start",[120,440,441,445],{},[135,442,443],{},[29,444,355],{},[135,446,447],{},"Align to cross-end",[120,449,450,454],{},[135,451,452],{},[29,453,365],{},[135,455,456],{},"Center on cross axis",[120,458,459,464],{},[135,460,461],{},[29,462,463],{},"baseline",[135,465,466],{},"Align by text baseline",[34,468,469],{"id":469},"align-content",[15,471,472,473,476],{},"Controls spacing between rows when ",[29,474,475],{},"flex-wrap: wrap"," creates multiple lines. Has no effect with a single line.",[38,478,480],{"className":40,"code":479,"language":42,"meta":43,"style":43},".multi-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-content: space-between;\n  height: 600px;\n}\n",[29,481,482,489,499,509,520,535],{"__ignoreMap":43},[47,483,484,487],{"class":49,"line":50},[47,485,486],{"class":53},".multi-row",[47,488,58],{"class":57},[47,490,491,493,495,497],{"class":49,"line":61},[47,492,65],{"class":64},[47,494,68],{"class":57},[47,496,71],{"class":64},[47,498,195],{"class":57},[47,500,501,503,505,507],{"class":49,"line":81},[47,502,286],{"class":64},[47,504,68],{"class":57},[47,506,246],{"class":64},[47,508,195],{"class":57},[47,510,511,514,516,518],{"class":49,"line":97},[47,512,513],{"class":64},"  align-content",[47,515,68],{"class":57},[47,517,375],{"class":64},[47,519,195],{"class":57},[47,521,522,525,527,530,533],{"class":49,"line":311},[47,523,524],{"class":64},"  height",[47,526,68],{"class":57},[47,528,529],{"class":64},"600",[47,531,532],{"class":305},"px",[47,534,195],{"class":57},[47,536,538],{"class":49,"line":537},6,[47,539,100],{"class":57},[34,541,542],{"id":542},"gap",[15,544,545],{},"Sets spacing between flex items without using margins.",[38,547,549],{"className":40,"code":548,"language":42,"meta":43,"style":43},".container {\n  display: flex;\n  gap: 1rem;            \u002F* row and column gap *\u002F\n  gap: 1rem 2rem;       \u002F* row-gap column-gap *\u002F\n}\n",[29,550,551,557,567,583,603],{"__ignoreMap":43},[47,552,553,555],{"class":49,"line":50},[47,554,54],{"class":53},[47,556,58],{"class":57},[47,558,559,561,563,565],{"class":49,"line":61},[47,560,65],{"class":64},[47,562,68],{"class":57},[47,564,71],{"class":64},[47,566,195],{"class":57},[47,568,569,571,573,575,577,580],{"class":49,"line":81},[47,570,297],{"class":64},[47,572,68],{"class":57},[47,574,302],{"class":64},[47,576,306],{"class":305},[47,578,579],{"class":57},";            ",[47,581,582],{"class":77},"\u002F* row and column gap *\u002F\n",[47,584,585,587,589,591,593,596,598,600],{"class":49,"line":97},[47,586,297],{"class":64},[47,588,68],{"class":57},[47,590,302],{"class":64},[47,592,306],{"class":305},[47,594,595],{"class":64}," 2",[47,597,306],{"class":305},[47,599,74],{"class":57},[47,601,602],{"class":77},"\u002F* row-gap column-gap *\u002F\n",[47,604,605],{"class":49,"line":311},[47,606,100],{"class":57},[15,608,609,610,612],{},"Using ",[29,611,542],{}," instead of margins avoids the double-spacing problem where adjacent margins collapse or stack unexpectedly.",[10,614,616],{"id":615},"flex-item-properties","Flex Item Properties",[15,618,619],{},"Flex items are direct children of a flex container. These properties control individual item behavior.",[34,621,622],{"id":622},"flex-grow",[15,624,625,626,629],{},"Defines how much an item should grow relative to siblings when extra space is available. Default is ",[29,627,628],{},"0"," (no growth).",[38,631,633],{"className":40,"code":632,"language":42,"meta":43,"style":43},".sidebar { flex-grow: 0; }  \u002F* stays at its natural width *\u002F\n.main    { flex-grow: 1; }  \u002F* takes all remaining space *\u002F\n",[29,634,635,655],{"__ignoreMap":43},[47,636,637,640,643,645,647,649,652],{"class":49,"line":50},[47,638,639],{"class":53},".sidebar",[47,641,642],{"class":57}," { ",[47,644,622],{"class":64},[47,646,68],{"class":57},[47,648,628],{"class":64},[47,650,651],{"class":57},"; }  ",[47,653,654],{"class":77},"\u002F* stays at its natural width *\u002F\n",[47,656,657,660,663,665,667,669,671],{"class":49,"line":61},[47,658,659],{"class":53},".main",[47,661,662],{"class":57},"    { ",[47,664,622],{"class":64},[47,666,68],{"class":57},[47,668,302],{"class":64},[47,670,651],{"class":57},[47,672,673],{"class":77},"\u002F* takes all remaining space *\u002F\n",[15,675,676,677,680,681,684],{},"If two items both have ",[29,678,679],{},"flex-grow: 1",", they share extra space equally. If one has ",[29,682,683],{},"flex-grow: 2",", it gets double the share.",[34,686,687],{"id":687},"flex-shrink",[15,689,690,691,693],{},"Controls how much an item shrinks when space is insufficient. Default is ",[29,692,302],{}," (shrink equally).",[38,695,697],{"className":40,"code":696,"language":42,"meta":43,"style":43},".no-shrink {\n  flex-shrink: 0; \u002F* never shrink below its basis width *\u002F\n}\n",[29,698,699,706,720],{"__ignoreMap":43},[47,700,701,704],{"class":49,"line":50},[47,702,703],{"class":53},".no-shrink",[47,705,58],{"class":57},[47,707,708,711,713,715,717],{"class":49,"line":61},[47,709,710],{"class":64},"  flex-shrink",[47,712,68],{"class":57},[47,714,628],{"class":64},[47,716,91],{"class":57},[47,718,719],{"class":77},"\u002F* never shrink below its basis width *\u002F\n",[47,721,722],{"class":49,"line":81},[47,723,100],{"class":57},[15,725,726,727,730],{},"Set ",[29,728,729],{},"flex-shrink: 0"," on items like logos or fixed-width sidebars that should not collapse.",[34,732,733],{"id":733},"flex-basis",[15,735,736],{},"Sets the initial size of an item before growing or shrinking. Accepts any width value.",[38,738,740],{"className":40,"code":739,"language":42,"meta":43,"style":43},".card {\n  flex-basis: 280px; \u002F* start at 280px, then grow\u002Fshrink *\u002F\n}\n",[29,741,742,749,766],{"__ignoreMap":43},[47,743,744,747],{"class":49,"line":50},[47,745,746],{"class":53},".card",[47,748,58],{"class":57},[47,750,751,754,756,759,761,763],{"class":49,"line":61},[47,752,753],{"class":64},"  flex-basis",[47,755,68],{"class":57},[47,757,758],{"class":64},"280",[47,760,532],{"class":305},[47,762,91],{"class":57},[47,764,765],{"class":77},"\u002F* start at 280px, then grow\u002Fshrink *\u002F\n",[47,767,768],{"class":49,"line":81},[47,769,100],{"class":57},[34,771,773],{"id":772},"the-flex-shorthand","The flex Shorthand",[15,775,776,778,779,781,782,784,785,787],{},[29,777,71],{}," combines ",[29,780,622],{},", ",[29,783,687],{},", and ",[29,786,733],{}," in one declaration.",[38,789,791],{"className":40,"code":790,"language":42,"meta":43,"style":43},".item {\n  flex: 1;             \u002F* flex: 1 1 0% *\u002F\n  flex: 1 1 auto;      \u002F* grow, shrink, use content size *\u002F\n  flex: 0 0 200px;     \u002F* fixed 200px, no grow, no shrink *\u002F\n  flex: auto;          \u002F* flex: 1 1 auto *\u002F\n  flex: none;          \u002F* flex: 0 0 auto — item stays at content size *\u002F\n}\n",[29,792,793,800,815,835,857,872,886],{"__ignoreMap":43},[47,794,795,798],{"class":49,"line":50},[47,796,797],{"class":53},".item",[47,799,58],{"class":57},[47,801,802,805,807,809,812],{"class":49,"line":61},[47,803,804],{"class":64},"  flex",[47,806,68],{"class":57},[47,808,302],{"class":64},[47,810,811],{"class":57},";             ",[47,813,814],{"class":77},"\u002F* flex: 1 1 0% *\u002F\n",[47,816,817,819,821,823,826,829,832],{"class":49,"line":81},[47,818,804],{"class":64},[47,820,68],{"class":57},[47,822,302],{"class":64},[47,824,825],{"class":64}," 1",[47,827,828],{"class":64}," auto",[47,830,831],{"class":57},";      ",[47,833,834],{"class":77},"\u002F* grow, shrink, use content size *\u002F\n",[47,836,837,839,841,843,846,849,851,854],{"class":49,"line":97},[47,838,804],{"class":64},[47,840,68],{"class":57},[47,842,628],{"class":64},[47,844,845],{"class":64}," 0",[47,847,848],{"class":64}," 200",[47,850,532],{"class":305},[47,852,853],{"class":57},";     ",[47,855,856],{"class":77},"\u002F* fixed 200px, no grow, no shrink *\u002F\n",[47,858,859,861,863,866,869],{"class":49,"line":311},[47,860,804],{"class":64},[47,862,68],{"class":57},[47,864,865],{"class":64},"auto",[47,867,868],{"class":57},";          ",[47,870,871],{"class":77},"\u002F* flex: 1 1 auto *\u002F\n",[47,873,874,876,878,881,883],{"class":49,"line":537},[47,875,804],{"class":64},[47,877,68],{"class":57},[47,879,880],{"class":64},"none",[47,882,868],{"class":57},[47,884,885],{"class":77},"\u002F* flex: 0 0 auto — item stays at content size *\u002F\n",[47,887,889],{"class":49,"line":888},7,[47,890,100],{"class":57},[34,892,893],{"id":893},"align-self",[15,895,896,897,899],{},"Overrides ",[29,898,401],{}," for a single item.",[38,901,903],{"className":40,"code":902,"language":42,"meta":43,"style":43},".container {\n  display: flex;\n  align-items: flex-start;\n}\n\n.pin-bottom {\n  align-self: flex-end; \u002F* this item aligns to the bottom *\u002F\n}\n",[29,904,905,911,921,932,936,942,949,963],{"__ignoreMap":43},[47,906,907,909],{"class":49,"line":50},[47,908,54],{"class":53},[47,910,58],{"class":57},[47,912,913,915,917,919],{"class":49,"line":61},[47,914,65],{"class":64},[47,916,68],{"class":57},[47,918,71],{"class":64},[47,920,195],{"class":57},[47,922,923,926,928,930],{"class":49,"line":81},[47,924,925],{"class":64},"  align-items",[47,927,68],{"class":57},[47,929,345],{"class":64},[47,931,195],{"class":57},[47,933,934],{"class":49,"line":97},[47,935,100],{"class":57},[47,937,938],{"class":49,"line":311},[47,939,941],{"emptyLinePlaceholder":940},true,"\n",[47,943,944,947],{"class":49,"line":537},[47,945,946],{"class":53},".pin-bottom",[47,948,58],{"class":57},[47,950,951,954,956,958,960],{"class":49,"line":888},[47,952,953],{"class":64},"  align-self",[47,955,68],{"class":57},[47,957,355],{"class":64},[47,959,91],{"class":57},[47,961,962],{"class":77},"\u002F* this item aligns to the bottom *\u002F\n",[47,964,966],{"class":49,"line":965},8,[47,967,100],{"class":57},[34,969,970],{"id":970},"order",[15,972,973,974,976],{},"Changes the visual order of items without modifying the DOM. Default is ",[29,975,628],{},".",[38,978,980],{"className":40,"code":979,"language":42,"meta":43,"style":43},".first-visual { order: -1; }  \u002F* appears before siblings *\u002F\n.last-visual  { order: 1; }   \u002F* appears after siblings *\u002F\n",[29,981,982,1001],{"__ignoreMap":43},[47,983,984,987,989,991,993,996,998],{"class":49,"line":50},[47,985,986],{"class":53},".first-visual",[47,988,642],{"class":57},[47,990,970],{"class":64},[47,992,68],{"class":57},[47,994,995],{"class":64},"-1",[47,997,651],{"class":57},[47,999,1000],{"class":77},"\u002F* appears before siblings *\u002F\n",[47,1002,1003,1006,1009,1011,1013,1015,1018],{"class":49,"line":61},[47,1004,1005],{"class":53},".last-visual",[47,1007,1008],{"class":57},"  { ",[47,1010,970],{"class":64},[47,1012,68],{"class":57},[47,1014,302],{"class":64},[47,1016,1017],{"class":57},"; }   ",[47,1019,1020],{"class":77},"\u002F* appears after siblings *\u002F\n",[15,1022,1023,1024,1026],{},"Avoid ",[29,1025,970],{}," for meaningful content sequence — screen readers follow DOM order, not visual order.",[10,1028,1030],{"id":1029},"real-world-layout-patterns","Real-World Layout Patterns",[34,1032,1034],{"id":1033},"holy-grail-layout","Holy Grail Layout",[38,1036,1038],{"className":40,"code":1037,"language":42,"meta":43,"style":43},".layout {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.layout-body {\n  display: flex;\n  flex: 1;\n}\n\n.sidebar  { flex: 0 0 240px; }\n.main     { flex: 1; }\n.aside    { flex: 0 0 180px; }\n",[29,1039,1040,1047,1057,1067,1082,1086,1090,1097,1107,1118,1123,1128,1151,1167],{"__ignoreMap":43},[47,1041,1042,1045],{"class":49,"line":50},[47,1043,1044],{"class":53},".layout",[47,1046,58],{"class":57},[47,1048,1049,1051,1053,1055],{"class":49,"line":61},[47,1050,65],{"class":64},[47,1052,68],{"class":57},[47,1054,71],{"class":64},[47,1056,195],{"class":57},[47,1058,1059,1061,1063,1065],{"class":49,"line":81},[47,1060,200],{"class":64},[47,1062,68],{"class":57},[47,1064,159],{"class":64},[47,1066,195],{"class":57},[47,1068,1069,1072,1074,1077,1080],{"class":49,"line":97},[47,1070,1071],{"class":64},"  min-height",[47,1073,68],{"class":57},[47,1075,1076],{"class":64},"100",[47,1078,1079],{"class":305},"vh",[47,1081,195],{"class":57},[47,1083,1084],{"class":49,"line":311},[47,1085,100],{"class":57},[47,1087,1088],{"class":49,"line":537},[47,1089,941],{"emptyLinePlaceholder":940},[47,1091,1092,1095],{"class":49,"line":888},[47,1093,1094],{"class":53},".layout-body",[47,1096,58],{"class":57},[47,1098,1099,1101,1103,1105],{"class":49,"line":965},[47,1100,65],{"class":64},[47,1102,68],{"class":57},[47,1104,71],{"class":64},[47,1106,195],{"class":57},[47,1108,1110,1112,1114,1116],{"class":49,"line":1109},9,[47,1111,804],{"class":64},[47,1113,68],{"class":57},[47,1115,302],{"class":64},[47,1117,195],{"class":57},[47,1119,1121],{"class":49,"line":1120},10,[47,1122,100],{"class":57},[47,1124,1126],{"class":49,"line":1125},11,[47,1127,941],{"emptyLinePlaceholder":940},[47,1129,1131,1133,1135,1137,1139,1141,1143,1146,1148],{"class":49,"line":1130},12,[47,1132,639],{"class":53},[47,1134,1008],{"class":57},[47,1136,71],{"class":64},[47,1138,68],{"class":57},[47,1140,628],{"class":64},[47,1142,845],{"class":64},[47,1144,1145],{"class":64}," 240",[47,1147,532],{"class":305},[47,1149,1150],{"class":57},"; }\n",[47,1152,1154,1156,1159,1161,1163,1165],{"class":49,"line":1153},13,[47,1155,659],{"class":53},[47,1157,1158],{"class":57},"     { ",[47,1160,71],{"class":64},[47,1162,68],{"class":57},[47,1164,302],{"class":64},[47,1166,1150],{"class":57},[47,1168,1170,1173,1175,1177,1179,1181,1183,1186,1188],{"class":49,"line":1169},14,[47,1171,1172],{"class":53},".aside",[47,1174,662],{"class":57},[47,1176,71],{"class":64},[47,1178,68],{"class":57},[47,1180,628],{"class":64},[47,1182,845],{"class":64},[47,1184,1185],{"class":64}," 180",[47,1187,532],{"class":305},[47,1189,1150],{"class":57},[34,1191,1193],{"id":1192},"equal-height-card-row","Equal-Height Card Row",[38,1195,1197],{"className":40,"code":1196,"language":42,"meta":43,"style":43},".cards {\n  display: flex;\n  gap: 1.5rem;\n}\n\n.card {\n  flex: 1; \u002F* all cards same width *\u002F\n  display: flex;\n  flex-direction: column;\n}\n\n.card-body {\n  flex: 1; \u002F* stretch to match tallest card *\u002F\n}\n",[29,1198,1199,1206,1216,1229,1233,1237,1243,1256,1266,1276,1280,1284,1291,1304],{"__ignoreMap":43},[47,1200,1201,1204],{"class":49,"line":50},[47,1202,1203],{"class":53},".cards",[47,1205,58],{"class":57},[47,1207,1208,1210,1212,1214],{"class":49,"line":61},[47,1209,65],{"class":64},[47,1211,68],{"class":57},[47,1213,71],{"class":64},[47,1215,195],{"class":57},[47,1217,1218,1220,1222,1225,1227],{"class":49,"line":81},[47,1219,297],{"class":64},[47,1221,68],{"class":57},[47,1223,1224],{"class":64},"1.5",[47,1226,306],{"class":305},[47,1228,195],{"class":57},[47,1230,1231],{"class":49,"line":97},[47,1232,100],{"class":57},[47,1234,1235],{"class":49,"line":311},[47,1236,941],{"emptyLinePlaceholder":940},[47,1238,1239,1241],{"class":49,"line":537},[47,1240,746],{"class":53},[47,1242,58],{"class":57},[47,1244,1245,1247,1249,1251,1253],{"class":49,"line":888},[47,1246,804],{"class":64},[47,1248,68],{"class":57},[47,1250,302],{"class":64},[47,1252,91],{"class":57},[47,1254,1255],{"class":77},"\u002F* all cards same width *\u002F\n",[47,1257,1258,1260,1262,1264],{"class":49,"line":965},[47,1259,65],{"class":64},[47,1261,68],{"class":57},[47,1263,71],{"class":64},[47,1265,195],{"class":57},[47,1267,1268,1270,1272,1274],{"class":49,"line":1109},[47,1269,200],{"class":64},[47,1271,68],{"class":57},[47,1273,159],{"class":64},[47,1275,195],{"class":57},[47,1277,1278],{"class":49,"line":1120},[47,1279,100],{"class":57},[47,1281,1282],{"class":49,"line":1125},[47,1283,941],{"emptyLinePlaceholder":940},[47,1285,1286,1289],{"class":49,"line":1130},[47,1287,1288],{"class":53},".card-body",[47,1290,58],{"class":57},[47,1292,1293,1295,1297,1299,1301],{"class":49,"line":1153},[47,1294,804],{"class":64},[47,1296,68],{"class":57},[47,1298,302],{"class":64},[47,1300,91],{"class":57},[47,1302,1303],{"class":77},"\u002F* stretch to match tallest card *\u002F\n",[47,1305,1306],{"class":49,"line":1169},[47,1307,100],{"class":57},[34,1309,1311],{"id":1310},"sticky-footer","Sticky Footer",[38,1313,1315],{"className":40,"code":1314,"language":42,"meta":43,"style":43},".page {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.content {\n  flex: 1; \u002F* pushes footer to bottom *\u002F\n}\n",[29,1316,1317,1324,1334,1344,1356,1360,1364,1371,1384],{"__ignoreMap":43},[47,1318,1319,1322],{"class":49,"line":50},[47,1320,1321],{"class":53},".page",[47,1323,58],{"class":57},[47,1325,1326,1328,1330,1332],{"class":49,"line":61},[47,1327,65],{"class":64},[47,1329,68],{"class":57},[47,1331,71],{"class":64},[47,1333,195],{"class":57},[47,1335,1336,1338,1340,1342],{"class":49,"line":81},[47,1337,200],{"class":64},[47,1339,68],{"class":57},[47,1341,159],{"class":64},[47,1343,195],{"class":57},[47,1345,1346,1348,1350,1352,1354],{"class":49,"line":97},[47,1347,1071],{"class":64},[47,1349,68],{"class":57},[47,1351,1076],{"class":64},[47,1353,1079],{"class":305},[47,1355,195],{"class":57},[47,1357,1358],{"class":49,"line":311},[47,1359,100],{"class":57},[47,1361,1362],{"class":49,"line":537},[47,1363,941],{"emptyLinePlaceholder":940},[47,1365,1366,1369],{"class":49,"line":888},[47,1367,1368],{"class":53},".content",[47,1370,58],{"class":57},[47,1372,1373,1375,1377,1379,1381],{"class":49,"line":965},[47,1374,804],{"class":64},[47,1376,68],{"class":57},[47,1378,302],{"class":64},[47,1380,91],{"class":57},[47,1382,1383],{"class":77},"\u002F* pushes footer to bottom *\u002F\n",[47,1385,1386],{"class":49,"line":1109},[47,1387,100],{"class":57},[10,1389,1391],{"id":1390},"common-pitfalls-and-solutions","Common Pitfalls and Solutions",[114,1393,1394,1407],{},[117,1395,1396],{},[120,1397,1398,1401,1404],{},[123,1399,1400],{},"Problem",[123,1402,1403],{},"Cause",[123,1405,1406],{},"Fix",[130,1408,1409,1424,1443,1457,1470,1489],{},[120,1410,1411,1414,1419],{},[135,1412,1413],{},"Items overflow container",[135,1415,1416,1417],{},"Missing ",[29,1418,213],{},[135,1420,1421,1422],{},"Add ",[29,1423,475],{},[120,1425,1426,1429,1435],{},[135,1427,1428],{},"Item shrinks below min-width",[135,1430,1431,1432],{},"Default ",[29,1433,1434],{},"flex-shrink: 1",[135,1436,726,1437,1439,1440],{},[29,1438,729],{}," or ",[29,1441,1442],{},"min-width",[120,1444,1445,1448,1451],{},[135,1446,1447],{},"Unequal card heights",[135,1449,1450],{},"Items not stretching",[135,1452,1421,1453,1456],{},[29,1454,1455],{},"display: flex; flex-direction: column"," on parent",[120,1458,1459,1462,1465],{},[135,1460,1461],{},"Double spacing between items",[135,1463,1464],{},"Using margins on both sides",[135,1466,1467,1468],{},"Replace with ",[29,1469,542],{},[120,1471,1472,1475,1481],{},[135,1473,1474],{},"Content cut off in flex item",[135,1476,1477,1480],{},[29,1478,1479],{},"min-width: auto"," allows shrinking",[135,1482,726,1483,1439,1486],{},[29,1484,1485],{},"min-width: 0",[29,1487,1488],{},"overflow: hidden",[120,1490,1491,1496,1499],{},[135,1492,1493,1495],{},[29,1494,401],{}," not working",[135,1497,1498],{},"Single line with no height",[135,1500,1501],{},"Give the container an explicit height",[10,1503,1505],{"id":1504},"key-takeaways","Key Takeaways",[1507,1508,1509,1513,1523,1533,1538,1543],"ul",{},[1510,1511,1512],"li",{},"Flexbox is one-dimensional: items flow along one axis at a time",[1510,1514,1515,1516,781,1518,781,1520,1522],{},"Container properties (",[29,1517,109],{},[29,1519,322],{},[29,1521,401],{},") control the layout",[1510,1524,1525,1526,781,1528,781,1530,1532],{},"Item properties (",[29,1527,622],{},[29,1529,687],{},[29,1531,733],{},") control individual sizing",[1510,1534,103,1535,1537],{},[29,1536,542],{}," for spacing instead of margins",[1510,1539,1540,1542],{},[29,1541,475],{}," is essential for responsive layouts",[1510,1544,726,1545,1547],{},[29,1546,1485],{}," on flex items that contain text or overflow content",[10,1549,1551],{"id":1550},"try-it-yourself","Try It Yourself",[15,1553,1554,1555,1562],{},"Experiment with every flex property using our ",[1556,1557,1561],"a",{"href":1558,"rel":1559},"https:\u002F\u002Ftoolboxes.site\u002Ftools\u002Fflexbox-generator",[1560],"nofollow","Flexbox Generator",". Toggle grow, shrink, wrap, and alignment — see the layout update live and copy the CSS.",[10,1564,1566],{"id":1565},"related-guides","Related Guides",[1507,1568,1569,1576,1583],{},[1510,1570,1571,1575],{},[1556,1572,1574],{"href":1573},"\u002Fguides\u002Fflexbox-generator-guide","Flexbox Generator Guide"," — Visual walkthrough of building flex layouts with a generator tool",[1510,1577,1578,1582],{},[1556,1579,1581],{"href":1580},"\u002Fguides\u002Fcss-layout-methods","CSS Layout Methods"," — Compare Flexbox against Grid, Float, and Positioning",[1510,1584,1585,1589],{},[1556,1586,1588],{"href":1587},"\u002Fguides\u002Fcss-gradient-guide","CSS Gradient Guide"," — Add visual depth to your flex layouts with gradients",[1591,1592,1593],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":43,"searchDepth":61,"depth":61,"links":1595},[1596,1597,1606,1614,1619,1620,1621,1622],{"id":12,"depth":61,"text":13},{"id":23,"depth":61,"text":24,"children":1598},[1599,1600,1601,1602,1603,1604,1605],{"id":36,"depth":81,"text":36},{"id":109,"depth":81,"text":109},{"id":213,"depth":81,"text":213},{"id":322,"depth":81,"text":322},{"id":401,"depth":81,"text":401},{"id":469,"depth":81,"text":469},{"id":542,"depth":81,"text":542},{"id":615,"depth":61,"text":616,"children":1607},[1608,1609,1610,1611,1612,1613],{"id":622,"depth":81,"text":622},{"id":687,"depth":81,"text":687},{"id":733,"depth":81,"text":733},{"id":772,"depth":81,"text":773},{"id":893,"depth":81,"text":893},{"id":970,"depth":81,"text":970},{"id":1029,"depth":61,"text":1030,"children":1615},[1616,1617,1618],{"id":1033,"depth":81,"text":1034},{"id":1192,"depth":81,"text":1193},{"id":1310,"depth":81,"text":1311},{"id":1390,"depth":61,"text":1391},{"id":1504,"depth":61,"text":1505},{"id":1550,"depth":61,"text":1551},{"id":1565,"depth":61,"text":1566},"2026-05-28","Complete CSS Flexbox tutorial covering all flex container and flex item properties. Learn flex-direction, flex-wrap, flex-grow, and more.","md",{"immutable":940},"\u002Fguides\u002Fcss-flexbox-tutorial",{"title":5,"description":1624},"guides\u002Fcss-flexbox-tutorial","GAacGLgQ6JdFGgKXzhwy4m1u9e2C6hT1irRRjqyoOX0",1780401329363]