Flex grid, internal element of height proportional to the width [3]

Use of the flex grid (flexible grid), a flexible element inside a container with a height proportional to the width

(Post 3 of the guide)

In the first example we can see an element whose length is expressed through the property flex-basis (on a percentage basis) while in the second example, the width is defined in a proportional way from the class bcd-f-flex-m-1 and bcd-f- flex-d-1. In both cases the class bcd-f-prop-h-100-w-100 tells us that the element must have a height equivalent to width

1

Here in the example the width esablished by the class bcd-f-flex-m-1 and bcd-f-flex-d-1:

1

In the following example is established the class bcd-f-prop-h-50-w-100 that defines the height to be half of the width. This relationship is respected also on the browser resizing.

1

This group of classes allow us to define the relationship between the height and the widthof a flexible object.

Menu
Find out more