25.08.2016

Flex grid, add and distribute items in a container

The Flex Grid allows different basic logic to distribute elements in a container

(Post 2 of the guide)

There are several reasons for grouping items in a container, the container usually describes the idea and the element inside is a uniqueness of the idea: photo gallery, items in a list, people in a group. Practice to define groups and singularity helps you understand what kind of view we are requesting our development rather than starting with the development and see where it leads, usually always it leads to the same result canon.

EXAMPLE
EXAMPLE
EXAMPLE

In the previous example are defined three elements inside a container, the proportion between the elements relative to the container is defined by the class bcd-f-flex-m-x and bcd-f-flex-d-x where x is the number that represents the proportion of the element than the other. Three elements that have the same class bcd-f-flex-m-1 do not differ by three elements that have the class bcd-f-flex-m-8 because the number defines the ratio of dimension in the container in the defined direction (horizontal or vertical).

In the following example the same elements have classes bdc-f-flex-d-1, bcd-f-flex-d-2, bcd-f-flex-d-4 and this means that the available space is segmented into 7 parts and elements distributed according to their numbers: each one is double the other. This is done in view of “desktop” defined by the letter “d” of the class, but also objects have classes bcd-f-flex-m-1, BCD-f-flex-m-2, BCD-f-flex-m-1 which they determine that the mobile view the relationship of the elements changes and that the center is double the previous 2 as follows:

1
2
3

In this view, in the mobile version (below 768px), instead, relationship between with and height is valid because the container has an expressed height.

1
2
3

Note how the bcd-class f-flow-c-to-r of the container defining the boundary between the horizontal and the vertical arrangement on the verge of default of 768px (the border between mobile and desktop).
If at first glance it was believed to be able to go to replace the grid of Twitter Bootstrap with Flex Grid, for a closer look, we realize that this is not the solution because this configuration redefines what was a relationship wide with a new height ratio between the items in the column below 768px.

In the following example the same proportions that change to the transition from mobile view (below 768px) to desktop view (768px and over) but the arrangement remains horizontal which is the container has a class bcd-f-flow-r-to-r (row to row)

1
2
3

In the following example the same proportions that change to the transition from mobile view (below 768px) to desktop view (768px and over) but the arrangement remains vertical or the container has a class bcd-f-flow-c-to-c (row to row)

1
2
3

In the following example the same proportions that change with the transition from mobile view (below 768px) to view the desktop (768px and over) but the arrangement is reversed, from horizontal to vertical, or the container has a class bcd-f-flow-r -to-c (row to column)

1
2
3

commenti

Menu
Find out more