Skip to content

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 - stretchX - justifyY - align
contentx:c or c:xy:c or c:y
itemsx:i or i:xy:i or i:y
selfx:s or s:xy:s or s:y

Order and Explanation

1 - axis 2 - target 3 - position
xaxis Xccontentbbaseline
yaxis Yiitemsnnormal
sselfccenter
eend
sstart
feflex-end
fsflex-start
saspace-around
sbspace-between
sespace-evenly
Example
<div class="x:c:b"></div>
<div class="y:i:n"></div>

1 - target 2 - position 3 - axis
ccontentbbaselinexaxis X
iitemsnnormalyaxis Y
sselfccenter
eend
sstart
feflex-end
fsflex-start
saspace-around
sbspace-between
sespace-evenly
Example
<div class="c:b:x"></div>
<div class="i:n:y"></div>

Example

Display
Align
Justify
i:c:y
c:c:x

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

CSS classes

:c: - contentDescription
x:c / c:xstretch
 
x:c:n / c:n:xnormal
x:c:c / c:c:xcenter
x:c:e / c:e:xend
x:c:s / c:s:xstart
x:c:fe / c:fe:xflex-end
x:c:fs / c:fs:xflex-start
x:c:sa / c:sa:xspace-around
x:c:sb / c:sb:xspace-between
x:c:se / c:se:xspace-evenly
:c: - contentDescription
y:c / c:ystretch
y:c:b / c:b:ybaseline
y:c:n / c:n:ynormal
y:c:c / c:c:ycenter
y:c:e / c:e:yend
y:c:s / c:s:ystart
y:c:fe / c:fe:yflex-end
y:c:fs / c:fs:yflex-start
y:c:sa / c:sa:yspace-around
y:c:sb / c:sb:yspace-between
y:c:se / c:se:yspace-evenly
:i: - itemsDescription
x:i / i:xstretch
x:i:b / i:b:xbaseline
x:i:c / i:c:xcenter
x:i:e / i:e:xend
x:i:s / i:s:xstart
x:i:fe / i:fe:xflex-end
x:i:fs / i:fs:xflex-start
:i: - itemsDescription
y:i / i:ystretch
y:i:b / i:b:ybaseline
y:i:c / i:c:ycenter
y:i:e / i:e:yend
y:i:s / i:s:ystart
y:i:fe / i:fe:yflex-end
y:i:fs / i:fs:yflex-start
:s: - selfDescription
x:s / s:xstretch
x:s:a / s:a:xauto
x:s:n / s:n:xnormal
x:s:b / s:b:xbaseline
x:s:c / s:c:xcenter
x:s:e / s:e:xend
x:s:s / s:s:xstart
x:s:fe / s:fe:xflex-end
x:s:fs / s:fs:xflex-start
:s: - selfDescription
y:s / s:ystretch
y:s:a / s:a:yauto
y:s:n / s:n:ynormal
y:s:b / s:b:ybaseline
y:s:c / s:c:ycenter
y:s:e / s:e:yend
y:s:s / s:s:ystart
y:s:fe / s:fe:yflex-end
y:s:fs / s:fs:yflex-start

Released under the MIT License