Flex

A one dimensional layout

class="flex"
Lucky laser
Height = 5rem
Jump as high as you can
Height = 10rem
Squids are long

class="flex align-start"
Lucky laser
Height = 5rem
Jump as high as you can
Height = 10rem
Squids are long

class="flex align-end break-md"
Lucky laser
Height = 5rem
Jump as high as you can
Height = 10rem
Squids are long

class="flex justify-space-between break-lg"
Lucky laser
Height = 5rem
Jump as high as you can
Height = 10rem
Squids are long

class="flex justify-end break-xl"
Lucky laser
Height = 5rem
Jump as high as you can
Height = 10rem
Squids are long

class="flex even align-start break-md"
Lucky laser
Height = 5rem
Jump as high as you can
Froggy
Height = 10rem
Squids are long

class="flex"

Flex is applied per row

grow
grow-1
grow-2
grow-3
grow-1

class="flex" style="flex: calc(1600/900) 0 0%;"

More complex grow where the aspect ratio of the image is the flex grow for that image


class="flex column"
Lucky laser
Height = 5rem
Jump as high as you can
Froggy
Height = 10rem
Squids are long
class="flex column w-20 h-20"
Lucky laser
Height = 5rem
Jump as high as you can
Froggy
Height = 10rem
Squids are long
Many sections
Many sections
Many sections
Many sections
Many sections
Many sections

Grid

A two dimensional layout

class="flex align-center justify-center"
Hey
class="grid center"
Hey

class="grid col-12"
cols-1
cols-2
cols-3
cols-4
cols-2
rows-2
cols-10

class="grid col-12 break-md"
cols-4
rows-3
cols-8
cols-5
cols-3
cols-2
cols-6

class="grid col-12 break-lg"
r1
r2
r3
r4
r5
r6
r7
r8
r9
r10
r11
r12
c1
c2
c3
c4
c5
c6
c7
c8
c9
c10
c11
c12

class="grid auto-sm"
Lucky laser
Height = 5rem
Jump as high as you can
Froggy
Height = 10rem
Squids are long

class="grid auto-md"
Lucky laser
Height = 5rem
Jump as high as you can
Froggy
Height = 10rem
Squids are long

class="grid auto-lg"
Lucky laser
Height = 5rem
Jump as high as you can
Froggy
Height = 10rem
Squids are long