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


Here in the example the width esablished by the class bcd-f-flex-m-1 and bcd-f-flex-d-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.


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


Find out more