Awesome-Elements Layout

Flex

The flex system provides an easy and flexible way to apply responsive layout for differernt screen sizes.

For below examples, adjusting the screen width to see the difference.

Considering the horizonal space of a flex element is split into 12 portions, you can define how much spaces a flex item can take for different view breakpoints.

xs=12
xs=12, sm=5, md=4, lg=3, xl=2
xs=12, sm=7, md=4, lg=5, xl=7, xxl=8
xs=12, sm=7, md=4, lg=5, xl=7, xxl=8
xs=12

Setting a flex item size with fr to share remaining space evenly according to the fator. Not set the size or set it as "" works same as 1fr.

not set
not set
not set
not set
xs=2fr
xs=3fr
not set
xs=6, md=3
not set

Setting a flex item size to auto make it fit its content's width.

auto (child: 10rem)
not set
not set

Grid

The grid system helps to make a grid view structure.

1
2
3
4
5
6
7

Ratio Box

The ratio box element helps to maintain a width/height ratio based on the width.

16:9
3:4
1:1

View Break

The view break element helps to render different views depending on breakpoints.

xs
sm
md
lg
xl
xxl

Wrap

The wrap element applies a maximum width for its inner contents and leaves margins to both sides.

outer container spanning across the whole width
inner container with limited maximum width