Content-position

The file content-position.css contains a set of CSS classes for aligning elements within a container. These classes manage the alignment of content, items, and individual elements along both the main axis (horizontal) and the cross axis (vertical) in a flexbox or grid layout.

default - stretch		X - justify	Y - align
	content	x:c or c:x	y:c or c:y
	items	x:i or i:x	y:i or i:y
	self	x:s or s:x	y:s or s:y

Order and Explanation

1 - axis		2 - target		3 - position
x	axis X	c	content	b	baseline
y	axis Y	i	items	n	normal
		s	self	c	center
				e	end
				s	start
				fe	flex-end
				fs	flex-start
				sa	space-around
				sb	space-between
				se	space-evenly

Example
<div class="x:c:b"></div>
<div class="y:i:n"></div>

---

1 - target		2 - position		3 - axis
c	content	b	baseline	x	axis X
i	items	n	normal	y	axis Y
s	self	c	center
		e	end
		s	start
		fe	flex-end
		fs	flex-start
		sa	space-around
		sb	space-between
		se	space-evenly

Example
<div class="c:b:x"></div>
<div class="i:n:y"></div>

Example

Wrap

Display

blockflexgrid

Align

align-contentalign-itemsalign-self stretchbaselinecenterendstartflex-endflex-start

Justify

justify-contentjustify-itemsjustify-self stretchnormalcenterendstartflex-endflex-startspace-aroundspace-betweenspace-evenly

i:c:y

c:c:x

<div class="d:f i:c:y c:c:x"></div>

CSS classes

:c: - content	Description
x:c / c:x	stretch
x:c:n / c:n:x	normal
x:c:c / c:c:x	center
x:c:e / c:e:x	end
x:c:s / c:s:x	start
x:c:fe / c:fe:x	flex-end
x:c:fs / c:fs:x	flex-start
x:c:sa / c:sa:x	space-around
x:c:sb / c:sb:x	space-between
x:c:se / c:se:x	space-evenly

:c: - content	Description
y:c / c:y	stretch
y:c:b / c:b:y	baseline
y:c:n / c:n:y	normal
y:c:c / c:c:y	center
y:c:e / c:e:y	end
y:c:s / c:s:y	start
y:c:fe / c:fe:y	flex-end
y:c:fs / c:fs:y	flex-start
y:c:sa / c:sa:y	space-around
y:c:sb / c:sb:y	space-between
y:c:se / c:se:y	space-evenly

:i: - items	Description
x:i / i:x	stretch
x:i:b / i:b:x	baseline
x:i:c / i:c:x	center
x:i:e / i:e:x	end
x:i:s / i:s:x	start
x:i:fe / i:fe:x	flex-end
x:i:fs / i:fs:x	flex-start

:i: - items	Description
y:i / i:y	stretch
y:i:b / i:b:y	baseline
y:i:c / i:c:y	center
y:i:e / i:e:y	end
y:i:s / i:s:y	start
y:i:fe / i:fe:y	flex-end
y:i:fs / i:fs:y	flex-start

:s: - self	Description
x:s / s:x	stretch
x:s:a / s:a:x	auto
x:s:n / s:n:x	normal
x:s:b / s:b:x	baseline
x:s:c / s:c:x	center
x:s:e / s:e:x	end
x:s:s / s:s:x	start
x:s:fe / s:fe:x	flex-end
x:s:fs / s:fs:x	flex-start

:s: - self	Description
y:s / s:y	stretch
y:s:a / s:a:y	auto
y:s:n / s:n:y	normal
y:s:b / s:b:y	baseline
y:s:c / s:c:y	center
y:s:e / s:e:y	end
y:s:s / s:s:y	start
y:s:fe / s:fe:y	flex-end
y:s:fs / s:fs:y	flex-start