From f171162eae77830e433e0e4e4fb40b0ca15e4fbd Mon Sep 17 00:00:00 2001 From: Talha Date: Sat, 31 Jan 2026 15:32:31 +0000 Subject: [PATCH 1/3] Create documentation for 'align-content' flexbox property Added documentation for the 'align-content' property in flexbox, including its syntax, effects, and examples. --- .../terms/align-content/align-content.md | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 content/css/concepts/flexbox/terms/align-content/align-content.md diff --git a/content/css/concepts/flexbox/terms/align-content/align-content.md b/content/css/concepts/flexbox/terms/align-content/align-content.md new file mode 100644 index 00000000000..34e638128a6 --- /dev/null +++ b/content/css/concepts/flexbox/terms/align-content/align-content.md @@ -0,0 +1,63 @@ +--- +Title: 'align-content' +Description: 'A flexbox property that controls the spacing between rows/columns of flex items, provided there are multiple lines of content.' +Subjects: + - 'Web Development' + - 'Web Design' +Tags: + - 'Flexbox' + - 'Layout' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' + - 'paths/full-stack-engineer-career-path' +--- + +A flexbox property that controls the spacing between rows/columns of flex items, provided there are multiple lines of content. + +However, it only has an effect when: + +- `flex-wrap` is set to `wrap` or `wrap-reverse` +- There is extra space in the cross-axis of the container +- If all items fit on one line, `align-content` will have no effect + +--- + +## Syntax + +```css +#section-c { + display: flex; + flex-wrap: wrap; + align-content: stretch; +}; +``` + +The `` can be any of the following: + +- stretch +- flex-start +- flex-end +- center +- space-between +- space-around +- space-evenly + +## Example + +A container example with flex items that wrap into multiple rows, align-content controls the space between those rows and instead spreads them out vertically. + +```css +.container { + display: flex; + flex-wrap: wrap; + align-content: space-between; + width: 220px; + height: 300px; + border: 3px solid black; +} +``` + +The output of the above code block is shown below: + +![Image shows the use of a container example with flex items that wrap into multiple rows, align-content controls the space between those rows and instead spreads them out vertically.](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-align-content-example-output.png) From 0acf5325f6d0da1538f7c67415b2169da4607f0e Mon Sep 17 00:00:00 2001 From: Talha Date: Sat, 31 Jan 2026 16:00:09 +0000 Subject: [PATCH 2/3] css-align-content-example-output.png An image example used for my align-content #8196 --- media/css-align-content-example-output.png | Bin 0 -> 2720 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 media/css-align-content-example-output.png diff --git a/media/css-align-content-example-output.png b/media/css-align-content-example-output.png new file mode 100644 index 0000000000000000000000000000000000000000..0eb8a4613dfe62fb050aaa80c656d5d983fb992e GIT binary patch literal 2720 zcmc&$_g52!7LE_AGDM(Cf)J2`P(Kzj>zf@k4+#60ZWj85XB%ELRNY2KWO{Tc|Y8B&b{CH&i&!uFV)%6`lQTR82|uq z($>bp1pqk0I?S6+96R*0wBW77a3sRT+8od@q4xf;I2v%>;W_|7%9a)SeRWt%huU~V z007|R|Jaf2HSQe%K*q?{;yOCo`@>RLVDWm~Yi?PBTdwcZpxkq+@ckRNo4leTyB}nB zN8ZrU%NZz#PP~wVAoX;9Jujz1NwL1)r1B(1G04x{;3@31yB(VCT+r?Qq@8vP`qD@} zGB9ney)>21F5sj~z9Xo4V#x=8Ew? z&Ex5hFxie6do})6@H8pjA=lMNC@v%xXOOtlpcoO=xGA?WPw&6``caobK3F3vCh4sK zXKQ!}bs!I+uoTspJ`)VnGOb$qdJRb5nU4+7Ga)k-3&_)8DZ;e7Fn_I9B(`SlV8Ps> z0DIE=FQ+V{DU`fvTIVGb$^vD0R3o(pt~_e1HMHl8wN?{k03H231Xae1RK=@Xs+Hx& zt>;cUOm|^@ihIaa#;?O?#LiK@bDn846xM5vsVVog(xs&^^9+=9So2H(W!o+am-;ho zK+XWt^vZw{q92L#L^2l`>V}V=-12UZw35tM7vWdioAtWYW3*$^ZUs$_5ei2(gm!Ml zg3Wwd>*J_~i-uLl7b_wjl0N4cS&fRWRMyk5b^61phV2#+q$pH~z9p~0g@mk^4ohm| zjl9MRFu%!eRnS#@vs~1=@TCQ_srR^V=s;HKU@~@iB>*EBYaE{Hd7fAQvU*3BlZ5&A zO#8}m;JphY8kfIUPB4o`T+VGIp46Qjl69-m<&9r9(rju0p}e5ZNEGlOl}s>Q-VVy1 zxPsdp)5?EN^}=|yISp#`p0OrVf%tf#znq(V#_*Jr)94ohaoI83O@3kqbe?d*TbY6A zs1_=Rw1+2>MK?Gma2F!@YWP|#=ll5TgSO_)EE-prAUkNSIb?*&`t%l|a4X7ag19FG z6Y{|~y`8nJ8hg(kf2$Yi|AMj;$|0Lx?z>{2z>6I-4?yKfmsR3Mo|FMsC2%$5!ppb| zAu0Y5GA=geV33H)2lcvgUT=%xRt?_i_Sml>+=1J7(qClcOv}!a%SL})BpVRKeqEba zu7HmF^eH5`S=BU_?A(Ec?=c;ix~7U)w{%UT^Fzdj>`{K1oYhuD0IOqIGex5xRFusd zW(Sm}c}e(zcf7*(16%uDgz<e@~p zxm1=8mfYktWh?=!9?g@=qSswGga$+P5?D*2rxM0Jw{SJJPr!P=_nBGro!DP(-_6Ge zx|Zb*o4f;Uo8KJ(gQxr2jjzdQCRx^;Fa5|+wPvS(!s9Hr#|$k9q%mkmxu3YL26s1w z-R8w|cgs#rJUr6wXipZcKWn273VDTz)s~mvb@Lc{vUX4Vpr41iFJaF$*G`UPwE$T& zoITSJk2Acs$RWDnX~A5s!XSneV=wo>Ol@hLs%0wT^{=ni()VL&YYP=Tsyzfv%rH7z zLofvukss0mkf?&QQqF--3s)QSK>(>=+2%r22nG4G8) zWVw1NwQ*6?B0A>A_zB2dk6ofhN*1+6%T#et^5}x+@pv@7TI1*uS=jDYkbOl%+Rrtb z^Ti6tTSeVYopy=3qpQ28N;C2OSNfnu_-6%O^}&#)8vRR%c`#72qRJJUAr!YIv(LG+ zjiC6+l}ifTAEHoD%a`j# zF5FY>%?nFE^uKx8=`H-lKM}Nv79jC2nHAqDA{*u0A3q_+e=)mBK6AHot2DZfQF#*n zF{5;k>dFUY=lCcigRD}@)q`V=vx4h)6q4(R^*l3mcxi0-z~XRnnuId5H*pFZ*b17Q z0)cz*EKb5=Mg7i{guTI7Rw;<)McwCpI`WN`u+#Ov~+m4Q!B2JUE8TA?gb4GxH}p&-M_(PLEN< zeuS16{(u{)92H%Bu4{m4l;SDCp+{)-yNgYjCvT*U(^ZS;MdLUQ-iA_0DR>c7RotCIoO>iPd?rBaw8k*Zw2*h6RF%nns0z}C{y JqQTtv>F*<3-&Ftr literal 0 HcmV?d00001 From 9e11247e5ecc592fb4c3e9c080a5ab3cfd9e1edd Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Tue, 3 Feb 2026 19:00:02 +0530 Subject: [PATCH 3/3] Revise 'align-content' description and syntax Updated the description of the 'align-content' property for clarity and added details about its functionality. Adjusted the syntax and parameters sections for better formatting and understanding. --- .../terms/align-content/align-content.md | 42 +++++++++---------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/content/css/concepts/flexbox/terms/align-content/align-content.md b/content/css/concepts/flexbox/terms/align-content/align-content.md index 34e638128a6..4d5a7452370 100644 --- a/content/css/concepts/flexbox/terms/align-content/align-content.md +++ b/content/css/concepts/flexbox/terms/align-content/align-content.md @@ -1,19 +1,18 @@ --- Title: 'align-content' -Description: 'A flexbox property that controls the spacing between rows/columns of flex items, provided there are multiple lines of content.' +Description: 'Controls the spacing and alignment between rows or columns of items in a flex or grid container when there are multiple lines of content.' Subjects: - - 'Web Development' - 'Web Design' + - 'Web Development' Tags: - 'Flexbox' - 'Layout' CatalogContent: - 'learn-css' - 'paths/front-end-engineer-career-path' - - 'paths/full-stack-engineer-career-path' --- -A flexbox property that controls the spacing between rows/columns of flex items, provided there are multiple lines of content. +In CSS, **`align-content`** property controls how multiple rows or columns of flex items are spaced and aligned along the cross axis when a flex container wraps onto multiple lines. However, it only has an effect when: @@ -21,31 +20,30 @@ However, it only has an effect when: - There is extra space in the cross-axis of the container - If all items fit on one line, `align-content` will have no effect ---- - ## Syntax -```css -#section-c { - display: flex; - flex-wrap: wrap; - align-content: stretch; -}; +```pseudo +align-content: value; ``` -The `` can be any of the following: +**Parameters:** + +- `value`: Defines how the lines of content are spaced and aligned along the cross axis. Common values include: + - `flex-start` + - `flex-end` + - `center` + - `space-between` + - `space-around` + - `space-evenly` + - `stretch (default)` + +**Return value:** -- stretch -- flex-start -- flex-end -- center -- space-between -- space-around -- space-evenly +This property sets a layout rule and does not return a value. -## Example +## Example: Aligning wrapped flex rows using `align-content` -A container example with flex items that wrap into multiple rows, align-content controls the space between those rows and instead spreads them out vertically. +In this example, a flex container wraps its items into multiple rows, and `align-content: space-between` distributes the extra vertical space evenly between those rows along the cross axis: ```css .container {