From 820811361d521a71097cd38bd9ef104bb4c5db2e Mon Sep 17 00:00:00 2001 From: Stuart Mosquera Date: Wed, 4 Feb 2026 14:22:52 -0300 Subject: [PATCH 1/3] Add output image for justify-content example --- media/justify-content-example.png | Bin 0 -> 2172 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 media/justify-content-example.png diff --git a/media/justify-content-example.png b/media/justify-content-example.png new file mode 100644 index 0000000000000000000000000000000000000000..c50b341b5758ade69cf98a9e2dbaf798bf762f4b GIT binary patch literal 2172 zcmbuBS5y;N9>zlmA%qfzfRqrT6B!IL^xi>Al%j%&fRJcHQAi?1LXj5Qu1d*Lq$miH zqO_qn5C~NcjtC0U4H6WF9)f_dGT?@N*g40ub9T?}eYoY^?|k>(|HJpYe>v}DCk~Z| z0ssJUto@mb002;kKfetD^LzIu&N==73bDevLijBjLP+JWOy};%@T(zI0rahfen^ujG=lroH zD?~?&Xh6}}i#WJF9o?zIKOp|!`Tx1F!XXmyp18f>M@M$2o!_|IkA+#TG?Q$-^uv+k z1NMg11%v;q^>=Ul^E-SebX7Kuo34d=>~Tg6{i}d(oc+7JE`Ie~TAtpdSx>(mhUUrm zzqY^&Am{PEP^3fmu8N5_Hj;r+z4UfU^eT&2EjChCO0MXY+dU2YmY*D(W<`QNLYt0F z_p7A3IErq0#c|UZb|-8+_GVWNCmKi*7;(qR#oAA3gsDXAS8<0oC$${1^Ik<7d~sQv z#CcvRh~Jl+m=T#-Phq3HSitmO?qm_WR8o7tP6`AFPt3s7AJLY1(T1=cQqQUwWBKtC zsxjP3?fkfiIU>%yO`u^=R>ihbr*Kye5v2N4|4c%9IW9(ES*va*>Mio1$P|`Dq>@27 zQgRzLzVIwBX#_IvU0=_pP_r>;t1B}HEnF7tHVL$Q1E=94Wk0lnHdoqt>xh(N-tpiP z4e9~vcVcv_-Lv5O9W)|B9;8iK%hk{mN@`MPf)tN&0?DChujjBY(+SQp&tuzK3x(x# zymUuW)W7}x7Io*6YzuJ+b46T{f>Jc~9_-r7?T`fl8cHeQj-b_k8EY#{iw>dn?#jdj z2W$zb14>=yd^#dfDb~3AgQ~R_Nsi` zRe1ptP{kqVB{uRCcbga!-gkx`rV*s+yub4}=3 zk^r|&N3h3E(vKlLoZisvs+(;*qa~n&<_T->0}bhcX%da2WCY|XVwjTe?bJO8vvDdzK8O$air)0nIP znmX==GlRXmu3-e}=zz3P)YEce7MDINoCe1*E*jogOHq1AGumBm(gn{X+d2JuBgG>> z0ahcO9ulw~AGxmPa)WD@@oL~5szT^Ne5U>^X;8Gwe<3Q17Eye(A}FEuvO@hyU${N7 z6e__2l{?#x=c~W&937usM-Egct}Z1g6{VDkolfuKC=@7h@}K@RNInLLDxPECL1o|l z&D%gaAOEQ7~`7=i7ip1uQ++7e5r@dv1VVGRrX0LMpQ#(7Y$Z z)`n!&J=x>U5~%cKB{7RHa`?J(DW@%&jwWt;P;|NTz7PA(`5U@&25*_%zf~tEGkMJz z=KZzDWgk04JG*t}{Mfb6sE9?{!Wi2q;<9*11{F z`&f$#7d_CF8vrqui=RjtG5>m@RYxLLVOx@|sR2D(z2P2uWZbuCb#{|Novs(Q)-YI= zo`cgc6Yt%APrCFl$z@WlJskXj1(6E5CGIp&(iG11rn#tFM}h6FzYw;5$$WCE`K#y4 zsO3NeKkzTsBh!17e3BNJkE^BXANrU~Q%IP6%jS@2ZHa3Hc$Px5Rk2Zbqc|Jb*|IYpIGWWj;=VGAy)ecHnQ*%X0$u;A?AF%Xmb=m8; z{rLQmJme4KpZtkCl-=h+?$wB;|0RU^`bf(4%m+%kL{G74? literal 0 HcmV?d00001 From fe77afaa2013d1a14eb59d9848e99a422687ad76 Mon Sep 17 00:00:00 2001 From: Stuart Mosquera Date: Wed, 4 Feb 2026 14:23:20 -0300 Subject: [PATCH 2/3] Create justify-content.md --- .../terms/justify-content/justify-content.md | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 content/css/concepts/flexbox/terms/justify-content/justify-content.md diff --git a/content/css/concepts/flexbox/terms/justify-content/justify-content.md b/content/css/concepts/flexbox/terms/justify-content/justify-content.md new file mode 100644 index 00000000000..dfebf972ff1 --- /dev/null +++ b/content/css/concepts/flexbox/terms/justify-content/justify-content.md @@ -0,0 +1,52 @@ +--- +Title: 'justify-content' +Description: 'A property that defines the space between and around items within a container.' +Subjects: + - 'Web Design' + - 'Web Development' +Tags: + - 'Flexbox' + - 'Layout' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' + - 'paths/full-stack-engineer-career-path' +--- + +The **`justify-content`** property defines the space between and around items within a container along the flexbox's main axis or [`grid's`](https://www.codecademy.com/resources/docs/css/grids) inline axis. + +## Syntax + +```pseudo +justify-content: value; +``` + +The `value` can be any of the following: + +- `space-around` +- `space-between` +- `space-evenly` +- `stretch` +- `center` +- `flex-start` +- `flex-end` +- `start` +- `end` + +## Example + +In the following example, the `justify-content: space-around` property is used to distribute the flex items along the main axis. This creates equal space between the items, and half-sized spaces on both ends of the container. + +```css +.flex-container { + display: flex; + justify-content: space-around; + width: 500px; + padding: 1rem 0; + border: 3px solid white; +} +``` + +The output of the above code block is shown below: + +![An image showing how flex items align along the container's main axis.](https://raw.githubusercontent.com/Codecademy/docs/main/media/justify-content-example.png) From 9f6a3d5de8efb97e6ca549a181abc4becad73e21 Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Wed, 11 Feb 2026 17:38:51 +0530 Subject: [PATCH 3/3] Revise 'justify-content' description and parameters Updated the description of the 'justify-content' property to clarify its function in Flexbox and Grid. Enhanced the parameters section for better understanding. --- .../terms/justify-content/justify-content.md | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/content/css/concepts/flexbox/terms/justify-content/justify-content.md b/content/css/concepts/flexbox/terms/justify-content/justify-content.md index dfebf972ff1..950e53bbb8d 100644 --- a/content/css/concepts/flexbox/terms/justify-content/justify-content.md +++ b/content/css/concepts/flexbox/terms/justify-content/justify-content.md @@ -1,6 +1,6 @@ --- Title: 'justify-content' -Description: 'A property that defines the space between and around items within a container.' +Description: 'Aligns and distributes space between items along the main axis in Flexbox or the inline axis in Grid.' Subjects: - 'Web Design' - 'Web Development' @@ -13,7 +13,7 @@ CatalogContent: - 'paths/full-stack-engineer-career-path' --- -The **`justify-content`** property defines the space between and around items within a container along the flexbox's main axis or [`grid's`](https://www.codecademy.com/resources/docs/css/grids) inline axis. +The **`justify-content`** property aligns and distributes space between items along the main axis of a flex container, or aligns [`grid's`](https://www.codecademy.com/resources/docs/css/grids) tracks along the inline axis of a grid container. ## Syntax @@ -21,21 +21,22 @@ The **`justify-content`** property defines the space between and around items wi justify-content: value; ``` -The `value` can be any of the following: +**Parameters:** -- `space-around` -- `space-between` -- `space-evenly` -- `stretch` -- `center` -- `flex-start` -- `flex-end` -- `start` -- `end` +- `value`: Specifies how content is aligned or spaced. Common values include: + - `space-around` + - `space-between` + - `space-evenly` + - `stretch` + - `center` + - `flex-start` + - `flex-end` + - `start` + - `end` ## Example -In the following example, the `justify-content: space-around` property is used to distribute the flex items along the main axis. This creates equal space between the items, and half-sized spaces on both ends of the container. +In the following example, the `justify-content: space-around` property is used to distribute the flex items along the main axis. This creates equal space between the items, and half-sized spaces on both ends of the container: ```css .flex-container {